搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

Social Share Buttons 组件

一个优雅、响应式的社交分享按钮组件，专为新闻和新闻网站设计，具有豪华的森林/绿色调色板和深色模式支持。它包括用于在各种平台上共享文章的多个交互式元素。

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-900 dark:to-gray-950 font-sans antialiased text-gray-800 dark:text-gray-100 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-green-200 dark:border-green-800">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-green-100 dark:border-green-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-green-800 dark:text-green-200 mb-2 leading-tight tracking-tight">
        Like What You Read?
      </h2>
      <p class="text-md sm:text-lg text-green-700 dark:text-green-300 font-medium">
        Share this insightful article with your network!
      </p>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 grid grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
      <!-- Share Button: Facebook -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.886 8.438-9.879Z" clip-rule="evenodd" />
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Facebook</span>
      </button>

      <!-- Share Button: Twitter/X -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-gray-900 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-100 dark:hover:bg-gray-200 dark:focus:ring-gray-600 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white dark:text-gray-900 mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.901 1.153 13.916 8.92c-.171.267-.442.428-.737.478L4.697 10.63H4.69c-.495.006-.991-.046-1.479-.153.208-.01.416.035.617.13 1.144.49 1.947 1.636 1.947 2.923v.15c0 .354-.084.706-.245 1.026-.067.135-.118.257-.156.368.175.056.35.09.525.093 1.06 0 1.916-.856 1.916-1.917 0-.306-.073-.604-.213-.865L12 10.457l3.651 4.545a1.914 1.914 0 0 1-.225 3.013c.277.262.614.475.975.642 1.341.61 2.996.903 4.673.811.107.822.429 1.57.854 2.235.438.694.945 1.31 1.503 1.849 0 0 .001.001.002.001L22 22 2 2v20c0 0 20-20 20-20z" fill-rule="evenodd" clip-rule="evenodd"/>
        </svg>
        <span class="text-white dark:text-gray-900 font-semibold text-sm sm:text-base">Twitter</span>
      </button>

      <!-- Share Button: LinkedIn -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-400 dark:bg-blue-800 dark:hover:bg-blue-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 1 1 8.25 6.5 1.75 1.75 0 0 1 6.5 8.25zM19 19h-3v-4.74c0-1.78-1.52-2.46-2.58-1.42s-1.42 1.38-1.42 1.38V19h-3v-9h3v1.76c.45-.63 1.15-1.12 2.39-1.12 2.65 0 4.11 1.76 4.11 4.74V19z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">LinkedIn</span>
      </button>

      <!-- Share Button: Email -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-300 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M2.25 6.75A2.25 2.25 0 0 1 4.5 4.5h15C20.74 4.5 22 5.76 22 7.25v9.5c0 1.49-1.26 2.75-2.5 2.75H4.5A2.25 2.25 0 0 1 2.25 17.5v-9.5zm2.25 0V7a.75.75 0 0 0-.75-.75H4.5v0zm2.25 0l4.75 3.57a1.5 1.5 0 0 0 1.76 0L17.25 6.75h-10.5zM2.25 8.75v8.75A1.25 1.25 0 0 0 3.5 18.75h17A1.25 1.25 0 0 0 21.25 17.5v-8.75L12 15z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Email</span>
      </button>

      <!-- Share Button: WhatsApp -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-green-500 hover:bg-green-600 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 2C7.38 2 3.61 5.77 3.61 10.43c0 1.55.4 3.06 1.16 4.4l-1.2 4.35 4.49-1.18c1.3.71 2.76 1.09 4.28 1.09C16.7 20.44 20.47 16.67 20.47 12.01S16.7 3.62 12.04 3.62zM17 14.8c-.14.24-.2.27-.47.37-.29.11-.67.16-1.07.16-.48 0-.91-.12-1.37-.29-.39-.15-1.17-.37-2.03-.76-.87-.39-1.74-.95-2.48-1.58-.77-.66-1.42-1.44-1.92-2.31-.5-.87-.78-1.72-.78-2.52 0-.9.27-1.45.39-1.66.12-.2.27-.27.42-.31.15-.04.38-.04.56-.02.18 0 .38.01.55.04.17.03.3-.06.45.3.15.35.53 1.28.53 1.28.02.04.03.07.03.11-.02.1-.06.2-.12.3-.39.46-.77.92-1.11 1.34-.36.43-.58.62-.64.69-.06.07-.13.14-.07.24.06.12.2.29.35.43.16.15.3.26.44.39.81.71 1.48 1.28 2.05 1.63.57.36 1.05.57 1.55.77 0 .01.01.01.01.01.04.02.07.03.11.05.12.03.22.05.33.05.07 0 .15-.01.2-.02.43-.17 1.27-.48 1.5-.66v-.01c.23-.19.33-.29.47-.36.14-.07.26-.06.39-.03.1.02.25.09.43.26.17.18.28.3.38.4.1.1.2.22.3.33.1.1.16.2.23.27.06.07.06.14.07.26v.01z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">WhatsApp</span>
      </button>

      <!-- Share Button: Copy Link -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-green-700 hover:bg-green-800 disabled:bg-green-400 focus:ring-4 focus:ring-green-400 dark:bg-green-800 dark:hover:bg-green-900 dark:focus:ring-green-950 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group" onclick="navigator.clipboard.writeText('https://www.example.com/article-link').then(function(){ alert('Link copied to clipboard!'); }, function(){ alert('Failed to copy link!'); });">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13.5h6m-3-3v6m-9 5.25a2.25 2.25 0 01-2.25-2.25V9C2.25 7.7 3.39 6.75 4.87 6.75h.92L6 4.78a2.25 2.25 0 011.85-.78h8.3a2.25 2.25 0 011.85.78l.21 1.97h.92c1.48 0 2.62 1.05 2.62 2.3V17.5a2.25 2.25 0 01-2.25 2.25h-15zM4 17.5L5.75 9H18.25L20 17.5"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Copy Link</span>
      </button>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-green-100 dark:border-green-700 text-center">
      <p class="text-sm sm:text-base text-gray-500 dark:text-gray-400">
        Thank you for reading and supporting quality journalism.
      </p>
    </div>
  </div>
