From 0f75a0442b2eee2f8b3c375e30ca9448c9e7ceb9 Mon Sep 17 00:00:00 2001
From: Hardik Srivastava <144905418+hardiksrivastavaa@users.noreply.github.com>
Date: Sun, 13 Oct 2024 18:14:39 +0530
Subject: [PATCH] Tailwind CSS Added

---
 views/index.ejs | 80 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 28 deletions(-)
diff --git a/views/index.ejs b/views/index.ejs
index b5df93e..e57566b 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -1,49 +1,73 @@
+
+
+
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Instagram</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <title>All Posts</title>
     <link rel="stylesheet" href="/style.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
-  </head>
-  
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+    </style>
+</head>
+
+<body class="bg-gray-100">
 
-<body class="bg-gray-100 p-6">
-    <h1 class="text-4xl font-bold text-center text-gray-800 mb-6">Instagram - Posts</h1>
+    <h1 class="text-4xl text-center font-bold text-blue-600 mt-6">Instagram - Posts</h1>
 
-    <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
+    <div class="max-w-4xl mx-auto mt-8 space-y-6">
         <% for (post of posts) { %>
-            <div class="bg-white shadow-md rounded-lg p-6">
-                <div class="mb-4">
-                    <h2 class="text-xl font-semibold text-gray-700">@<%= post.username %>
-                    </h2>
-                    <h4 class="text-gray-500">
-                        <%= post.content %>
-                    </h4>
-                </div>
-                <div class="flex justify-between items-center mt-4">
-                    <a href="/posts/<%= post.id %>" class="text-blue-500"><i class="fa-solid fa-eye fa-xl"></i></a>
-                    <a href="/posts/<%= post.id %>/edit" class="text-yellow-500"><i
-                            class="fa-solid fa-pen-to-square fa-xl"></i></a>
-                    <form action="/posts/<%= post.id %>?_method=DELETE" method="post" class="inline-block">
-                        <button class="text-red-500"><i class="fa-solid fa-trash fa-xl"></i></button>
-                    </form>
-                </div>
+        <div class="bg-white p-6 rounded-lg shadow-md flex justify-between items-center">
+            <!-- User content -->
+            <div class="space-y-2">
+                <h2 class="text-2xl font-semibold text-gray-800">@<%= post.username %></h2>
+                <h4 class="text-gray-600"><%= post.content %></h4>
             </div>
-            <% } %>
+
+            <!-- Buttons container -->
+            <div class="flex space-x-3">
+                <!-- View button -->
+                <a href="/posts/<%= post.id %>"
+                    class="text-blue-500 hover:text-blue-700 transition-colors duration-300">
+                    <i class="fa-solid fa-eye fa-xl"></i>
+                </a>
+
+                <!-- Edit button -->
+                <a href="/posts/<%= post.id %>/edit"
+                    class="text-yellow-500 hover:text-yellow-700 transition-colors duration-300">
+                    <i class="fa-solid fa-pen-to-square fa-xl"></i>
+                </a>
+
+                <!-- Delete button -->
+                <form action="/posts/<%= post.id %>?_method=DELETE" method="post">
+                    <button class="text-red-500 hover:text-red-700 transition-colors duration-300">
+                        <i class="fa-solid fa-trash fa-xl"></i>
+                    </button>
+                </form>
+            </div>
+        </div>
+        <% } %>
     </div>
 
-    <div class="fixed bottom-6 right-6">
-        <a href="/posts/new" class="bg-green-500 text-white rounded-full p-4 shadow-lg">
-            <i class="fa-regular fa-square-plus fa-2xl"></i>
+    <div class="fixed bottom-8 right-8">
+        <a href="/posts/new"
+            class="bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition-colors duration-300">
+            <i class="fa-regular fa-square-plus fa-xl"></i>
         </a>
     </div>
-</body>
 
+</body>
 
 </html>
