fix image

css/main.css

@@ -1568,6 +1568,10 @@ html {
   min-height: 0px;
 }
 
+.w-1\/2 {
+  width: 50%;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -1584,10 +1588,6 @@ html {
   width: 1.5rem;
 }
 
-.w-1\/2 {
-  width: 50%;
-}
-
 .w-full {
   width: 100%;
 }
@@ -1621,6 +1621,16 @@ html {
   background-color: hsl(var(--b1) / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-fuchsia-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(232 121 249 / var(--tw-bg-opacity));
+}
+
 .bg-primary {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--p) / var(--tw-bg-opacity));
@@ -1631,14 +1641,19 @@ html {
   background-color: hsl(var(--s) / var(--tw-bg-opacity));
 }
 
-.bg-base-200 {
+.bg-slate-500 {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
 
-.bg-black {
+.bg-red-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
+.bg-slate-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
 
 .fill-current {
@@ -1659,20 +1674,20 @@ html {
   padding: 0px;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
-.p-4 {
-  padding: 1rem;
+.p-1 {
+  padding: 0.25rem;
 }
 
 .p-10 {
   padding: 2.5rem;
 }
 
-.p-1 {
-  padding: 0.25rem;
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
 }
 
 .px-1 {
@@ -1685,11 +1700,6 @@ html {
   padding-right: 0.75rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1700,6 +1710,11 @@ html {
   padding-right: 1.25rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1727,11 +1742,6 @@ html {
   font-weight: 700;
 }
 
-.text-base-content {
-  --tw-text-opacity: 1;
-  color: hsl(var(--bc) / var(--tw-text-opacity));
-}
-
 .text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -1757,11 +1767,21 @@ html {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+@media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+}
+
 @media (min-width: 768px) {
   .md\:-m-2 {
     margin: -0.5rem;
   }
 
+  .md\:inline-flex {
+    display: inline-flex;
+  }
+
   .md\:p-2 {
     padding: 0.5rem;
   }
@@ -1776,6 +1796,10 @@ html {
     display: none;
   }
 
+  .lg\:w-1\/2 {
+    width: 50%;
+  }
+
   .lg\:pt-4 {
     padding-top: 1rem;
   }

index.html

@@ -104,7 +104,7 @@
     <!-------- Image Post Start ----->
     <div class="bg-primary px-5 py-2 lg:pt-4">
         <div class="-m-1 flex flex-wrap md:-m-2">
-            <div class="flex w-1/2 flex-wrap ">
+            <div class="flex lg:w-1/2 flex-wrap ">
                 <div class="w-full p-1 md:p-2 relative">
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
                         src="img/front-slide-img-01-min.jpg" />
@@ -115,26 +115,26 @@
                             KindaCode.com</p>
                     </div>
                 </div>
-                <div class="w-full p-1 md:p-2">
+                <div class="w-full p-1 md:p-2 relative">
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
                         src="img/front-slide-img-02-min.jpg" />
                 </div>
             </div>
-            <div class="flex w-1/2 flex-wrap">
-                <div class="w-full p-1 md:p-2 relative">
+            <div class="flex lg:w-1/2 flex-wrap">
+                <div class="w-full p-1 md:p-2 ">
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
                         src="img/front-slide-img-03-min.jpg" />
-                    <div class="absolute bottom-10 left-2 right-2 px-4 py-2 bg-secondary opacity-70">
-                        <h3 class="text-xl text-white font-bold">
-                            Hey, I Am The Big Boss</h3>
-                        <p class="mt-2 text-sm text-gray-300">Some description text. Some dummy text here. Welcome to
-                            KindaCode.com</p>
-                    </div>
+ 
                 </div>
             </div>
         </div>
     </div>
     <!-------- Image Post End ----->
+    <div class="flex">
+        <div class="w-full p-1 md:p-2 relative bg-slate-400">111</div>
+        <div class="w-full p-1 md:p-2 relative bg-red-600">222</div> 
+    </div>
+
     <!-------- End Start--------->
 
     <!----- Footet Start ----->