所有组件

                <div class="bg-gray-800 text-white rounded-lg shadow-md">
    <div class="flex border-b border-gray-700">
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab1')">Tab 1</button>
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab2')">Tab 2</button>
        <button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab3')">Tab 3</button>
    </div>
    <div id="tab1" class="p-4">
        <h2 class="text-lg font-semibold">Tab 1 Content</h2>
        <p>Content for tab 1 goes here.</p>
        <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="rounded-md mt-2">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>John Doe</span>
        </div>
    </div>
    <div id="tab2" class="hidden p-4">
        <h2 class="text-lg font-semibold">Tab 2 Content</h2>
        <p>Content for tab 2 goes here.</p>
        <img src="https://picsum.photos/400/200?random=2" alt="Placeholder Image" class="rounded-md mt-2">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Jane Doe</span>
        </div>
    </div>
    <div id="tab3" class="hidden p-4">
        <h2 class="text-lg font-semibold">Tab 3 Content</h2>
        <p>Content for tab 3 goes here.</p>
        <img src="https://picsum.photos/400/200?random=3" alt="Placeholder Image" class="rounded-md mt-2">
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Mike Smith</span>
        </div>
    </div>
</div>
              

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-sm w-full text-center">
        <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Login with your favorite social media account</p>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center space-x-2 border-2 border-blue-500 rounded-lg py-2 hover:bg-blue-500 hover:text-white transition duration-300">
                <img src="https://picsum.photos/24/24" alt="Facebook Avatar" class="rounded-full">
                <span class="font-semibold">Login with Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center space-x-2 border-2 border-red-500 rounded-lg py-2 hover:bg-red-500 hover:text-white transition duration-300">
                <img src="https://picsum.photos/24/24" alt="Google Avatar" class="rounded-full">
                <span class="font-semibold">Login with Google</span>
            </a>
            <a href="#" class="flex items-center justify-center space-x-2 border-2 border-yellow-500 rounded-lg py-2 hover:bg-yellow-500 hover:text-white transition duration-300">
                <img src="https://picsum.photos/24/24" alt="Twitter Avatar" class="rounded-full">
                <span class="font-semibold">Login with Twitter</span>
            </a>
        </div>
        <div class="mt-6">
            <span class="text-gray-500 dark:text-gray-400">Or login with your email</span>
        </div>
        <input type="email" placeholder="Email" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
        <input type="password" placeholder="Password" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
        <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg py-2 transition duration-300">Login</button>
    </div>
    <div class="mt-4 text-gray-500 dark:text-gray-400">
        <span>Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></span>
    </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all hover:scale-105">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-md">
            <div class="ml-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
                <p class="text-gray-600 dark:text-gray-400">Your session will expire soon.</p>
            </div>
        </div>
        <div class="mb-4">
            <img src="https://picsum.photos/400/200" alt="Alert Image" class="w-full h-32 object-cover rounded-lg shadow-md">
        </div>
        <p class="text-gray-600 dark:text-gray-400">To maintain security, please save your work and log back in soon.</p>
        <div class="mt-6 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-lg shadow-md">Stay Logged In</button>
            <button class="px-4 py-2 text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg shadow-md">Log Out</button>
        </div>
    </div>
</div>
              

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="shadow overflow-hidden border-b border-gray-200 dark:border-gray-800 sm:rounded-lg">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
      <thead class="bg-gray-50 dark:bg-gray-800">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Name
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Title
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Status
          </th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
            Role
          </th>
          <th scope="col" class="relative px-6 py-3">
            <span class="sr-only">Edit</span>
          </th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-10 w-10">
                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">
                  John Doe
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  [email protected]
                </div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-white">Software Engineer</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Optimization</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100">
              Active
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
            Admin
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-10 w-10">
                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">
                  Jane Smith
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  [email protected]
                </div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-white">UI/UX Designer</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Creative</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100">
              Pending
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
            User
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
              

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 border-4 border-black dark:border-white">
  <h1 class="text-2xl font-bold mb-4 text-black dark:text-white">Shopping Cart</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item1/300/200" alt="Item 1" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 1</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 1.</p>
      <p class="text-black dark:text-white font-bold">$19.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item2/300/200" alt="Item 2" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 2</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 2.</p>
      <p class="text-black dark:text-white font-bold">$29.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item3/300/200" alt="Item 3" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 3</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 3.</p>
      <p class="text-black dark:text-white font-bold">$39.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
  </div>
  <div class="mt-8 border-t-4 border-black dark:border-white pt-4 flex justify-between items-center">
    <h2 class="text-xl font-bold text-black dark:text-white">Total:</h2>
    <p class="text-xl font-bold text-black dark:text-white">$89.97</p>
  </div>
  <div class="mt-4 flex justify-end">
    <button class="p-4 bg-black text-white dark:bg-white dark:text-black border-4 border-black dark:border-white text-xl font-bold">Checkout</button>
  </div>
