tailwind responsive finished

measses · Oct 7, 2023 · 57f1d93 · 57f1d93
1 parent da11749
commit 57f1d93
Showing 1 changed file with 22 additions and 17 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -20,24 +20,29 @@ function App() {
 
   return (
     <div className="container mx-auto">
-    <Navbar />
-    <ImageSearch searchText={(text) => setTerm(text)} />
-    <div className="relative">
-      {!images.length && !isLoading && (
-        <div className="absolute text-3xl inset-0 flex items-center justify-center bg-red-50 dark:bg-gray-800 dark:text-red-400 text-red-800 rounded-lg p-7 " role="alert">          <span className="font-medium"> No Images Found! </span>
-        </div>
-      )}
-      {isLoading ? (
-        <h1 className="text-6xl text-center mx-auto mt-32">Loading..</h1>
-      ) : (
-        <div className="grid grid-cols-3 gap-4">
-          {images.map((image) => (
-            <ImageCard key={image.id} image={image} />
-          ))}
-        </div>
-      )}
-    </div>
+      <div className="flex items-center justify-center">
+        <Navbar />
+      </div>
+
+  <ImageSearch searchText={(text) => setTerm(text)} />
+  <div className="relative">
+    {!images.length && !isLoading && (
+      <div className="absolute text-3xl inset-0 flex items-center justify-center bg-red-50 dark:bg-gray-800 dark:text-red-400 text-red-800 rounded-lg p-7 " role="alert">
+        <span className="font-medium"> No Images Found! </span>
+      </div>
+    )}
+    {isLoading ? (
+      <h1 className="text-6xl text-center mx-auto mt-32">Loading..</h1>
+    ) : (
+      <div className="grid grid-cols-2 mx-4 md:grid-cols-3 gap-4">
+        {images.map((image) => (
+          <ImageCard key={image.id} image={image} />
+        ))}
+      </div>
+    )}
   </div>
+</div>
+
 
   )
 }