update

src/App.js

@@ -21,23 +21,23 @@ import Functionality from "./components/functionality/Functionality";
 function App() {
   return (
     <div className="App">
-      <ProductDesign />
+      {/* <ProductDesign /> */}
-      <VodProductDesign />
+      {/* <VodProductDesign /> */}
-      <BookDesign />
+      {/* <BookDesign /> */}
-      <ButtonDesign />
+      {/* <ButtonDesign /> */}
-      <ProductTags />
+      {/* <ProductTags /> */}
-      <CounterDesign />
+      {/* <CounterDesign /> */}
-      <BlogDesign1 />
+      {/* <BlogDesign1 /> */}
-      <BlogDesign2 />
+      {/* <BlogDesign2 /> */}
-      <BlogDesign3 />
+      {/* <BlogDesign3 /> */}
-      <BlogDesign4 />
+      {/* <BlogDesign4 /> */}
-      <BlogDesign5 />
+      {/* <BlogDesign5 /> */}
-      <BlogDesign6 />
+      {/* <BlogDesign6 /> */}
-      <HeaderDesign1 />
+      {/* <HeaderDesign1 /> */}
-      <ContactInfoSection />
+      {/* <ContactInfoSection /> */}
-      <FooterDesign1 />
+      {/* <FooterDesign1 /> */}
       {/* <Testttt /> */}
-      <Design2D />
+      {/* <Design2D /> */}
       <Functionality />
     </div>
   );

src/components/Design2D/Design2D.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const Design2D = ({ array }) => {
   return (
-    <section className="flex items-center justify-around bg-white h-60">
+    <section className="flex items-center justify-around bg-pink-100 h-60">
       {array.map((item, index) => (
         <div
           className={`flex flex-col h-full`}
@@ -11,9 +11,13 @@ const Design2D = ({ array }) => {
         >
           {item.items.map((item1, index) => (
             <div
-              className={`flex ${item1.bg}`}
+              className={`flex p-4 ${item1.bg}`}
               style={{ flex: item1.flex }}
-            ></div>
+            >
+              <div className="bg-indigo-300 w-full h-full flex items-center justify-center">
+                <p>inside the div</p>
+              </div>
+            </div>
           ))}
         </div>
       ))}

src/components/functionality/Functionality.js

@@ -28,7 +28,7 @@ const Functionality = ({
 }) => {
   return (
     <section>
-      <div className="w-11/12 mx-auto mt-7 bg-white p-7  shadow-sm">
+      <div className="w-11/12 mx-auto mt-7 bg-white p-7 shadow-sm border-2 border-gray-400 border-b-0 rounded-lg rounded-b-none">
         <h2 className={`text-lg font-bold ${componentTitleTextColor}`}>
           {componentTitle}
         </h2>
@@ -62,7 +62,7 @@ const Functionality = ({
           </div>
         </div>
       </div>
-      <div className="w-11/12 mx-auto bg-rangeBgColor p-10 flex items-center justify-between">
+      <div className="w-11/12 mx-auto bg-rangeBgColor p-10 flex flex-col sm:flex-row items-center justify-between border-2 border-gray-400 border-t-0 rounded-lg rounded-t-none">
         <div>
           <h2 className={`font-semibold text-base ${footerTitleTextColor}`}>
             {footerTitle}
@@ -72,7 +72,7 @@ const Functionality = ({
           </p>
         </div>
         <button
-          className={`px-7 py-3 text-base rounded-md hover:${buttonTitleHoverBgColor} ${buttonTitleTextColor} ${buttonTitleBgColor} ${buttonTitleBorder} ${buttonTitleBorderColor}`}
+          className={`px-7 py-3 text-sm sm:text-base mt-5 sm:mt-0 rounded-md hover:${buttonTitleHoverBgColor} ${buttonTitleTextColor} ${buttonTitleBgColor} ${buttonTitleBorder} ${buttonTitleBorderColor}`}
         >
           {buttonTitle}
         </button>
@@ -101,7 +101,7 @@ Functionality.defaultProps = {
   containerBgColor: "bg-likeBtnBg",
 
   functionalityIconPadding: "p-5",
-  functionalityIconBgColor: "bg-yellow-100",
+  functionalityIconBgColor: "bg-yellow-50",
 
   footerTitleTextColor: "text-productTitle",
   footerExplanationTextColor: "text-productTitle",