From f9b6b58f7f7e3987d1bf87314fb11ecd08358b90 Mon Sep 17 00:00:00 2001
From: dracco1993 <dracco1993@gmail.com>
Date: Thu, 16 May 2024 00:54:34 -0400
Subject: [PATCH] Okay, tailwind works for real

---
 app/views/home/index.erb               | 76 +++++++++++++++++++++++++-
 app/views/layouts/application.html.erb |  2 +-
 2 files changed, 74 insertions(+), 4 deletions(-)
diff --git a/app/views/home/index.erb b/app/views/home/index.erb
index 6218c8b..a0a504e 100644
--- a/app/views/home/index.erb
+++ b/app/views/home/index.erb
@@ -1,3 +1,73 @@
-<h1 class="text-3xl font-bold underline">
-  Hello world!
-</h1>
+<div
+  class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950"
+>
+  <div
+    class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md"
+  >
+    <h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">
+      Welcome Back!
+    </h1>
+    <form action="#">
+      <div class="mb-4">
+        <label
+          for="email"
+          class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+          >Email Address</label
+        >
+        <input
+          type="email"
+          id="email"
+          class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder="your@email.com"
+          required
+        />
+      </div>
+      <div class="mb-4">
+        <label
+          for="password"
+          class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+          >Password</label
+        >
+        <input
+          type="password"
+          id="password"
+          class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder="Enter your password"
+          required
+        />
+        <a
+          href="#"
+          class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >Forgot Password?</a
+        >
+      </div>
+      <div class="flex items-center justify-between mb-4">
+        <div class="flex items-center">
+          <input
+            type="checkbox"
+            id="remember"
+            class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:outline-none"
+            checked
+          />
+          <label
+            for="remember"
+            class="ml-2 block text-sm text-gray-700 dark:text-gray-300"
+            >Remember me</label
+          >
+        </div>
+        <a
+          href="#"
+          class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >Create Account</a
+        >
+      </div>
+      <button
+        onclick="alert('hello')"
+        type="submit"
+        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      >
+        Login
+      </button>
+    </form>
+  </div>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 6c635d2..641d777 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -10,7 +10,7 @@
 
   <body>
     <main class="container mx-auto mt-28 px-5 flex">
-      <%= yield %>
+      <%=yield %>
     </main>
   </body>
 </html>
