搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

User Mentions 组件

响应式 User Mentions 组件，采用 Retro/Vintage 风格和类似的配色方案设计，支持深色模式。它具有适用于社交媒体界面的用户头像、名称和消息文本。

                <div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">John Doe</span>
            <p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Jane Smith</span>
            <p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Michael Brown</span>
            <p class="text-gray-700 dark:text-gray-400">Started following you</p>
        </div>
    </div>
</div>

Glassmorphism 搜索框组件

具有使用柔和色彩的磨砂玻璃效果（glassmorphism）的现代搜索框组件。该组件简单而优雅，专为专业商业网站设计。它具有具有微妙模糊效果的半透明背景、响应式设计和暗模式支持。搜索框包括一个搜索图标和一个非常适合企业环境的干净输入字段。

打开预览

                <!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
  <!-- Search Container with Glassmorphism Effect -->
  <div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
    <!-- Search Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
    
    <!-- Search Input -->
    <input 
      type="text" 
      placeholder="Search..." 
      class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
    >
    
    <!-- Optional Clear Button -->
    <button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
  
  <!-- Optional Hint Text -->
  <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
    Search for products, services, or information
  </div>
</div>

复古社交媒体明信片

具有 80 年代/90 年代复古美学的响应式社交媒体明信片组件，使用带有紫红色口音的类似配色方案（天空、蓝绿色、紫色）。具有深色模式支持和交互式悬停效果。内容包括用户头像、用户名、时间戳、文本帖子、图像和作按钮（点赞、评论、分享）。使用 Tailwind CSS 构建。

打开预览

                <div class="min-h-screen bg-stone-200 dark:bg-slate-900 py-8 flex items-center justify-center">
  <div class="max-w-xl w-full mx-auto p-1 bg-gradient-to-br from-fuchsia-500 via-purple-500 to-cyan-500 rounded-xl shadow-2xl">
    <div class="bg-stone-100 dark:bg-slate-800 rounded-lg p-6">
      <!-- Header -->
      <div class="flex items-center space-x-4 mb-6 pb-4 border-b-2 border-dashed border-sky-300 dark:border-sky-700">
        <img class="w-16 h-16 rounded-full border-4 border-fuchsia-500 dark:border-fuchsia-400 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-xl font-bold text-purple-600 dark:text-purple-400 hover:underline cursor-pointer">RetroGal92</p>
          <p class="text-sm text-slate-500 dark:text-slate-400">Posted 2 hours ago</p>
        </div>
        <div class="ml-auto">
           <svg class="w-6 h-6 text-slate-500 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-300 cursor-pointer transition-colors duration-150" 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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </div>
      </div>

      <!-- Content -->
      <div class="mb-6">
        <p class="text-slate-700 dark:text-slate-200 text-lg leading-relaxed mb-4">
          Just vibin' with these retro tunes! <span class="text-2xl">🎧</span> Anyone else remember mixtapes and oversized headphones? Good times! <span class="text-yellow-400">✨</span>
          <a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#RetroLife</a>
          <a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#90sKid</a>
        </p>
        <img class="w-full h-auto rounded-lg shadow-lg border-2 border-teal-500 dark:border-teal-400 object-cover" src="https://picsum.photos/seed/retroscene1/600/400" alt="Retro Scene">
      </div>

      <!-- Actions -->
      <div class="flex items-center justify-between text-slate-600 dark:text-slate-300">
        <button class="flex items-center space-x-2 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors duration-200 group">
          <svg class="w-6 h-6 group-hover:fill-current transition-all duration-200" 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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">1.2k Likes</span>
        </button>
        <button class="flex items-center space-x-2 hover:text-sky-600 dark:hover:text-sky-400 transition-colors duration-200 group">
          <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">87 Comments</span>
        </button>
        <button class="flex items-center space-x-2 hover:text-teal-600 dark:hover:text-teal-400 transition-colors duration-200 group">
          <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 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4m0 0l-4 4m4-4v12"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">Share</span>
        </button>
      </div>
    </div>
  </div>
</div>

返回顶部按钮

具有微交互、大地色调配色方案、商业/公司网站简单布局的 Back to Top 按钮组件;使用 Tailwind CSS 支持深色模式的响应式设计

打开预览

                <!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
  <span class="sr-only">Back to Top</span>
  <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
  </svg>
</a>

<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->

Loaders 组件

以粗野主义风格设计的 Loaders 组件，侧重于商业/公司网站的交互性，具有类似的配色方案和响应式设计，并支持深色模式。该设计展示了不同的加载器动画，这些动画捕捉了粗野主义的大胆和原始美学。

打开预览

                <div class="min-h-screen flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-800">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Loaders</h1>
    <div class="flex justify-around w-full max-w-4xl">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-blue-500 dark:bg-blue-700 w-16 h-16 mb-4 rounded-full animate-bounce"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 1</span>
        </div>

        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-green-500 dark:bg-green-700 w-16 h-16 mb-4 rounded-full animate-spin"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 2</span>
        </div>

        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-red-500 dark:bg-red-700 w-16 h-16 mb-4 rounded-full animate-ping"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 3</span>
        </div>
    </div>
</div>