</div>
              

                <nav class="bg-gray-800 text-white py-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-xl font-bold hover:text-gray-400 transition duration-300">RetroNav</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Contact</a></li>
            </ul>
        </div>
        <div class="md:hidden">
            <button class="text-gray-400 focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
</nav>

<div class="bg-gray-900 text-white p-8 flex flex-col items-center">
    <h1 class="text-3xl font-bold mb-4">Welcome to RetroNav</h1>
    <p class="mb-4">Experience the nostalgia of the 80s and 90s with our vintage-inspired designs.</p>
    <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-4 rounded-lg shadow-md">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600">
        <span class="font-semibold">User Name</span>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: white;
        }
        nav {
            background-color: #2c2c2c;
        }
    }
</style>
              

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg max-w-md w-full p-4">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Chat Window</h2>
        <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white focus:outline-none">
            <span>&times;</span>
        </button>
    </div>
    <div class="flex flex-col space-y-4 overflow-y-auto h-64">
        <div class="flex items-start space-x-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
                Hello! How are you?
            </div>
        </div>
        <div class="flex items-start space-x-2 justify-end">
            <div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
                I am fine, thank you! And you?
            </div>
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
        </div>
        <div class="flex items-start space-x-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
                Doing great! Just working on some projects.
            </div>
        </div>
        <div class="flex items-start space-x-2 justify-end">
            <div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
                That sounds interesting!
            </div>
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar">
        </div>
    </div>
    <div class="mt-4">
        <input type="text" placeholder="Type your message..." class="w-full bg-gray-100 dark:bg-gray-600 border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">
    </div>
</div>
              

                <div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-xl font-semibold mb-4">Filters</h2>
    <div class="flex flex-col md:flex-row md:space-x-4 mb-4">
        <input type="text" placeholder="Search..." class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300" />
        <select class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300">
            <option value="">Select Category</option>
            <option value="category1">Category 1</option>
            <option value="category2">Category 2</option>
        </select>
        <button class="bg-purple-500 text-white rounded-lg p-2 hover:bg-purple-600 transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-600">Apply</button>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 1</h3>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 2</h3>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
            <h3 class="text-lg font-medium">Filter Item 3</h3>
        </div>
    </div>
    <div class="mt-4">
        <p class="text-sm text-gray-600 dark:text-gray-400">Using filters can help narrow down your search results based on your preferences!</p>
    </div>
</div>
              

                <div class="container mx-auto p-8 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono">
  <h1 class="text-5xl font-bold mb-8 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Your Cart</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Item Name</h2>
        <span class="text-xl font-bold">$99.99</span>
      </div>
      <p class="mb-4">Brief description of the item goes here. Brutalist aesthetic with high contrast and strong lines.</p>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
          <span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">1</span>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
        </div>
        <button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
      </div>
    </div>
        <div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Another Item</h2>
        <span class="text-xl font-bold">$199.99</span>
      </div>
      <p class="mb-4">Another description for another item. Keeping with the raw and bold design principles.</p>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
          <span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">2</span>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
        </div>
        <button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
      </div>
    </div>
  </div>
  <div class="mt-8 border-t-4 border-gray-900 dark:border-gray-100 pt-8 flex justify-between items-center">
    <h2 class="text-3xl font-bold">Total</h2>
    <span class="text-3xl font-bold">$299.98</span>
  </div>
  <div class="mt-8 text-right">
    <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-2xl font-bold px-8 py-4 border-4 border-gray-900 dark:border-gray-100">Checkout</button>
  </div>
</div>
              

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
  <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-6">Reset Password</h2>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600 dark:focus:ring-opacity-50 shadow-neumorphic-button dark:shadow-neumorphic-button-dark">
        Reset Password
      </button>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #999999;
  }
  .shadow-neumorphic-input {
    box-shadow: inset 3px 3px 5px #bebebe, inset -3px -3px 5px #ffffff;
  }
  .dark .shadow-neumorphic-input-dark {
    box-shadow: inset 3px 3px 5px #717171, inset -3px -3px 5px #999999;
  }
  .shadow-neumorphic-button {
    box-shadow: 3px 3px 7px #bebebe, -3px -3px 7px #ffffff;
  }
    .dark .shadow-neumorphic-button-dark {
    box-shadow: 3px 3px 7px #717171, -3px -3px 7px #999999;
  }
</style>