</div>

<!-- Add a script tag to toggle dark mode for demonstration purposes -->
<script>
  // This script is purely for demonstration and should ideally be part of a larger JS setup.
  // It toggles dark mode when the 'D' key is pressed.
  document.addEventListener('keydown', (e) => {
    if (e.key === 'd' || e.key === 'D') {
      document.documentElement.classList.toggle('dark');
    }
  });
</script>

Playful_Job_Application_Progress_Indicator

一个复杂、有趣且响应迅速的进度指示器组件，适用于工作申请工作流程，具有糖果/甜蜜的配色方案和深色模式支持。它专为工作委员会和职业发展平台而设计，通过动画过渡和鼓励信息直观地表示多个申请阶段。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="p-6 sm:p-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 text-center">
        Your Job Hunt Adventure!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 text-center">
        Let's track your progress, one sweet step at a time.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
        <!-- Application Overview Card -->
        <div class="bg-pink-50 dark:bg-gray-600 rounded-2xl p-6 shadow-md transition-all duration-300 transform hover:scale-105">
          <h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-3">Current Application</h3>
          <p class="text-2xl font-extrabold text-purple-700 dark:text-purple-300">Frontend Developer</p>
          <p class="text-gray-600 dark:text-gray-400 mb-4">at Sparkle Tech Innovations</p>
          <div class="flex items-center text-sm font-medium text-pink-600 dark:text-pink-400">
            <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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            Applied on: Apr 12, 2024
          </div>
        </div>

        <!-- Motivational Quote Card -->
        <div class="bg-purple-50 dark:bg-gray-600 rounded-2xl p-6 shadow-md transition-all duration-300 transform hover:scale-105">
          <div class="flex items-center justify-center mb-3">
            <svg class="w-10 h-10 text-purple-600 dark:text-purple-300 mr-3" 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.663 17h4.673M12 3v1m6.414 1.758l-.707.707M3.757 19.414l.707-.707M1.021 10.499a11.955 11.955 0 010-2.998m12.745 10.603a11.955 11.955 0 01-2.998 0M21.021 10.499a11.955 11.955 0 000-2.998M3.757 4.586L3.05 3.879m16.97 16.97l-.707-.707M16.95 20.485l.707-.707M12 21.001v-1m-4.504-2.504l-.707.707M5.074 1.758L4.367 1.051M10 12h4m-2 4v-4"></path></svg>
            <h3 class="text-xl font-bold text-purple-700 dark:text-purple-300">Keep Shining!</h3>
          </div>
          <blockquote class="text-lg italic text-gray-700 dark:text-gray-300 text-center">
            "Every 'no' gets you closer to a 'yes'! Your dream job is just around the corner."
          </blockquote>
        </div>
      </div>

      <!-- Progress Steps Container -->
      <div class="relative flex flex-col sm:flex-row justify-between items-center w-full px-4 sm:px-0 mb-8">
        <!-- Progress Line (Mobile/Tablet Hidden) -->
        <div class="hidden sm:block absolute top-1/2 left-0 right-0 h-2 bg-gradient-to-r from-pink-200 to-purple-200 dark:from-gray-500 dark:to-gray-600 rounded-full mx-auto -mt-1 z-0"></div>
        <div class="hidden sm:block absolute top-1/2 left-0 h-2 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-mint-400 dark:to-pink-400 rounded-full transition-all duration-1000 ease-out z-10" style="width: 66%;"></div>

        <!-- Steps -->
        <div class="flex flex-col sm:flex-row w-full justify-between z-20">

          <!-- Step 1: Applied -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-pink-400 to-purple-400 dark:from-mint-500 dark:to-teal-500 text-white shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-pink-700 dark:text-pink-300 text-center">1. Applied!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-pink-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Application Sent (Apr 12)
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-pink-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 2: Interview Scheduled -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-teal-400 dark:from-purple-500 dark:to-pink-500 text-white shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-mint-700 dark:text-mint-300 text-center">2. Interview Time!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-mint-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Round 1 Interview (Apr 20)
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-mint-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 3: Feedback Received -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-orange-400 to-yellow-400 dark:from-amber-500 dark:to-orange-500 text-white shadow-lg opacity-60 transform transition-all duration-300 group-hover:scale-110 group-hover:opacity-100 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-orange-700 dark:text-orange-300 opacity-60 group-hover:opacity-100 text-center">3. Feedback Fun!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-orange-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Awaiting Feedback
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-orange-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 4: Offer/Rejection -->
          <div class="flex flex-col items-center w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-500 dark:to-gray-600 text-gray-600 dark:text-gray-200 shadow-inner opacity-40 transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:opacity-100">
              <svg class="w-8 h-8 sm:w-10 sm:h-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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L12 21l-2.286-6.857L3 12l5.714-2.143L12 3z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-gray-600 dark:text-gray-400 opacity-40 group-hover:opacity-100 text-center">4. Tada Moment!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-gray-800 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Offer or Next Steps
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-gray-800 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

        </div>
      </div>

      <!-- Call to Action / Next Steps -->
      <div class="text-center mt-12">
        <p class="text-xl text-gray-700 dark:text-gray-300 mb-6">Ready for your next power-up? ✨</p>
        <button class="px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 dark:from-mint-500 dark:to-teal-500 text-white text-lg font-bold shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-mint-300 animate-bounce-slow">
          View All Applications!
        </button>
      </div>

      <!-- Related Content / Profile Link -->
      <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-600 text-center">
        <p class="text-gray-600 dark:text-gray-400">Don't forget to keep your profile sparkling! ✨</p>
        <div class="flex items-center justify-center mt-4">
          <img class="w-12 h-12 rounded-full border-4 border-pink-400 dark:border-mint-400 shadow-md mr-3 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <a href="#" class="text-lg font-semibold text-purple-600 dark:text-purple-300 hover:text-purple-800 dark:hover:text-purple-100 transition-colors duration-300">
            My Sparkle Profile
          </a>
        </div>
      </div>

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

