搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

User Mentions 组件

响应式用户提到了房地产平台的组件，具有水彩/艺术设计风格和海蓝色调。包括交互元素和深色模式支持。

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-slate-800 dark:to-slate-950 min-h-screen font-sans">

  <!-- Component Wrapper with artistic background -->
  <div class="max-w-4xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl relative
              bg-[url('https://www.transparenttextures.com/patterns/water-color.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-wood.png')] bg-cover bg-center
              border border-blue-200 dark:border-slate-700 backdrop-blur-sm">

    <!-- Watercolor Overlay (top) -->
    <div class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-blue-900/10 dark:to-transparent opacity-60 pointer-events-none rounded-t-3xl"></div>

    <!-- Content Area -->
    <div class="relative p-4 sm:p-8 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm rounded-3xl">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-6 text-center tracking-tight leading-tight relative z-10">
        <span class="relative">
          Property Mentions
          <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full"></span>
        </span>
      </h2>

      <!-- Search/Filter Input -->
      <div class="relative mb-8 shadow-md rounded-xl overflow-hidden">
        <input type="text" placeholder="Search mentions or properties..." class="w-full p-4 pl-12 pr-4 text-lg bg-blue-50 dark:bg-slate-800 text-blue-900 dark:text-slate-200 rounded-xl
                      focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700/50 transition-all duration-300
                      placeholder:text-blue-400 dark:placeholder:text-slate-500 border border-blue-200 dark:border-slate-700">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-blue-500 dark:text-slate-400 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Mentions Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Mention Card 1 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Maria S.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 15, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"I just saw the listing for the beachfront villa in Malibu. It's absolutely stunning! Can we schedule a viewing soon? The photos are incredible."</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property1/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Beachfront Villa, Malibu</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$7,500,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 2 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/30.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">David L.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 14, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Regarding the downtown condo in NYC, are there any virtual tour options available? My client is very interested but is out of state for now."</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property2/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Luxury Condo, NYC</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$2,100,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 3 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Sophia K.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 12, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Your recent blog post about investing in rental properties in Florida was incredibly insightful! I'm considering the one near Orlando. Can we connect?"</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property3/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Family Home, Orlando</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$480,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 4 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Michael R.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 10, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Hey, I found a promising commercial space in downtown Seattle through your platform. The details say it's perfect for a startup. Any more insights?"</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property4/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Commercial Loft, Seattle</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$1,200,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

      </div>

      <!-- See All Mentions Button -->
      <div class="mt-10 text-center">
        <button class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white font-semibold rounded-full shadow-lg group
                       hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 transform hover:-translate-y-1">
          <svg class="w-5 h-5 mr-3 -ml-1 transform group-hover:scale-110 transition-transform 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
          See All Mentions
        </button>
      </div>

    </div>

    <!-- Watercolor Overlay (bottom) -->
    <div class="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-transparent dark:to-transparent opacity-60 pointer-events-none rounded-b-3xl"></div>

  </div>
</div>

粘滞导航组件

具有霓虹灯/发光效果的响应式粘性导航栏，适用于教育或学习平台。具有紫色/紫色配色方案、深色模式支持和交互式菜单项。

打开预览

                <header class="sticky top-0 z-50 bg-gradient-to-r from-purple-900 to-indigo-900 shadow-lg dark:bg-gradient-to-r dark:from-gray-900 dark:to-black backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-purple-300 drop-shadow-[0_0_5px_rgba(192,132,252,0.8)] dark:text-purple-500 dark:drop-shadow-[0_0_8px_rgba(168,85,247,0.9)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
      <a href="#" class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-300 drop-shadow-[0_0_8px_rgba(233,213,255,0.7)] dark:from-purple-400 dark:to-white dark:drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]">
        EduGlow
      </a>
    </div>

    <!-- Mobile menu button -->
    <div class="md:hidden">
      <button class="text-purple-300 hover:text-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-2" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>

    <!-- Desktop menu -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Courses
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        About Us
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
    </div>

    <!-- User Actions -->
    <div class="hidden md:flex items-center space-x-4">
      <button class="px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-900 border border-purple-500
      neon-button dark:bg-purple-800 dark:hover:bg-purple-700 dark:border-purple-700 dark:focus:ring-offset-gray-900">
        Sign In
      </button>
      <img class="h-9 w-9 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md transform hover:scale-105 transition duration-300 ease-in-out cursor-pointer drop-shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    </div>
  </nav>

  <!-- Mobile menu dropdown (hidden by default, controlled by JS in a real app) -->
  <div class="md:hidden bg-purple-900 dark:bg-gray-800 py-2 border-t border-purple-800 dark:border-gray-700">
    <div class="flex flex-col space-y-2 px-4">
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Home
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Courses
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        About Us
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Contact
      </a>
      <button class="w-full text-center px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 mt-2 neon-button dark:bg-purple-800 dark:hover:bg-purple-700">
        Sign In
      </button>
      <div class="flex justify-center mt-2">
        <img class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</header>