<style>
    .loader::-webkit-animation: loader; /* For Safari */
    .loader-animation {
        animation: loader 1s infinite;
    }

    @keyframes loader {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
</style>

双重身份验证组件

响应式双因素身份验证组件，具有粗野主义设计、三元配色方案和深色主题支持，适用于仪表板目的。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-black">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 p-8 rounded-none shadow-2xl w-full max-w-md">
        <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white uppercase">Two-Factor Authentication</h2>
        <p class="mb-6 text-gray-700 dark:text-gray-300">Please enter the code sent to your device.</p>
        <div class="flex space-x-4 mb-6">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
            <input type="text" class="w-1/6 text-center text-2xl p-4 border-4 border-black dark:border-gray-700 bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white focus:outline-none focus:border-red-500 dark:focus:border-red-400" maxlength="1">
        </div>
        <button class="w-full bg-red-500 dark:bg-red-700 text-white dark:text-black font-bold py-4 px-6 border-4 border-black dark:border-gray-700 rounded-none uppercase text-xl hover:bg-red-700 dark:hover:bg-red-600 transition duration-300">Verify Code</button>
        <p class="mt-6 text-center text-sm text-gray-700 dark:text-gray-300"><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend Code</a> or <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Use another method</a></p>
    </div>
</div>

进度条组件

一个响应式进度条组件，设计有 3D 元素，使用适合电子商务的类似配色方案，支持深色模式

打开预览

                <div class="max-w-md mx-auto p-4">
    <div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
        <div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
        <div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
            70%
        </div>
    </div>
    <div class="mt-4 text-gray-700 dark:text-gray-300">
        <p class="text-sm">Progress towards your shopping goals.</p>
    </div>
</div>

MaterialEarthToneLoginSignupComponent

响应式 Material Design 风格的登录和注册组件，采用大地色调配色方案，复杂程度适中，可在表单之间进行交互式切换，专为支持深色模式的仪表板而设计。

打开预览

                <!DOCTYPE html>
<html lang='en' class='h-full bg-amber-50 dark:bg-gray-900'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Login / Signup Component</title>
    <script src='https://cdn.tailwindcss.com'></script>
  </head>
  <body class='min-h-screen bg-amber-50 dark:bg-gray-900 flex items-center justify-center p-4'>
    <div class='max-w-4xl w-full bg-stone-50 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2'>
      <div class='hidden md:block'>
        <img src='https://picsum.photos/id/1018/800/800' alt='Dashboard Illustration' class='object-cover w-full h-full' />
      </div>
      <div class='p-8'>
        <input id='tabToggle' type='checkbox' class='peer sr-only' />
        <div class='flex justify-center mb-6 space-x-4'>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-amber-700 peer-checked:text-stone-500 transition'>Login</label>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-stone-500 peer-checked:text-amber-700 transition'>Signup</label>
        </div>
        <form class='space-y-4 transition-all duration-300 ease-in peer-checked:hidden'>
          <div>
            <label for='loginEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='loginEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div>
            <label for='loginPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
            <input id='loginPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Login</button>
        </form>
        <form class='space-y-4 transition-all duration-300 ease-in hidden peer-checked:block'>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='firstName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>First Name</label>
              <input id='firstName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='lastName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Last Name</label>
              <input id='lastName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <div>
            <label for='signupEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='signupEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='signupPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
              <input id='signupPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='confirmPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Confirm Password</label>
              <input id='confirmPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Sign Up</button>
        </form>
      </div>
    </div>
  </body>
</html>

注册表单 ecommerce-tailwind

用于电子商务的极简平面设计注册表单组件，使用 Tailwind CSS，支持响应式和深色模式，具有互补的蓝橙色配色方案。

打开预览

                <!-- Registration Form Component -->
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-100 dark:bg-gray-800">
  <div class="w-full max-w-md bg-white dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Create Your Account</h2>
      <form action="#" method="POST" class="space-y-4">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
          <input type="text" id="full-name" name="fullname" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <input type="email" id="email" name="email" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <input type="password" id="password" name="password" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
          <input type="password" id="confirm-password" name="confirmPassword" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <button type="submit" class="w-full py-2 px-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-500">
          Register
        </button>
      </form>
      <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500 font-medium">Log in</a>
      </p>
    </div>
  </div>
</div>

密码重置组件

一个受 Material Design 启发的密码重置组件，适用于使用 Tailwind CSS 构建的社交媒体平台。具有具有高饱和度色彩的鲜艳配色方案、简洁的布局和响应式设计，并支持深色模式。该组件包括电子邮件的输入字段、提交按钮和有用的文本。该设计使用了卡片高度、网格布局和深度效果等 Material Design 原则。

打开预览

                <!-- Password Reset Card Container -->
<div class="max-w-md mx-auto my-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300">
  <!-- Header with Icon -->
  <div class="text-center mb-6">
    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
      </svg>
    </div>
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Reset Password</h1>
    <p class="text-gray-600 dark:text-gray-300 mt-2">Enter your email to receive a password reset link</p>
  </div>
  
  <!-- Form -->
  <form class="space-y-4">
    <!-- Email Input -->
    <div>
      <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
          </svg>
        </div>
        <input id="email" type="email" class="pl-10 w-full py-2 px-4 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:text-white transition-colors duration-200" placeholder="[email protected]" required>
      </div>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white font-medium rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
      Send Reset Link
    </button>
    
    <!-- Additional Info -->
    <div class="text-center mt-4">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        Remember your password? 
        <a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium transition-colors duration-200">
          Sign in
        </a>
      </p>
    </div>
  </form>
  
  <!-- Security Note -->
  <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p>We'll send a secure link valid for 30 minutes</p>
    </div>
  </div>
</div>

1 ... 167 168 169 170 171 ... 335