<style>
  /* Custom bouncy animation for button */
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
  }
</style>

聊天窗口组件

一个简单、响应式的聊天窗口组件，具有有机/自然风格的设计、霓虹灯/电色调和深色模式支持，适用于预订/预订系统。

打开预览

                <div class="flex justify-center items-center h-screen bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="relative w-full max-w-sm lg:max-w-md xl:max-w-lg bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out transform hover:scale-105 group">
    <!-- Organic Top Shape -->
    <div class="absolute top-0 left-0 right-0 h-40 bg-gradient-to-r from-teal-400 via-blue-500 to-indigo-600 dark:from-teal-600 dark:via-blue-700 dark:to-indigo-800 rounded-bl-[40%] rounded-br-[30%] group-hover:from-teal-300 group-hover:via-blue-400 group-hover:to-indigo-500 transition-all duration-300 ease-in-out"></div>

    <!-- Header -->
    <div class="relative z-10 flex items-center justify-between p-6 pb-2 pt-8">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-teal-300 dark:border-teal-500 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <h2 class="text-xl font-bold text-white drop-shadow-md">Scheduler Bot</h2>
          <p class="text-sm text-blue-100 dark:text-blue-200 text-opacity-80">Online</p>
        </div>
      </div>
      <button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Chat Body -->
    <div class="relative z-0 p-6 pt-4 h-96 overflow-y-auto custom-scrollbar-neon" style="scrollbar-width: thin; -ms-overflow-style: none;">
      <!-- Receiver Message -->
      <div class="flex items-start mb-4 animate-fade-in" style="animation-delay: 0.1s;">
        <img class="w-8 h-8 rounded-full mr-2 shadow-sm" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Bot Avatar">
        <div class="bg-gradient-to-tr from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 text-white p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg transition-transform duration-300 ease-in-out hover:scale-105">
          <p class="text-sm">Hello! How can I assist you with your booking today?</p>
          <span class="block text-xs text-blue-100 text-opacity-75 mt-1">10:00 AM</span>
        </div>
      </div>

      <!-- User Message -->
      <div class="flex justify-end mb-4 animate-fade-in" style="animation-delay: 0.2s;">
        <div class="bg-gradient-to-tr from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 text-white p-3 rounded-tl-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg transition-transform duration-300 ease-in-out hover:scale-105">
          <p class="text-sm">I'd like to book an appointment for a health check-up next week.</p>
          <span class="block text-xs text-purple-100 text-opacity-75 mt-1">10:02 AM</span>
        </div>
      </div>

      <!-- Receiver Message (Options) -->
      <div class="flex items-start mb-4 animate-fade-in" style="animation-delay: 0.3s;">
        <img class="w-8 h-8 rounded-full mr-2 shadow-sm" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Bot Avatar">
        <div class="bg-gradient-to-tr from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 text-white p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg">
          <p class="text-sm mb-2">Great! Please select your preferred day:</p>
          <div class="flex flex-wrap gap-2">
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Monday</button>
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Wednesday</button>
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Friday</button>
          </div>
          <span class="block text-xs text-blue-100 text-opacity-75 mt-2">10:03 AM</span>
        </div>
      </div>
    </div>

    <!-- Input Area -->
    <div class="relative p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-850">
      <div class="flex items-center space-x-2">
        <input type="text" placeholder="Type your message..." class="flex-grow py-2 px-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 transition-shadow duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500 shadow-inner" />
        <button class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-teal-600 dark:to-blue-700 p-3 rounded-full text-white shadow-lg hover:from-teal-300 hover:to-blue-400 dark:hover:from-teal-500 dark:hover:to-blue-600 transition-all duration-300 ease-in-out transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.108 5.768a2 2 0 0 1 2.828 0L20 12l-12.064 6.232a2 2 0 0 1-2.828-2.828L14.172 12 5.108 5.768z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Scrollbar Styles (can be moved to a <style> tag or CSS file) -->
  <style>
    .custom-scrollbar-neon::-webkit-scrollbar {
      width: 6px;
    }

    .custom-scrollbar-neon::-webkit-scrollbar-track {
      background: transparent;
    }

    .custom-scrollbar-neon::-webkit-scrollbar-thumb {
      background-image: linear-gradient(to bottom, #0ea5e9, #a855f7);
      border-radius: 10px;
    }
    
    .dark .custom-scrollbar-neon::-webkit-scrollbar-thumb {
      background-image: linear-gradient(to bottom, #2563eb, #7c3aed);
    }

    .custom-scrollbar-neon {
      scrollbar-color: #0ea5e9 #f1f5f9; /* thumb and track for Firefox */
    }

    .dark .custom-scrollbar-neon {
      scrollbar-color: #2563eb #1f2937; /* thumb and track for Firefox in dark mode */
    }

    /* Animations */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
      animation: fade-in 0.5s ease-out forwards;
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in-up {
      animation: fade-in-up 0.6s ease-out forwards;
    }
  </style>
</div>

Brutalist_Login_Form_Travel_Tourism

中等复杂度、野兽派风格的登录表单，色彩鲜艳，专为旅行和旅游网站设计。具有高对比度、大胆的排版和完全响应能力，并支持深色模式。

打开预览

                <div class="min-h-screen flex items-center justify-center p-4 bg-lime-200 dark:bg-gray-900 font-mono transition-colors duration-300">
  <div class="w-full max-w-md bg-yellow-400 dark:bg-gray-800 border-4 border-black dark:border-red-500 shadow-[8px_8px_0_0_black] dark:shadow-[8px_8px_0_0_red] transform -rotate-2 hover:rotate-0 transition-all duration-300 ease-in-out p-8 md:p-12 space-y-8 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-16 h-16 bg-fuchsia-600 dark:bg-sky-500 rounded-br-full z-0"></div>
    <div class="absolute bottom-0 right-0 w-24 h-24 bg-teal-500 dark:bg-orange-500 rounded-tl-full z-0"></div>

    <h2 class="text-5xl md:text-6xl font-extrabold text-black dark:text-yellow-400 text-center uppercase leading-tight tracking-tighter relative z-10 drop-shadow-[4px_4px_0_black] dark:drop-shadow-[4px_4px_0_red]">
      <span class="block">Embark</span> <span class="block">Login</span>
    </h2>
    <p class="text-lg text-black dark:text-gray-200 text-center relative z-10 border-t-2 border-b-2 border-black dark:border-red-500 py-2">
      Adventure Awaits! Sign in to book your next journey.
    </p>

    <form class="space-y-6 relative z-10">
      <div>
        <label for="email" class="block text-black dark:text-yellow-400 text-xl font-bold uppercase mb-2 border-b-2 border-black dark:border-red-500 pb-1">
          Email
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-4 bg-blue-300 dark:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-red-500 focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 text-xl font-bold transition-all duration-200 placeholder-black dark:placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" required>
      </div>
      <div>
        <label for="password" class="block text-black dark:text-yellow-400 text-xl font-bold uppercase mb-2 border-b-2 border-black dark:border-red-500 pb-1">
          Password
        </label>
        <input type="password" id="password" name="password" placeholder="your_secret_path" class="w-full p-4 bg-emerald-300 dark:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-red-500 focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 text-xl font-bold transition-all duration-200 placeholder-black dark:placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" required>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-6 w-6 text-fuchsia-600 dark:text-sky-500 border-4 border-black dark:border-red-500 focus:ring-fuchsia-600 dark:focus:ring-sky-500 bg-white dark:bg-gray-700 checked:bg-fuchsia-600 dark:checked:bg-sky-500 transition-colors duration-200 relative top-1">
          <label for="remember-me" class="ml-3 text-lg font-bold text-black dark:text-gray-200 uppercase">
            Remember Me
          </label>
        </div>
        <a href="#" class="font-bold text-lg text-black dark:text-red-500 underline hover:no-underline transition-all duration-200 uppercase relative z-10">
          Forgot Password?
        </a>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-4 px-6 border-4 border-black dark:border-red-500 shadow-[6px_6px_0_0_black] dark:shadow-[6px_6px_0_0_red] bg-violet-600 dark:bg-green-500 text-white dark:text-black hover:bg-yellow-500 dark:hover:bg-red-500 hover:text-black dark:hover:text-black text-2xl uppercase tracking-widest font-extrabold focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 transform hover:translate-x-1 hover:translate-y-1 transition-all duration-200 relative z-10">
          Login to Explore
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-lg text-black dark:text-gray-200 relative z-10">
      Don't have an account?
      <a href="#" class="font-bold text-lg text-black dark:text-green-500 underline hover:no-underline transition-all duration-200 uppercase ml-2">
        Register Here!
      </a>
    </p>

    <div class="absolute -left-16 -bottom-16 w-32 h-32 bg-purple-500 dark:bg-cyan-500 rounded-full opacity-50 blur-xl z-0 pointer-events-none"></div>
    <div class="absolute -right-16 -top-16 w-40 h-40 bg-pink-500 dark:bg-yellow-500 rounded-full opacity-50 blur-xl z-0 pointer-events-none"></div>
  </div>
</div>

Retro_Vintage_Loader_Component

一个简单、响应迅速的复古/复古主题加载器组件，具有棕褐色/棕色调，适用于活动和会议网站，具有深色模式支持。

打开预览

                <div class="p-4 md:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono">
    <div class="w-full max-w-sm p-6 md:p-8 rounded-lg shadow-xl border-2 border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
        <div class="text-center mb-6">
            <p class="text-2xl md:text-3xl font-bold text-amber-900 dark:text-amber-200 uppercase tracking-widest leading-tight">
                Initializing
            </p>
            <p class="text-sm md:text-base text-amber-700 dark:text-amber-400 mt-1">
                Please stand by...
            </p>
        </div>

        <div class="flex items-center justify-center space-x-2 animate-pulse mb-6">
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.1s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.2s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.3s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.4s;"></div>
        </div>

        <div class="w-full bg-amber-200 dark:bg-gray-700 rounded-full h-3 mb-4 overflow-hidden retro-progress-bar">
            <div class="bg-amber-700 dark:bg-amber-500 h-3 rounded-full animate-progress-fill origin-left" style="width: 0%;"></div>
        </div>

        <div class="text-center text-xs md:text-sm text-gray-600 dark:text-gray-400">
            <p>Loading essential modules...</p>
        </div>
    </div>

    <style>
        .animate-bounce-custom {
            animation: bounce-custom 1.5s infinite ease-in-out;
        }

        @keyframes bounce-custom {
            0%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
        }

        @keyframes progress-fill {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }

        .animate-progress-fill {
            animation: progress-fill 2s forwards linear;
        }

        .retro-progress-bar {
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2) relevant;
        }
    </style>
</div>

Mega Menu 组件

一个复杂的响应式大型菜单组件，采用等宽/开发人员美学和温暖的中性配色方案设计，适用于专业咨询/服务网站。包括深色模式支持。

打开预览

                <nav class="bg-gray-100 font-mono tracking-tighter shadow-sm dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-16 justify-between items-center">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold uppercase"><span class="text-orange-500">[</span>DEV<span class="text-orange-500">]</span>CONSULT</a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <button type="button" class="relative rounded-full bg-gray-200 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900">
          <span class="absolute -inset-1.5"></span>
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>

        <div class="relative ml-3 group">
          <div>
            <button type="button" class="relative flex rounded-full bg-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:focus:ring-offset-gray-900" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="absolute -inset-1.5"></span>
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
            </button>
          </div>

          <!-- Dropdown menu, show/hide based on menu state. -->
          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden group-hover:block" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-200 p-2 text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900" aria-controls="mobile-menu" aria-expanded="false">
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <!-- Menu open: "hidden", Menu closed: "block" -->
          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <!-- Menu open: "block", Menu closed: "hidden" -->
          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden md:block py-4">
      <div class="flex space-x-8">
        <div class="group relative">
          <button class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">[.SERVICES]</button>
          <div class="hidden group-hover:block absolute left-0 top-full z-10 w-screen max-w-5xl overflow-hidden rounded-lg bg-gray-50 p-6 shadow-xl dark:bg-gray-800 dark:ring-gray-700">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// CORE SERVICES</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cloud Infrastructure</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> DevOps Automation</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cybersecurity Consulting</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Data Engineering</a></li>
                </ul>
              </div>
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// INDUSTRY SOLUTIONS</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> FinTech Deployment</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Healthcare IT</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> E-commerce Platforms</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Government & Public Sector</a></li>
                </ul>
              </div>
              <div class="bg-gray-100 p-4 rounded-md dark:bg-gray-700">
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// FEATURED RESOURCE</h3>
                <img class="mt-4 w-full h-32 object-cover rounded-md" src="https://picsum.photos/300/200?random=1" alt="Featured Resource">
                <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">'Mastering Kubernetes: A Developer's Guide to Container Orchestration.' Dive deep into scalable deployments.</p>
                <a href="#" class="mt-3 inline-flex items-center text-sm font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">READ_DOCS() <span aria-hidden="true"> &rarr;</span></a>
              </div>
            </div>
          </div>
        </div>

        <div class="group relative">
          <button class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">[.SOLUTIONS]</button>
          <div class="hidden group-hover:block absolute left-0 top-full z-10 w-screen max-w-2xl overflow-hidden rounded-lg bg-gray-50 p-6 shadow-xl dark:bg-gray-800 dark:ring-gray-700">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY INDUSTRY</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Energy Sector Automation</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Manufacturing Digitalization</a></li>
                </ul>
              </div>
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY TECHNOLOGY</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">AI/ML Integration</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Blockchain Development</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.ABOUT_US]</a>
        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.BLOG]</a>
        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.CONTACT]</a>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2">
      <div class="group relative">
        <button class="w-full text-left text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-base font-medium dark:text-gray-200 dark:hover:text-orange-400">[.SERVICES]</button>
        <div class="mt-2 space-y-1 pl-4">
          <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// CORE SERVICES</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cloud Infrastructure</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> DevOps Automation</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cybersecurity Consulting</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Data Engineering</a>
          
          <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// INDUSTRY SOLUTIONS</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> FinTech Deployment</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Healthcare IT</a>
        </div>
      </div>
      
      <div class="group relative">
        <button class="w-full text-left text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-base font-medium dark:text-gray-200 dark:hover:text-orange-400">[.SOLUTIONS]</button>
        <div class="mt-2 space-y-1 pl-4">
          <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY INDUSTRY</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Energy Sector Automation</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Manufacturing Digitalization</a>
          <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY TECHNOLOGY</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">AI/ML Integration</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Blockchain Development</a>
        </div>
      </div>

      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.ABOUT_US]</a>
      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.BLOG]</a>
      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.CONTACT]</a>
    </div>
    <div class="border-t border-gray-200 pb-3 pt-4 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-gray-800 dark:text-gray-200">John Doe</div>
          <div class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-200 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Your Profile</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Sign out</a>
      </div>
    </div>
  </div>