<style>
  /* Base for glow effects, typically handled by utilities, but for complex neon, custom CSS might be needed */
  .drop-shadow-\[0_0_5px_rgba\(192\,132\,252\,0\.8\)\] {
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.8));
  }

  .dark\:drop-shadow-\[0_0_8px_rgba\(168\,85\,247\,0\.9\)\] {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.9));
  }

  .drop-shadow-\[0_0_8px_rgba\(233\,213\,255\,0\.7\)\] {
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 0.7));
  }

  .dark\:drop-shadow-\[0_0_10px_rgba\(255\,255\,255\,0\.8\)\] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  }

  .glow-effect {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.7), 0 0 12px rgba(192, 132, 252, 0.5);
    transition: all 0.3s ease-out;
    opacity: 0;
  }

  .group:hover .glow-effect {
    opacity: 1;
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.7);
  }

  .neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .neon-button:hover::before {
    left: 100%;
  }

  .neon-button:active {
    transform: translateY(1px);
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.5), inset 0 0 5px rgba(139, 92, 246, 0.3);
  }

  .glow-border {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.8);
  }

  html.dark .glow-border {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.9);
  }
</style>

360_viewer_component

一个简单、极简的 360 度查看器组件，专为教育平台设计，具有明亮的霓虹灯/电色和强烈的排版，具有完全响应能力和深色模式支持。

