From 57f1d93b6b6fb20a907be36f0f4cd9e440da30ea Mon Sep 17 00:00:00 2001
From: Mert Araz <mertoreyiz1907@gmail.com>
Date: Sat, 7 Oct 2023 16:43:22 +0300
Subject: [PATCH] tailwind responsive finished

---
 src/App.jsx | 39 ++++++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1cf95af..9af4498 100644
--- 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>
+
   
   )
 }