</nav>

豪华认证组件

专为奢侈时尚和美容品牌设计的优雅而精致的身份验证组件，具有丰富的界面、响应式布局和使用类似配色方案的深色模式支持。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-xl overflow-hidden max-w-4xl w-full flex flex-col lg:flex-row transform transition-all duration-300 hover:shadow-3xl dark:border dark:border-gray-700">
    <!-- Left Section: Image and Slogan -->
    <div class="relative lg:w-1/2 overflow-hidden flex items-center justify-center p-6 lg:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 dark:to-pink-900 border-b lg:border-r border-gray-100 dark:border-purple-800">
      <img src="https://picsum.photos/600/800?grayscale&blur=2" alt="Luxury Fashion" class="absolute inset-0 w-full h-full object-cover opacity-60 dark:opacity-40 transition-opacity duration-300">
      <div class="relative z-10 text-center text-gray-900 dark:text-white px-4 py-8 rounded-lg bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm dark:bg-black dark:bg-opacity-30">
        <h2 class="text-4xl lg:text-5xl font-bold mb-4 tracking-tight">Embrace Your Elegance</h2>
        <p class="text-lg lg:text-xl leading-relaxed italic">Discover exquisite collections crafted for timeless beauty and unparalleled style.</p>
        <div class="mt-8 flex justify-center space-x-4">
          <a href="#" class="text-gray-900 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 transform hover:scale-110 transition-transform duration-300">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.886 8.438-9.879z" clip-rule="evenodd" /></svg>
          </a>
          <a href="#" class="text-gray-900 dark:text-gray-200 hover:text-pink-700 dark:hover:text-pink-300 transform hover:scale-110 transition-transform duration-300">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048 1.05.056 1.405.123 1.748.213.688.181 1.255.426 1.71.681a3.07 3.07 0 011.086 1.086c.255.455.5.962.681 1.71.09.344.156.699.213 1.748.047 1.013.048 1.371.048 3.797s-.001 2.784-.048 3.797c-.056 1.05-.123 1.405-.213 1.748a3.07 3.07 0 01-.681 1.71 3.07 3.07 0 01-1.086 1.086c-.455.255-.962.5-1.71.681-.344.09-.699.156-1.748.213-1.013.047-1.371.048-3.797.048s-2.784-.001-3.797-.048c-1.05-.056-1.405-.123-1.748-.213a3.07 3.07 0 01-1.71-.681 3.07 3.07 0 01-1.086-1.086c-.255-.455-.5-.962-.681-1.71-.09-.344-.156-.699-.213-1.748C3.003 16.315 3 15.958 3 13.5s.002-2.784.048-3.797c.056-1.05.123-1.405.213-1.748a3.07 3.07 0 01.681-1.71 3.07 3.07 0 011.086-1.086c.455-.255.962-.5 1.71-.681.344-.09.699-.156 1.748-.213C9.557 2.003 9.918 2 12.315 2zm0 2.137c-2.002 0-2.274.004-3.067.04l-.566.027c-.41.02-.638.07-.797.135a1.59 1.59 0 00-.86.86c-.065.159-.115.387-.135.797l-.027.566c-.036.793-.04 1.065-.04 3.067s.004 2.274.04 3.067l.027.566c.02.41.07.638.135.797a1.59 1.59 0 00.86.86c.159.065.387.115.797.135l.566.027c.793.036 1.065.04 3.067.04s2.274-.004 3.067-.04l.566-.027c.41-.02.638-.07.797-.135a1.59 1.59 0 00.86-.86c.065-.159.115-.387.135-.797l.027-.566c.036-.793.04-1.065.04-3.067s-.004-2.274-.04-3.067l-.027-.566c-.02-.41-.07-.638-.135-.797a1.59 1.59 0 00-.86-.86c-.159-.065-.387-.115-.797-.135l-.566-.027c-.793-.036-1.065-.04-3.067-.04zm0 3.393a4.469 4.469 0 100 8.938 4.469 4.469 0 000-8.938zM12.315 9.08a3.07 3.07 0 110 6.139 3.07 3.07 0 010-6.139zm5.355-3.003a1.076 1.076 0 100 2.152 1.076 1.076 0 000-2.152z" clip-rule="evenodd" /></svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Right Section: Login/Register Form -->
    <div class="lg:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center dark:text-gray-200">
      <div class="mb-6 text-center">
        <h3 class="text-3xl lg:text-4xl font-bold mb-2 text-gray-900 dark:text-white">Welcome Back!</h3>
        <p class="text-gray-600 dark:text-gray-400">Log in or create an account to continue your journey.</p>
      </div>

      <div class="flex justify-center mb-6">
        <button class="px-6 py-3 rounded-full text-lg font-semibold border border-purple-500 bg-purple-500 text-white dark:bg-purple-700 dark:border-purple-700 hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md mr-4 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Login
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold border border-pink-500 text-pink-700 dark:text-pink-300 hover:bg-pink-50 dark:hover:bg-pink-900 transition-colors duration-300 shadow-md focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Register
        </button>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-pink-500 focus:border-pink-500 sm:text-base bg-white dark:bg-gray-700 dark:text-white transition-colors duration-300">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-pink-500 focus:border-pink-500 sm:text-base bg-white dark:bg-gray-700 dark:text-white transition-colors duration-300">
        </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-purple-600 dark:text-purple-400 border-gray-300 dark:border-gray-600 rounded focus:ring-purple-500 dark:focus:ring-purple-400">
            <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-pink-600 hover:text-pink-500 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-300">Forgot your password?</a>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:ring-offset-gray-900 transition-all duration-300 transform hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-8 relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-4">
        <button type="button"
          class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-semibold bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
          <svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.001 2.002c-5.522 0-10 4.477-10 10 0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.886 8.438-9.879 0-5.522-4.477-10-10-10Z"/></svg>
          Sign in with Facebook
        </button>
        <button type="button"
          class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-semibold bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
          <svg class="h-6 w-6 mr-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22.54 12.083c0-.7-.06-1.39-.18-2.07H12v3.69h6.1C17.78 17.65 15.06 20 12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8c2.34 0 4.42.96 5.96 2.4l2.79-2.79C18.66 2.92 15.52 1 12 1 5.92 1 1 5.92 1 12s4.92 11 11 11c6.08 0 11-4.92 11-11v-.917z"/></svg>
          Sign in with Google
        </button>
      </div>
    </div>
  </div>