打开预览

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out border-2 border-transparent dark:border-transparent dark:hover:border-electric-blue-500 relative group">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-electric-blue-500 to-lime-green-500 opacity-20 dark:from-hot-pink-500 dark:to-electric-blue-500 dark:opacity-10 rounded-lg group-hover:opacity-30 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
    <div class="relative p-6 sm:p-8 md:p-10 z-10">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tighter text-center sm:text-left">
        <span class="text-electric-blue-500 dark:text-hot-pink-500">360°</span> <span class="text-lime-green-500 dark:text-electric-blue-500">Explorer</span>
      </h2>

      <div class="relative w-full h-48 sm:h-64 md:h-80 lg:h-96 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden mb-6 sm:mb-8 flex items-center justify-center border-4 border-electric-blue-400 dark:border-hot-pink-400 transform hover:scale-[1.01] transition-transform duration-300">
        <!-- Placeholder for 360 image (could be an actual 360 viewer library in a real app) -->
        <img src="https://picsum.photos/800/600?random=1" alt="360-degree view placeholder" class="w-full h-full object-cover select-none filter group-hover:blur-sm transition-all duration-300">
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60 text-white text-base sm:text-lg font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          Drag to rotate (Simulated)
        </div>
      </div>

      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 sm:mb-8 leading-relaxed">
        Immerse yourself in a comprehensive, interactive 360-degree view of complex structures and environments. Ideal for <span class="font-semibold text-electric-blue-600 dark:text-hot-pink-400">detailed study</span> and <span class="font-semibold text-lime-green-600 dark:text-electric-blue-400">enhanced visualization</span>.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 text-lime-green-500 dark:text-electric-blue-500 flex-shrink-0" 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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9v-c1.333-3.333-2.667-6.667-7-10"></path></svg>
          <span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Interactive Exploration</span>
        </div>
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6 sm:w-7 sm:h-7 text-electric-blue-500 dark:text-hot-pink-500 flex-shrink-0" 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="M9 3v2m6-2v2M9 19v2m6-2v2M5 7h14a2 2 0 012 2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0a2 2 0 012-2h4a2 2 0 012 2m0 0a2 2 0 012 2v4m-4-2a2 2 0 01-2 2h-4a2 2 0  01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2z"></path></svg>
          <span class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200">Enhanced Learning</span>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 text-center">
        <button class="inline-flex items-center justify-center px-8 py-3 rounded-full text-lg sm:text-xl font-bold bg-electric-blue-500 dark:bg-hot-pink-500 text-white shadow-xl hover:shadow-electric-blue-400/50 dark:hover:shadow-hot-pink-400/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-electric-blue-300 dark:focus:ring-hot-pink-300 group relative overflow-hidden">
          <span class="absolute inset-0 bg-gradient-to-r from-lime-green-400 to-electric-blue-600 dark:from-electric-blue-400 dark:to-hot-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse-light"></span>
          <span class="relative z-10">Explore Now</span>
          <svg class="ml-2 w-5 h-5 sm:w-6 sm:h-6 relative z-10" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <style>
    /* Custom colors for neon/electric theme */
    .text-electric-blue-500 {
      color: #00eeff; /* Brighter electric blue */
    }
    .dark .text-electric-blue-500 {
      color: #00eeff;
    }
    .text-hot-pink-500 {
      color: #ff0077; /* Hotter pink */
    }
    .dark .text-hot-pink-500 {
      color: #ff0077;
    }
    .text-lime-green-500 {
      color: #aeff00; /* Vibrant lime green */
    }
    .dark .text-lime-green-500 {
      color: #aeff00;
    }
    .border-electric-blue-400 {
      border-color: #00c0e0;
    }
    .dark .border-hot-pink-400 {
      border-color: #e00060;
    }

    .bg-electric-blue-500 {
      background-color: #00eeff;
    }
    .dark .bg-hot-pink-500 {
      background-color: #ff0077;
    }

    .from-electric-blue-500 {
      --tw-gradient-from: #00eeff var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(0, 238, 255, 0) var(--tw-gradient-to-position);
    }
    .to-lime-green-500 {
      --tw-gradient-to: #aeff00 var(--tw-gradient-to-position);
    }
    .dark .from-hot-pink-500 {
      --tw-gradient-from: #ff0077 var(--tw-gradient-from-position);
      --tw-gradient-to: rgba(255, 0, 119, 0) var(--tw-gradient-to-position);
    }
    .dark .to-electric-blue-500 {
      --tw-gradient-to: #00eeff var(--tw-gradient-to-position);
    }

    .hover\:shadow-electric-blue-400\/50:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 192, 224, 0.5), 0 4px 6px -2px rgba(0, 192, 224, 0.05);
    }
    .dark .hover\:shadow-hot-pink-400\/50:hover {
      box-shadow: 0 10px 15px -3px rgba(224, 0, 96, 0.5), 0 4px 6px -2px rgba(224, 0, 96, 0.05);
    }

    @keyframes pulse-light {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0.8;
      }
      100% {
        opacity: 0;
      }
    }

    .animate-pulse-light {
      animation: pulse-light 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  </style>
</div>

Success Messages 组件

适用于非营利组织/慈善组织的干净、值得信赖的成功消息组件，使用紫色/紫色配色方案。它响应迅速并支持深色模式。

打开预览

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 border-t-4 border-purple-600 dark:border-purple-500">
    <div class="flex items-center justify-center mb-4">
      <svg class="w-16 h-16 text-purple-600 dark:text-purple-500" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <h2 class="mb-3 text-2xl font-bold text-center text-gray-800 dark:text-gray-100">Thank You for Your Support!</h2>
    <p class="mb-6 text-center text-gray-600 dark:text-gray-300">
      Your generous contribution has been successfully processed and will make a significant impact on our mission.
    </p>
    <div class="flex justify-center">
      <a href="#" class="inline-flex items-center px-6 py-3 text-base font-medium text-white bg-purple-600 rounded-md shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-600">
        <svg class="w-5 h-5 mr-2 -ml-1" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v9a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
          </path>
        </svg>
        Back to Homepage
      </a>
    </div>
    <p class="mt-6 text-sm text-center text-gray-500 dark:text-gray-400">
      A confirmation email has been sent to your inbox. Please contact us if you have any questions.
    </p>
  </div>
</div>

Image Lightbox 组件

用于 CRM/业务工具的有趣图像灯箱组件，具有灰度配色方案、圆角元素和用于交互式图像查看的复杂界面。完全响应，支持深色模式。

打开预览

                <div class="relative flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 font-sans overflow-hidden">

  <!-- Sample Grid to show how lightbox might be triggered -->
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-w-7xl mx-auto mb-12 sm:mb-0">
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1025/300/200" alt="Gallery Image 1" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1026/300/200" alt="Gallery Image 2" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1027/300/200" alt="Gallery Image 3" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
    <button class="block w-full h-32 sm:h-48 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700" onclick="document.getElementById('lightbox').classList.remove('hidden')">
      <img src="https://picsum.photos/id/1028/300/200" alt="Gallery Image 4" class="w-full h-full object-cover transition-opacity hover:opacity-80">
    </button>
  </div>

  <!-- Lightbox Overlay -->
  <div id="lightbox" class="fixed inset-0 z-50 hidden bg-black bg-opacity-70 dark:bg-opacity-80 flex items-center justify-center p-4 sm:p-6 lg:p-8 transition-opacity duration-300 ease-in-out opacity-0" 
       style="opacity: 1;" 
       onclick="event.target === this && document.getElementById('lightbox').classList.add('hidden')">

    <!-- Lightbox Content Container -->
    <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-4 sm:p-6 w-full max-w-4xl max-h-[90vh] flex flex-col gap-4 transform scale-95 opacity-0 transition-all duration-300 ease-in-out" 
         style="opacity: 1; transform: scale(1);"
         role="dialog" aria-modal="true" aria-labelledby="lightbox-title">

      <!-- Close Button -->
      <button class="absolute -top-3 -right-3 sm:-top-4 sm:-right-4 p-3 bg-gray-900 border-4 border-white dark:border-gray-800 text-white rounded-full shadow-lg group focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 z-10" 
              aria-label="Close Lightbox" 
              onclick="document.getElementById('lightbox').classList.add('hidden')">
        <svg class="w-6 h-6 transform transition-transform group-hover:rotate-90 group-focus:rotate-90" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>

      <!-- Image Section -->
      <div class="flex-none w-full h-96 sm:h-[400px] lg:h-[500px] bg-gray-200 dark:bg-gray-700 rounded-xl overflow-hidden relative group">
        <img src="https://picsum.photos/id/1025/800/600" alt="Current Image" class="w-full h-full object-contain object-centers select-none" id="lightbox-img">
        
        <!-- Navigation Buttons (Overlay on image) -->
        <div class="absolute inset-0 flex items-center justify-between p-2 sm:p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          <button class="p-3 bg-black bg-opacity-40 text-white rounded-full hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-70" aria-label="Previous Image">
            <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="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="p-3 bg-black bg-opacity-40 text-white rounded-full hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-70" aria-label="Next Image">
            <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="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>

      </div>

      <!-- Details Section -->
      <div class="flex-1 flex flex-col sm:flex-row gap-4 overflow-auto">
        <div class="flex-1">
          <h2 id="lightbox-title" class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3 leading-tight">Playful Corporate HQ</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed">
            A vibrant and welcoming image captured during an open house event, showcasing the modern architecture and collaborative spaces within our new office building.
          </p>

          <div class="flex flex-wrap items-center gap-x-6 gap-y-3 mb-4 sm:mb-6">
            <div class="flex items-center text-gray-700 dark:text-gray-300">
              <svg class="w-5 h-5 mr-1.5 opacity-80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm font-medium">Uploaded: May 15, 2024</span>
            </div>
            <div class="flex items-center text-gray-700 dark:text-gray-300">
              <svg class="w-5 h-5 mr-1.5 opacity-80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.816 2 12 2c5.18 0 10.265 3.552 11.54 8-.22.616-.48 1.21-.77 1.78l-1.32-1.32a.75.75 0 00-1.06 1.06l1.78 1.78a8 8 0 01-1.07 1C19.263 17.552 14.178 21 9 21c-5.18 0-10.265-3.552-11.54-8-.22-.616-.48-1.21-.77-1.78l-1.32-1.32a.75.75 0 00-1.06 1.06l1.78 1.78a8 8 0 01-1.07 1zM12 17a5 5 0 100-10 5 5 0 000 10z" clip-rule="evenodd"></path></svg>
              <span class="text-sm font-medium">Views: 1,200</span>
            </div>
          </div>

          <div class="flex items-center gap-3">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Uploader Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-md">
            <div>
              <strong class="block text-gray-800 dark:text-gray-200 text-sm">Uploaded by: John Doe</strong>
              <span class="text-gray-500 dark:text-gray-400 text-xs">Marketing Team</span>
            </div>
          </div>
        </div>

        <!-- Action Buttons / Tags -->
        <div class="flex-none sm:w-48 flex flex-col gap-3">
          <button class="w-full bg-gray-900 text-white py-2.5 px-4 rounded-xl shadow-md transform transition-transform hover:scale-105 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Download Image
          </button>
          <button class="w-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2.5 px-4 rounded-xl shadow-md transform transition-transform hover:scale-105 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" 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>
            Leave Comment
          </button>
          
          <div class="mt-auto flex flex-wrap gap-2 justify-center sm:justify-start">
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Office</span>
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Architecture</span>
            <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold rounded-full">#Team</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Just a little script for the lightbox animation - not part of the component itself -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const lightbox = document.getElementById('lightbox');
  if (lightbox) {
    lightbox.addEventListener('click', (event) => {
      if (event.target === lightbox) {
        lightbox.classList.add('hidden');
      }
    });
    
    // Observe for 'hidden' class changes to animate in/out
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'class') {
                const isHidden = lightbox.classList.contains('hidden');
                const content = lightbox.querySelector('div:first-of-type'); // The actual dialog content

                if (!isHidden) {
                    // Show lightbox, then apply animation classes
                    setTimeout(() => {
                        lightbox.style.opacity = '1';
                        if (content) {
                          content.style.transform = 'scale(1)';
                          content.style.opacity = '1';
                        }
                    }, 10);
                } else {
                    // Hide lightbox, apply reverse animation classes, then add 'hidden'
                    lightbox.style.opacity = '0';
                    if (content) {
                      content.style.transform = 'scale(0.95)';
                      content.style.opacity = '0';
                    }
                    setTimeout(() => {
                        // Ensure hidden is only added after transition for a smoother close
                        if (lightbox.classList.contains('hidden')) return;
                        lightbox.classList.add('hidden');
                    }, 300); // Match this with your Tailwind transition duration
                }
            }
        });
    });

    observer.observe(lightbox, { attributes: true });
  }
});
</script>

