update src/components/AddToCart/AddToCart1/index.js and src/components/ProductDescriptionTable/ProductTable1/index.js

src/components/AddToCart/AddToCart1/index.js

@@ -26,9 +26,9 @@ const AddToCart1 = ({
     },
   ];
   return (
-    <div className="w-full felx flex-col items-center justify-center mx-4 p-4 pt-0 bg-gray-100">
+    <div className="w-full felx flex-col items-center justify-center p-4 pt-0 bg-gray-200">
       {showProduct && (
-        <div className="w-full max-w-8 flex justify-center items-center m-0 py-4 overflow-hidden">
+        <div className="w-full max-w-8 flex justify-center items-center  py-4 overflow-hidden">
           <img
             src={productImg}
             alt="productImage"

src/components/ProductDescriptionTable/ProductTable1/index.js

@@ -1,14 +1,15 @@
 import React from "react";
+import AddToCart1 from "../../AddToCart/AddToCart1";
 
-const ProductTable1 = ({ navTitles, items, addToCart }) => {
+const ProductTable1 = ({ navTitles, items }) => {
   return (
     <>
-      <div className="w-full flex justify-center rounded bg-gray-200">
+      <div className="w-full flex justify-center bg-gray-200 rounded">
         <ul className="w-full flex justify-center">
           {navTitles.map((item) => (
             <li
               key={`NavTitle_${item.id}`}
-              className={`p-6 mx-4 cursor-pointer
+              className={`mx-4 p-6 cursor-pointer
                      ${
                        item.isActive
                          ? "border-0 border-b-4 border-solid border-blue-500"
@@ -23,25 +24,27 @@ const ProductTable1 = ({ navTitles, items, addToCart }) => {
           ))}
         </ul>
       </div>
-      <div className="w-full flex">
+      <div className="w-full flex flex-row">
-        <div className="flex-1 ">
+        <div className="flex-1">
           {items.map((e) =>
             e.items.map((item) => (
-              <ul className="flex w-full flex-1 my-2 items-center">
+              <ul className="w-full flex flex-row items-center flex-1 my-2">
                 <li
-                  className="py-4 px-8  min-w-md bg-gray-200 ml-4 text-blueC0"
+                  className="min-w-md  ml-4 py-4 px-8 bg-gray-200 text-blue-600"
                   style={{ minWidth: "300px" }}
                 >
                   {item.title}
                 </li>
-                <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 w-full">
+                <li className="min-w-md w-full  py-4 px-8 bg-gray-200 ">
                   {item.description}
                 </li>
               </ul>
             ))
           )}
         </div>
-        <div className="my-2">{addToCart}</div>
+        <div className="my-2 mr-4">
+          <AddToCart1 />
+        </div>
       </div>
     </>
   );