</div>

注册表组件

专为 CRM/业务工具设计的响应式且具有视觉吸引力的注册表单组件，具有三色配色方案和微妙的微交互，并完全支持深色模式。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-slate-900 dark:via-gray-950 dark:to-zinc-950 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] dark:shadow-xl dark:shadow-blue-900/20">
    <div class="px-6 py-8 sm:px-8 sm:py-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">
        Join Our Community
      </h2>
      <p class="text-center text-sm text-gray-600 dark:text-gray-400 mb-8">
        Create your account to unlock powerful CRM tools.
      </p>

      <form class="space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
          <input type="text" id="full-name" name="full-name" placeholder="John Doe" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-blue-400 dark:hover:border-blue-600 focus:shadow-md">
        </div>

        <div>
          <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email-address" name="email" placeholder="[email protected]" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-pink-400 dark:hover:border-pink-600 focus:shadow-md">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" placeholder="At least 8 characters" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-purple-400 dark:hover:border-purple-600 focus:shadow-md">
        </div>

        <div class="relative flex items-start">
          <div class="flex items-center h-5">
            <input id="terms" name="terms" type="checkbox" required
              class="focus:ring-blue-500 h-4 w-4 text-blue-600 dark:text-blue-500 border-gray-300 dark:border-gray-600 rounded transform transition-all duration-200 ease-in-out
                     dark:bg-gray-700 dark:checked:bg-blue-600 dark:checked:border-blue-600 opacity-90 hover:opacity-100
                     focus:scale-110">
          </div>
          <div class="ml-3 text-sm">
            <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Privacy Policy</a>.
            </label>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-semibold text-white
                   bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 
                   hover:from-purple-700 hover:via-pink-700 hover:to-blue-700 
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800
                   transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95
                   relative overflow-hidden group">
            <span class="relative z-10">Register</span>
            <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Already have an account?
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 ml-1 underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">
            Sign In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