Cyberpunk 标头组件

用于文档或 Wiki 站点的未来主义赛博朋克主题标头组件。具有深色背景和充满活力的霓虹灯装饰（电蓝色、亮粉色、柠檬绿）、响应式导航和深色模式支持。

打开预览

                <header class="bg-zinc-950 text-lime-400 border-b border-lime-600/30 shadow-lg shadow-lime-600/10 dark:bg-black dark:text-fuchsia-400 dark:border-fuchsia-600/30 dark:shadow-fuchsia-600/10">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Site Title -->
    <a href="#" class="flex items-center space-x-2 relative group">
      <svg class="w-8 h-8 text-electric-blue-400 group-hover:text-electric-blue-300 transition-colors duration-300 dark:text-hot-pink-400 dark:group-hover:text-hot-pink-300" 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="M9.75 17L9.75 17.01M12.000000000000002 21L12 21.01M14.25 17L14.25 17.01M12 3C10.73 3 7 4.12 7 9C7 11.83 8.36 13.92 9.77 15.14C11.18 16.35 12 17.67 12 19L12 21M9 6L15 6M10 9L14 9M11 12L13 12"></path>
      </svg>
      <span class="font-extrabold text-2xl tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-electric-blue-500 group-hover:from-lime-300 group-hover:to-electric-blue-400 transition-all duration-300 dark:from-fuchsia-400 dark:to-hot-pink-500 dark:group-hover:from-fuchsia-300 dark:group-hover:to-hot-pink-400">
        NEO-DOCS
      </span>
      <span class="absolute inset-0 bg-lime-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-lg blur-sm pointer-events-none dark:bg-fuchsia-400"></span>
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8">
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Guides</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">API Ref</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Tutorials</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
      <a href="#" class="text-lime-300 hover:text-lime-200 relative group transition-colors duration-300 dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
        <span class="relative z-10">Community</span>
        <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
      </a>
    </nav>

    <!-- Search Bar (Desktop) -->
    <div class="hidden md:block relative">
      <input type="text" placeholder="Search the dataverse..." class="w-56 px-4 py-2 bg-zinc-800 text-lime-300 placeholder-lime-500 rounded-full border border-lime-600 focus:outline-none focus:ring-2 focus:ring-electric-blue-500 focus:border-transparent transition-all duration-300 dark:bg-zinc-900 dark:text-fuchsia-300 dark:placeholder-fuchsia-500 dark:border-fuchsia-600 dark:focus:ring-hot-pink-500">
      <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-lime-400 dark:text-fuchsia-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <label for="menu-toggle" class="cursor-pointer">
        <input type="checkbox" id="menu-toggle" class="hidden peer">
        <div class="space-y-2 group peer-checked:space-y-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 peer-checked:before:translate-y-2 peer-checked:after:-translate-y-2 transition-all duration-300">
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
          <span class="block w-8 h-0.5 bg-lime-400 transition-all duration-300 dark:bg-fuchsia-400"></span>
        </div>
      </label>
      
      <!-- Mobile Menu Overlay -->
      <div class="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm z-40 hidden peer-checked:block animate-fade-in-down">
        <!-- Mobile Navigation -->
        <nav class="absolute top-0 right-0 w-64 h-full bg-zinc-900 border-l border-lime-600/50 p-6 shadow-xl shadow-lime-600/30 overflow-y-auto transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-out dark:bg-black dark:border-fuchsia-600/50 dark:shadow-fuchsia-600/30">
          <div class="flex justify-end mb-8">
            <label for="menu-toggle" class="cursor-pointer text-lime-400 hover:text-lime-300 dark:text-fuchsia-400 dark:hover:text-fuchsia-300">
              <svg class="w-8 h-8" 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="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </label>
          </div>
          <ul class="space-y-6">
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Guides</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>API Ref</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Tutorials</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="block text-2xl font-bold text-lime-300 hover:text-lime-200 transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-fuchsia-200">
                <span>Community</span>
                <span class="absolute h-0.5 w-0 bg-electric-blue-500 left-0 bottom-0.5 transition-all duration-300 group-hover:w-full group-hover:shadow-electric-blue-500/50 dark:bg-hot-pink-500 dark:group-hover:shadow-hot-pink-500/50"></span>
              </a>
            </li>
            <li>
              <!-- Search Bar (Mobile) -->
              <div class="relative mt-8">
                <input type="text" placeholder="Search..." class="w-full px-4 py-3 bg-zinc-800 text-lime-300 placeholder-lime-500 rounded-lg border border-lime-600 focus:outline-none focus:ring-2 focus:ring-electric-blue-500 focus:border-transparent transition-all duration-300 dark:bg-zinc-900 dark:text-fuchsia-300 dark:placeholder-fuchsia-500 dark:border-fuchsia-600 dark:focus:ring-hot-pink-500">
                <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 text-lime-400 dark:text-fuchsia-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

