update App.js, src/components/BoxNextToEachOther/index.js, src/components/ProfileInfo/index.js and src/components/UserProfileInfo/index.js

src/App.js

@@ -240,13 +240,13 @@ function App() {
         {/* <IndianaDragScroll /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <CardDesign2 />
+        {/* <CardDesign2 /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <CustomToast2 /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <CardDesign3 />
+        {/* <CardDesign3 /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <DateTime /> */}
@@ -255,7 +255,7 @@ function App() {
         {/* <ProfileInfo /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <UserProfileInfo />
+        {/* <UserProfileInfo /> */}
 
         <BoxNextToEachOther />
 

src/components/BoxNextToEachOther/index.js

@@ -6,11 +6,11 @@ const BoxNextToEachOther = ({ items }) => {
   const [active, setActive] = useState(null);
 
   return (
-    <div className="flex flex-row items-center mx-auto justify-between max-w-[750px] ">
+    <div className="w-fit flex flex-row items-center gap-x-2">
       {items.map((item, index) => (
         <div
           key={index}
-          className={`relative flex flex-col items-center justify-center text-2xl max-w-[224px] max-h-[210px] w-44 h-44 border border-[#EBF4FF] rounded-md cursor-pointer ${
+          className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-[#EBF4FF] rounded-md cursor-pointer ${
             active === item ? "bg-[#245CE1]" : "bg-white"
           }`}
           onClick={() => setActive(active === item ? null : item)}

src/components/UserProfileInfo/index.js

@@ -7,7 +7,7 @@ import DateTime from "../DateTime";
 const UserProfileInfo = () => {
   return (
     <div className="flex flex-row items-center w-fit m-20">
-      <DateTime />{" "}
+      <DateTime />
       <div
         className="w-0.5 bg-[#9DACD344] mx-4"
         style={{ height: "54px" }}