Corporate_Professional_Forum_Modal

一个复杂、响应迅速且专业的模态组件，适用于论坛/社区平台，具有类似的配色方案和深色模式支持。

打开预览

                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4 z-50 overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full transform transition-all sm:my-8 sm:align-middle overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="px-4 py-3 sm:px-6 flex justify-between items-center bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Create New Discussion Topic
      </h3>
      <button type="button" class="text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
        <span class="sr-only">Close panel</span>
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    <div class="p-4 sm:p-6 space-y-4" id="modal-description">
      <div>
        <label for="topic-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Topic Title</label>
        <div class="mt-1">
          <input type="text" name="topic-title" id="topic-title" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 rounded-md" placeholder="Enter a concise title" aria-required="true">
        </div>
      </div>

      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
        <div class="mt-1">
          <select id="category" name="category" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100">
            <option>General Discussion</option>
            <option>Technical Support</option>
            <option>Feature Requests</option>
            <option>Announcements</option>
          </select>
        </div>
      </div>

      <div>
        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
        <div class="mt-1">
          <textarea id="description" name="description" rows="5" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Share details about your topic..."></textarea>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        </div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Posting as John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Your post will be visible to all forum members.</p>
        </div>
      </div>

    </div>
    <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
      <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm dark:bg-blue-700 dark:hover:bg-blue-800">
        Create Topic
      </button>
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700">
        Cancel
      </button>
    </div>
  </div>
</div>

JobBoard导航

一个简单、响应式的导航组件，适用于求职板或职业发展平台，具有海洋/蓝色调、悬停时的微交互和深色模式支持。

打开预览

                <nav class="bg-sky-500 shadow-lg dark:bg-sky-900 py-4">
  <div class="container mx-auto px-4 flex justify-between items-center">
    <a href="#" class="text-white text-2xl font-bold tracking-tight transform hover:scale-105 transition-transform duration-300 ease-in-out">
      JobFind
    </a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
        Find Jobs
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
      </a>
      <a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
        Post a Job
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
      </a>
      <a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
        Resume Builder
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
      </a>
      <a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
        Career Advice
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button aria-label="Toggle navigation" class="text-white focus:outline-none focus:ring-2 focus:ring-white rounded">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

1 ... 59 60 61 62 63 ... 335