<style>
  /* Custom colors for better cyberpunk feel */
  .text-electric-blue-400 { color: #00e5ff; }
  .text-electric-blue-300 { color: #66efff; }
  .bg-electric-blue-500 { background-color: #00b8d4; }
  .text-hot-pink-400 { color: #ff007f; }
  .text-hot-pink-300 { color: #ff66b2; }
  .bg-hot-pink-500 { background-color: #e60073; }
  .text-lime-400 { color: #aeff00; }
  .text-lime-300 { color: #d0ff66; }
  .bg-lime-400 { background-color: #aeff00; }

  /* Keyframes for mobile menu animation */
  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

粗野主义产品比较组件

专为预订/预订系统设计的野兽派风格的产品比较组件，具有森林/绿色调色板、高对比度和不寻常的布局。它是完全响应的，并支持深色模式。

打开预览

                <div class="font-mono min-h-screen bg-lime-100 text-lime-950 p-4 dark:bg-lime-950 dark:text-lime-50 font-bold">
  <div class="container mx-auto max-w-7xl border-2 border-lime-950 dark:border-lime-50 p-6 shadow-[8px_8px_0_0_rgba(27,33,16,1)] dark:shadow-[8px_8px_0_0_rgba(236,252,203,1)]">
    <h1 class="text-4xl md:text-5xl lg:text-6xl text-center mb-10 uppercase leading-none border-b-4 border-lime-950 pb-4 dark:border-lime-50">
      APPOINTMENT SELECTION MATRIX
    </h1>

    <!-- Comparison Table Header -->
    <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 mb-4 text-center border-b-2 border-lime-950 pb-2 dark:border-lime-50">
      <div class="hidden md:block text-left text-xl lg:text-2xl pt-2">FEATURE<span class="md:hidden lg:inline">S</span></div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-300 dark:bg-lime-700 uppercase transform -rotate-1 skew-x-3 shadow-md border-b-8 border-r-8 dark:border-lime-50">BASIC</div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-emerald-500 text-lime-50 transform rotate-1 -skew-x-3 shadow-lg dark:bg-emerald-800 dark:text-lime-50 border-b-8 border-r-8 dark:border-lime-50">PREMIUM</div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-800 text-lime-50 transform -rotate-2 skew-x-5 shadow-2xl dark:bg-lime-900 border-b-8 border-r-8 dark:border-lime-50">ELITE</div>
    </div>

    <!-- Comparison Rows -->
    <div class="space-y-4">

      <!-- Feature Row 1 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Duration</div>
        <div class="text-lg p-2 text-center">30 min</div>
        <div class="text-lg p-2 text-center">60 min</div>
        <div class="text-lg p-2 text-center">90 min</div>
      </div>

      <!-- Feature Row 2 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Consultation</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 3 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Priority Support</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 4 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Follow-up</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 5 (Image Example) -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Resource Access</div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=1" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-3">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=2" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform -rotate-3">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=3" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-5">
        </div>
      </div>

      <!-- Feature Row 6 (Avatar Example) -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Dedicated Agent</div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
      </div>

    </div>

    <!-- Action Buttons / Prices -->
    <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center mt-8 border-t-2 border-lime-950 pt-4 dark:border-lime-50">
      <div class="hidden md:block text-left text-xl lg:text-2xl pt-2">PRICE</div>
      <div class="text-center flex flex-col items-center bg-lime-300 dark:bg-lime-700 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-md transform skew-y-1">
        <span class="text-3xl lg:text-4xl">$49</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
      <div class="text-center flex flex-col items-center bg-emerald-500 text-lime-50 dark:bg-emerald-800 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-lg transform -skew-y-1">
        <span class="text-3xl lg:text-4xl">$99</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
      <div class="text-center flex flex-col items-center bg-lime-800 text-lime-50 dark:bg-lime-900 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-2xl transform skew-y-2">
        <span class="text-3xl lg:text-4xl">$149</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
    </div>

    <div class="mt-10 text-sm text-center border-t-2 border-lime-950 pt-4 dark:border-lime-50">
      <p class="mb-2">*All prices are subject to change without notice.</p>
      <p>Booking slots are limited. Secure your appointment now.</p>
    </div>

  </div>
</div>

会话超时警报组件

一个复杂的响应式会话超时警报组件，采用最小的瑞士/国际排版风格和明亮的 Candy/Sweet 配色方案设计，适用于工作和职业平台。包括深色模式支持和交互元素。

打开预览

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 font-sans">
  <div class="w-full max-w-md mx-auto rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out bg-white dark:bg-gray-800 border-4 border-pink-500 dark:border-pink-600">
    <div class="p-6 space-y-6 md:p-8 dark:bg-gray-800">
      <div class="flex items-center justify-between">
        <h3 class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight tracking-wider uppercase">
          Session Alert
        </h3>
        <svg class="h-9 w-9 text-pink-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>

      <div class="space-y-4">
        <p class="text-lg text-gray-800 dark:text-gray-200 leading-relaxed">
          Your session is about to expire. Would you like to extend it and continue browsing exciting job opportunities?
        </p>
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Remaining time: <span class="font-bold text-mint-green-600 dark:text-mint-green-400" id="countdown">01:59</span>
        </p>
      </div>

      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-2">
        <button class="flex items-center justify-center px-6 py-3 border-2 border-pink-500 bg-pink-500 hover:bg-pink-600 active:bg-pink-700 text-white dark:text-white rounded-md text-base font-semibold shadow-md transition-all duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Extend Session
        </button>
        <button class="flex items-center justify-center px-6 py-3 border-2 border-mint-green-500 text-mint-green-600 bg-transparent hover:bg-mint-green-50 active:bg-mint-green-100 dark:text-mint-green-400 dark:hover:bg-mint-green-900 dark:active:bg-mint-green-800 rounded-md text-base font-semibold shadow-md transition-all duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-mint-green-500 focus:ring-opacity-75">
          <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H5a3 3 0 01-3-3v-1m18-8V9a3 3 0 00-3-3h-2.586a1 1 0 01-.707-.293l-1.414-1.414A1 1 0 009.586 2H7a3 3 0 00-3 3v1M6 10H4a2 2 0 00-2 2v5a2 2 0 002 2h2v-7zm-2 0h2v7" />
          </svg>
          Logout
        </button>
      </div>
    </div>

    <div class="flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-100 dark:border-gray-700 md:p-6">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-pink-400 dark:border-pink-500 object-cover" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">Job Seeker since 2023</p>
        </div>
      </div>
      <a href="#" class="text-sm font-medium text-mint-green-600 hover:text-mint-green-700 dark:text-mint-green-400 dark:hover:text-mint-green-300 transition duration-200 ease-in-out">
        My Profile &rarr;
      </a>
    </div>
  </div>
</div>

Industrial_Travel_Progress_Bar

适用于旅行/旅游网站的简单工业风格进度条组件，具有紫色/紫色配色方案和完全响应能力，支持深色模式。

打开预览

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-xl bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-300 dark:border-gray-700">
    <div class="p-4 sm:p-5 md:p-6 bg-gray-300 dark:bg-gray-700 border-b border-gray-400 dark:border-gray-600">
      <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">Your Travel Progress</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booking steps completed</p>
    </div>

    <div class="p-4 sm:p-5 md:p-6">

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Booking Confirmation (75%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Flight Selection (Complete)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
          <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-3 w-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="mb-4 last:mb-0">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Accommodation (50%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 50%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

    </div>
  </div>

</div>

社交登录组件

一个简单、干净且响应迅速的社交登录组件，带有森林绿色调色板，专为新闻/新闻网站设计，强调排版和网格系统。包括深色模式支持。

打开预览

                <div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm p-6 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-colors duration-300">
    <div class="text-center">
      <h2 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-2 transition-colors duration-300">Sign In/Up</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm transition-colors duration-300">Access exclusive content and personalized news.</p>
    </div>

    <div class="space-y-3">
      <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.0003 12.723c3.309-1.01 5.922-4.103 5.922-7.857C17.9223 2.146 15.7063 0 12.9633 0c-3.15 0-5.877 2.155-5.877 4.887c0 3.754 2.613 6.847 5.922 7.857zM12.0003 18.003c-5.521 0-10.002-4.482-10.002-10.002S6.4793 0 12.0003 0s10.002 4.482 10.002 10.002-4.481 10.002-10.002 10.002zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z"/>
          <path d="M12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="M12.0003 15.002c-2.761 0-5.001-2.24-5.001-5.001s2.24-5.001 5.001-5.001 5.001 2.24 5.001 5.001-2.24 5.001-5.001 5.001zM12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="M12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
          <path d="m20.916 11.23a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-15.066 0c.49.977 1.113 1.806 1.89 2.541.606-.296 1.23-.549 1.864-.757-.512-.975-1.003-2.023-1.472-3.123-.762-.02-1.525-.02-2.285 0-.249.686-.412 1.388-.512 2.09-.02.083-.027.166-.022.249zm1.312-3.136c.036-.076.07-.152.106-.226l-1.04-.602 1.455-.788c.37.52.813 1.002 1.326 1.44zm11.137-1.44l1.455.788-1.04.602c.036.074.07.15.106.226-.513-.438-.956-.92-1.326-1.44zm-7.382-2.012c.706 0 1.413 0 2.119 0-.027.702-.132 1.404-.326 2.09-.646.07-1.294.07-1.942 0-.194-.686-.299-1.388-.326-2.09zm.006 13.916c-.026-.686-.13-1.382-.322-2.07-.643-.07-1.284-.07-1.927 0-.192.688-.296 1.384-.322 2.07.703 0 1.407 0 2.571 0zm.014-4.218c-.512-.975-1.003-2.023-1.472-3.123-.633-.208-1.258-.461-1.864-.757.777.735 1.4 1.564 1.89 2.541.606.296 1.23.549 1.864.757zm4.304-.757a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-10.748-1.127c-.49-.977-1.113-1.806-1.89-2.541-.606.296-1.23.549-1.864.757.512.975 1.003 2.023 1.472 3.123.762-.02 1.525-.02 2.285 0 .249-.686.412-1.388.512-2.09.02-.083.027-.166.022-.249zm-1.312 3.136c-.036.076-.07.152-.106.226l1.04.602-1.455.788c-.37-.52-.813-1.002-1.326-1.44zm-1.096-7.348c.026.686.13 1.382.322 2.07.643.07 1.284.07 1.927 0 .192-.688.296-1.384.322-2.07-.703 0-1.407 0-2.571 0z"/>
          <circle cx="12.0003" cy="4.9997" r="2.0001"/>
           <path d="m12.0003 12.0003c-2.209 0-4.0002-1.791-4.0002-4.0002s1.791-4.0002 4.0002-4.0002 4.0002 1.791 4.0002 4.0002-1.791 4.0002-4.0002 4.0002zm0 1.9999c-.735 0-1.41-.227-1.966-.607-.556-.38-.97-.905-1.233-1.503-.984-2.247-3.926-7.65-4.524-8.818-.28-.541-.448-1.272-.448-2.027 0-2.545 1.579-4.708 3.75-5.592.518-.21.997-.331 1.478-.331h.001c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02-.823-1.077-1.488-2.264-1.996-3.528-1.036-.337-2.12-.524-3.238-.524h-.001c-3.111 0-5.836 1.776-7.202 4.364-.475.86-.777 1.83-.895 2.845-.065.556 4.398 7.57 4.962 8.528.268.455.617.848 1.024 1.178.407.33.864.582 1.354.74h-.001c.001 0 .001.001.002.001.001 0 .001.001.002.001h.001c.001 0 .001.001.002.001.001 0 .001.001.002.001l.001.001c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c-.001 0-.001-.001-.002-.001l-.001 0c-.001 0-.001 0-.002 0h-.001z" fill="currentColor"/>
           <path d="m12 0c-3.15 0-5.877 2.155-5.877 4.887 0 3.754 2.613 6.847 5.922 7.857a6.0007 6.0007 0 0 1-.045.006c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001v-.001c0-3.754-2.613-6.847-5.922-7.857zm.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z" fill="currentColor"/>
        </svg>
        Continue with Google
      </button>
      <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.78 9.388 8.718 10.375V14.06H5.443V12h3.275V9.387c0-3.23 1.957-5.021 4.877-5.021 1.397 0 2.457.25 2.79.362v2.666h-1.68C13.213 7.85 1.17 9.336 12.002 9.336l.002-.002V22.375C20.22 21.01 24 16.716 24 12c0-6.627-5.373-12-12-12z"/>
        </svg>
        Continue with Facebook
      </button>
      <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
        <svg class="w-4 h-4 mr-2 text-black dark:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.002 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.717 17.098c-.295.772-.888 1.493-1.636 2.115-.747.622-1.571 1.055-2.457 1.258-2.128.48-4.29.48-6.418 0-.886-.203-1.71-.636-2.457-1.258-.748-.622-1.341-1.343-1.636-2.115-.48-1.29-.48-2.58 0-3.87.295-.772.888-1.493 1.636-2.115.747-.622 1.571-1.055 2.457-1.258 2.128-.48 4.29-.48 6.418 0 .886.203 1.71.636 2.457 1.258.748.622 1.341 1.343 1.636 2.115.48 1.29.48 2.58 0 3.87zM12.002 5.567c-1.42 0-2.825.267-4.148.802-.674.265-1.254.598-1.76.996C5.586 7.73 5.17 8.16 4.887 8.653c-.31.54-.486 1.13-.526 1.748-.04.617-.008 1.25.093 1.884-.253-.162-.485-.348-.696-.554-.21-.205-.386-.43-.532-.676-.146-.245-.25-.503-.314-.766-.064-.263-.08-1.006-.08-1.006h-.002c-1.554-1.353-2.094-1.92-2.094-1.92-.127-.13-.263-.263-.408-.398-.242-.22-.497-.432-.767-.636-.27-.204-.543-.39-.817-.558-.274-.168-.54-.316-.798-.445-.257-.13-.509-.234-.755-.314-.247-.078-.487-.135-.72-.167l-.02-.005a3.064 3.064 0 0 0-1.03-.004c-.394.02-.78.077-1.157.172-.377.094-.74.22-.984.34-.243.12-.464.26-.66.417-.197.157-.367.327-.514.498-.146.171-.266.347-.36.526-.094.18-.16-.36-.16-.36l-.001-.001c-.13-.266-.28-.52-.45-.76-.17-.24-.356-.47-.558-.69-.2-.22-.41-.428-.627-.62-.218-.19-.434-.367-.648-.53-.213-.163-.42-.31-.62-.437-.2-.127-.39-.234-.567-.32-.178-.087-.34-.15-.49-.19l-.02-.007c-.4-.05-.79-.06-1.18-.03-.39.03-.77.108-1.13.238-.36.13-.69.293-.98.487-.29.194-.546.417-.768.667-.22.25-.402.52-.54.802-.138.283-.23.578-.277.88-.046.302-.04.606.012.906.053.3.14.6.26.885.12.285.27.56.45.816.18.256.39.49.63.702.235.212.493.398.767.558.274.159.56.288.857.387.297.098.604.168.913.208.31.04.614.04.912 0 .3-.04.59-.115.86-.226.27-.11.52-.25.75-.41.23-.16.43-.34.6-.53.17-.19.31-.4.42-.61s.19-.43.23-.65l.006-.03c.09-1.282.046-2.316-.134-3.076-.138-.588-.344-1.11-.618-1.564-.275-.453-.61-.83-.988-1.127-.38-.297-.8-.51-1.25-.638-1.4-.385-2.88-.34-4.275.12-.59.19-1.18.45-1.76.75-.58.3-.98.66-1.19.99-.21.33-.28.59-.21.78.07.19.26.28.56.28.3 0 .6-.07.9-.21.3-.14.58-.33.84-.57.26-.24.52-.49.77-.75.25-.26.49-.52.7-.77.21-.25.4-.49.57-.73.18-.24.32-.47.43-.68.11-.21.18-.4.2-.56.02-.16-.01-.3-.08-.43-.07-.13-.19-.22-.36-.28-.17-.06-.39-.08-.66-.08-1.11 0-2.28.27-3.41.81-.67.32-1.3.7-1.89 1.13-.58.43-1.13.9-1.63 1.4-1.5.75-2.9 1.63-4.22 2.65-.66.5-.94.75-.84.75h-.001c.01 0 .02-.002.03-.005.04-.01.07-.02.1-.03.04-.01.07-.02.1-.03.03-.01.06-.02.09-.02.03-.01.06-.01.09-.02.03-.01.06-.01.09-.01.02 0 .04-.002.06-.002.02 0 .04-.002.06-.002.007 0 .013-.001.02-.001.002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001-.082.016-.395.045-.596.088-.857.147-1.002.327-.145.18-.08.3-.06.36.02.06.07.1.15.11.08.01.21-.01.38-.05.17-.04.37-.1.59-.19.22-.09.46-.2.72-.32.26-.12.55-.26.86-.4.31-.14.65-.29 1.02-.45 1.48-.65 3.06-1.12 4.71-1.34 2.22-.3 4.49-.03 6.64.8.44.16.86.35 1.25.59.39.23.76.51 1.1.84.34.33.64.67.9.99h.002c.08-.02.16-.04.24-.06.08-.02.16-.04.24-.05.08-.01.16-.02.24-.02.08 0 .16-.01.24-.01.08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002-.12-.01-.24-.01-.36-.01-.12 0-.24 0-.36 0-.12 0-.24-.001-.36-.001-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002c-1.144-.065-2.29-.005-3.414.185-.72.12-.22-.1-.22-.1z"/>
           <path d="M12.002 12s-1.898 3.53-2.617 4.908c-.71-1.378-2.617-4.908-2.617-4.908-.344-.658-.3-1.63.12-2.3.42-.67 1.15-1.07 1.95-1.12.8 0 1.54.45 1.95 1.12.42.67.46 1.64.12 2.3z"/>
           <ellipse cx="12.002" cy="7.417" rx="1.5" ry="1.5"/>
        </svg>
        Continue with Apple
      </button>
    </div>

    <div class="relative flex py-2 items-center">
      <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
      <span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm">Or continue with email</span>
      <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
    </div>

    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <div class="mt-1">
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700 dark:checked:bg-emerald-600 transition-colors duration-300">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-300">Forgot your password?</a>
        </div>
      </div>

      <div>
        <button 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-emerald-700 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">
          Sign In
        </button>
      </div>
    </form>

    <div class="text-center text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
      Not a member? <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-300">Sign up now</a>
    </div>
  </div>
</div>

1 ... 17 18 19 20 21 ... 335