搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

数据可视化组件组件

一个复杂、简约的预订/预订组件，采用霓虹灯/电色调，具有日历和时隙选择器等数据可视化元素。完全响应，支持深色模式。

                <div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 md:p-8 lg:p-12 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90 border border-gray-200 dark:border-gray-700">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6 lg:p-10">

      <!-- Left Section: Calendar and Summary -->
      <div class="lg:col-span-2 flex flex-col space-y-8">
        <h2 class="text-4xl font-extrabold text-indigo-600 dark:text-fuchsia-500 mb-6 tracking-tight">Book Your Spot</h2>

        <!-- Monthly Calendar -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600 relative group">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Date</h3>
          
          <div class="flex justify-between items-center mb-4">
            <button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200"><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>
            <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">October 2023</span>
            <button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200"><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 class="grid grid-cols-7 gap-2 text-center text-sm">
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sun</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Mon</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Tue</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Wed</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Thu</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Fri</div>
            <div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sat</div>
            
            <!-- Example days -->
            <div class="py-2 text-gray-400">27</div>
            <div class="py-2 text-gray-400">28</div>
            <div class="py-2 text-gray-400">29</div>
            <div class="py-2 text-gray-400">30</div>
            <div class="py-2 text-gray-400">1</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">2</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">3</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">4</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">5</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">6</div>
            <div class="py-2 text-gray-900 dark:text-gray-100 relative group selected-date">
                7<span class="absolute inset-0 border-2 border-fuchsia-500 dark:border-cyan-400 rounded-full scale-0 group-hover:scale-105 transition-all duration-300"></span>
            </div>
            <div class="py-2 text-gray-900 dark:text-gray-100">8</div>
            <div class="py-2 rounded-full bg-fuchsia-100 dark:bg-cyan-900 text-fuchsia-700 dark:text-cyan-300 font-semibold border-2 border-fuchsia-400 dark:border-cyan-600 shadow-inner">9</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">10</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">11</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">12</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">13</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">14</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">15</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">16</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">17</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">18</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">19</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">20</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">21</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">22</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">23</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">24</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">25</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">26</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">27</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">28</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">29</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">30</div>
            <div class="py-2 text-gray-900 dark:text-gray-100">31</div>
            <div class="py-2 text-gray-400">1</div>
            <div class="py-2 text-gray-400">2</div>
            <div class="py-2 text-gray-400">3</div>
            <div class="py-2 text-gray-400">4</div>
          </div>
        </div>

        <!-- Time Slot Selection -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Time Slot</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">09:00 AM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">10:00 AM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">11:00 AM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">12:00 PM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-fuchsia-500 dark:border-cyan-400 bg-fuchsia-200 dark:bg-cyan-800 text-fuchsia-800 dark:text-cyan-200 font-bold shadow-md transform scale-105 relative ring-2 ring-fuchsia-500 dark:ring-cyan-400 transition-all duration-300 group">
              <span class="text-lg">01:00 PM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200 opacity-60 cursor-not-allowed">
              <span class="text-lg font-medium">02:00 PM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">03:00 PM</span>
            </button>
            <button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
              <span class="text-lg font-medium">04:00 PM</span>
            </button>
          </div>
        </div>

        <!-- Additional Booking Info/Charts -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Availability Overview</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-fuchsia-500 dark:bg-cyan-400 animate-pulse"></div>
              <span class="text-md text-gray-700 dark:text-gray-300">Few Spots Left</span>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-lime-500"></div>
              <span class="text-md text-gray-700 dark:text-gray-300">Highly Available</span>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-red-500 opacity-60"></div>
              <span class="text-md text-gray-700 dark:text-gray-300">Fully Booked</span>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-500"></div>
              <span class="text-md text-gray-700 dark:text-gray-300">Not Available</span>
            </div>
          </div>

          <div class="mt-6">
            <h4 class="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200">Daily Slot Trends</h4>
            <!-- Placeholder for a simple bar chart or sparkline: SVG or image -->
            <div class="w-full h-32 bg-gradient-to-r from-lime-300 via-fuchsia-300 to-red-300 dark:from-lime-800 dark:via-fuchsia-800 dark:to-red-800 rounded-md p-2 relative overflow-hidden">
                <div class="absolute bottom-0 left-0 w-full flex items-end justify-around h-full">
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 0s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 60%; animation-delay: 0.1s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 40%; animation-delay: 0.2s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 20%; animation-delay: 0.3s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 0.4s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 0.5s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 90%; animation-delay: 0.6s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 0.7s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 15%; animation-delay: 0.8s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 65%; animation-delay: 0.9s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 75%; animation-delay: 1s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 45%; animation-delay: 1.1s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 25%; animation-delay: 1.2s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 85%; animation-delay: 1.3s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 55%; animation-delay: 1.4s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 35%; animation-delay: 1.5s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 10%; animation-delay: 1.6s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 95%; animation-delay: 1.7s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 1.8s;"></div>
                  <div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 1.9s;"></div>
                  <div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 2s;"></div>
                  <div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 2.1s;"></div>
                </div>
            </div>
            <p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">Scroll to see more days</p>
          </div>

        </div>
      </div>

      <!-- Right Section: Booking Summary & User Info -->
      <div class="lg:col-span-1 flex flex-col space-y-8">
        <!-- Booking Summary -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-xl border border-violet-100 dark:border-gray-600 relative overflow-hidden">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-400/20 to-cyan-400/20 dark:from-fuchsia-700/20 dark:to-cyan-700/20 opacity-30"></div>
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400 relative z-10">Your Booking Summary</h3>
          <div class="space-y-4 relative z-10">
            <div class="flex justify-between items-center">
              <span class="text-gray-700 dark:text-gray-300 font-medium">Service:</span>
              <span class="text-gray-900 dark:text-gray-100 font-semibold">Premium Consultation</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-700 dark:text-gray-300 font-medium">Date:</span>
              <span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">Oct 9, 2023</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-700 dark:text-gray-300 font-medium">Time:</span>
              <span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">01:00 PM</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-700 dark:text-gray-300 font-medium">Duration:</span>
              <span class="text-gray-900 dark:text-gray-100 font-semibold">60 minutes</span>
            </div>
            <div class="flex justify-between mb-4 pt-4 border-t border-violet-200 dark:border-gray-600">
              <span class="text-xl font-bold text-gray-900 dark:text-gray-100">Total:</span>
              <span class="text-xl font-bold text-indigo-700 dark:text-lime-400">$120.00</span>
            </div>
          </div>

          <button class="w-full flex items-center justify-center py-3 px-6 bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white font-extrabold rounded-lg shadow-lg hover:from-fuchsia-600 hover:to-cyan-600 focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-cyan-600 transform transition-all duration-300 ease-out sm:text-lg lg:text-xl relative overflow-hidden group">
            <span class="relative z-10">Confirm Booking</span>
            <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <svg class="ml-2 w-6 h-6 text-white absolute right-4 opacity-0 group-hover:opacity-100 translate-x-4 group-hover:translate-x-0 transition-all duration-300 ease-out" 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>

        <!-- Consultant/Service Provider Info -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Your Consultant</h3>
          <div class="flex items-center space-x-4">
            <img class="w-20 h-20 rounded-full object-cover border-4 border-fuchsia-400 dark:border-cyan-500 shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Consultant John Doe">
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Senior Business Analyst</p>
              <div class="flex items-center mt-1 text-sm text-gray-500 dark:text-gray-400">
                <svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                4.9 (245 reviews)
              </div>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 text-sm">John specializes in digital transformation and has helped numerous clients achieve their strategic goals.</p>
        </div>

        <!-- Customer Support Card -->
        <div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
          <h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Need Help?</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">Our support team is ready to assist you with any questions or issues.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-semibold rounded-md shadow hover:from-indigo-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-blue-400 transition-all duration-300">
            <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>
            Contact Support
          </a>
        </div>

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

<style>
  /* Adding a simple bounce/rise animation for chart bars */
  @keyframes rise {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
  }
  .animate-rise {
    animation: rise 0.5s ease-out forwards;
    transform-origin: bottom;
  }

  /* Custom focus/active state for selected date */
  .selected-date:focus-within .ring-2, .selected-date:hover .ring-2 {
    transform: scale(1.05);
    opacity: 1;
  }
</style>

3D_Music_Footer_Navigation

一个复杂的 3D 灵感页脚导航组件，适用于音乐/音频平台，具有温暖的中性色和完全响应能力，并支持深色模式。

打开预览

                <footer class="bg-gradient-to-br from-stone-100 to-stone-200 text-stone-700 py-12 px-6 dark:from-stone-900 dark:to-stone-950 dark:text-stone-300 relative overflow-hidden">
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: radial-gradient(circle at center, #d6d3d1 1px, transparent 1px); background-size: 20px 20px;"></div>

    <!-- Decorative rings for 3D effect -->
    <div class="absolute w-96 h-96 rounded-full bg-stone-300 dark:bg-stone-700 opacity-20 dark:opacity-10 -bottom-24 -left-24 blur-3xl"></div>
    <div class="absolute w-72 h-72 rounded-full bg-stone-400 dark:bg-stone-600 opacity-15 dark:opacity-8 top-12 -right-12 blur-3xl"></div>

    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative z-10">
        <!-- Section 1: Logo and Copyright -->
        <div class="flex flex-col items-start">
            <a href="#" class="inline-flex items-center space-x-2 text-2xl font-bold mb-4 transform transition-transform duration-300 hover:scale-105">
                <svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm-1 16.03V7.97c0-.49.38-.87.87-.87H15a.87.87 0 0 1 .87.87v10.06a.87.87 0 0 1-.87.87H11.87a.87.87 0 0 1-.87-.87zM13 14H9v-4h4v4z"/>
                </svg>
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-600 to-stone-800 dark:from-amber-400 dark:to-stone-200">SoundWave</span>
            </a>
            <p class="text-sm text-stone-600 dark:text-stone-400 mb-4">Dive into an ocean of sounds. Your ultimate audio experience begins here.</p>
            <p class="text-xs text-stone-500 dark:text-stone-400">&copy; 2023 SoundWave. All rights reserved.</p>
            <div class="flex space-x-4 mt-6">
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" 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.79c0-2.508 1.493-3.89 3.776-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.33V22C17.368 21.248 22 17.07 22 12z" clip-rule="evenodd" /></svg>
                </a>
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.24 3.76c-.92-.92-2.12-1.44-3.44-1.44H7.2c-1.32 0-2.52.52-3.44 1.44C2.84 4.68 2.32 5.88 2.32 7.2v9.6c0 1.32.52 2.52 1.44 3.44s2.12 1.44 3.44 1.44h9.6c1.32 0 2.52-.52 3.44-1.44s1.44-2.12 1.44-3.44V7.2c0-1.32-.52-2.52-1.44-3.44zM12 18.08c-3.35 0-6.08-2.73-6.08-6.08S8.65 5.92 12 5.92s6.08 2.73 6.08 6.08-2.73 6.08-6.08 6.08zM18.42 7.78a1.36 1.36 0 1 1 0-2.72 1.36 1.36 0 0 1 0 2.72z"/><path d="M12 8.08c-2.16 0-3.92 1.76-3.92 3.92s1.76 3.92 3.92 3.92 3.92-1.76 3.92-3.92-1.76-3.92-3.92-3.92z"/></svg>
                </a>
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6.03c-.63.28-1.31.47-2.01.56.73-.44 1.29-1.13 1.55-1.99-.68.4-1.43.68-2.22.84-.64-.68-1.55-1.12-2.59-1.12-2.02 0-3.66 1.64-3.66 3.66 0 .29.03.56.08.83-3.05-.15-5.75-1.61-7.56-3.84-.32.55-.5 1.18-.5 1.87 0 1.27.65 2.39 1.63 3.05-.6-.02-1.16-.18-1.65-.45v.05c0 1.77 1.26 3.24 2.93 3.58-.3.08-.6.12-.9.12-.22 0-.44-.02-.65-.06.47 1.45 1.81 2.51 3.41 2.54-1.25.98-2.82 1.57-4.53 1.57-.29 0-.58-.02-.86-.05 1.62 1.04 3.54 1.65 5.59 1.65 6.71 0 10.37-5.56 10.37-10.37 0-.16-.01-.32-.01-.48.71-.51 1.34-1.14 1.83-1.87z"/></svg>
                </a>
            </div>
        </div>

        <!-- Section 2: Quick Links (Explore) -->
        <div>
            <h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Explore</h3>
            <ul class="space-y-3">
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">New Releases</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Top Charts</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Genres</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Artists</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Podcasts</a></li>
            </ul>
        </div>

        <!-- Section 3: Support & Legal -->
        <div>
            <h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Support</h3>
            <ul class="space-y-3">
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Help Center</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Contact Us</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Privacy Policy</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Terms of Service</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Cookie Policy</a></li>
            </ul>
        </div>

        <!-- Section 4: Newsletter & App Download -->
        <div class="space-y-6">
            <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Stay Connected</h3>
            <div>
                <p class="mb-3 text-stone-600 dark:text-stone-400">Subscribe to our newsletter for the latest updates.</p>
                <form class="flex flex-col sm:flex-row gap-2">
                    <label for="email-address" class="sr-only">Email address</label>
                    <input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 bg-white/50 dark:bg-stone-800/50 px-3.5 py-2 text-stone-900 dark:text-stone-100 shadow-sm ring-1 ring-inset ring-stone-300 dark:ring-stone-700 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 sm:text-sm sm:leading-6 transition-all duration-300 focus:outline-none focus:shadow-lg focus:shadow-amber-500/20" placeholder="Enter your email">
                    <button type="submit" class="flex-none rounded-md bg-amber-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 transform transition-transform duration-300 hover:scale-105 active:scale-95
                    relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        Subscribe
                    </button>
                </form>
            </div>
            <div class="mt-6">
                <p class="mb-3 text-stone-600 dark:text-stone-400">Download our mobile app to listen on the go!</p>
                <div class="flex space-x-3">
                    <a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        <svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-2 20h-6v-1h6v1zm3-3H6V4h12v14z"/>
                        </svg>
                        <span class="text-stone-800 dark:text-stone-200 text-sm font-medium">App Store</span>
                    </a>
                    <a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        <svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2.05 13.9c-.29.54-.84.85-1.4.85-.92 0-1.67-.75-1.67-1.67 0-.92.75-1.67 1.67-1.67.56 0 1.11.31 1.4.85l.76-.76c-.57-.96-1.57-1.54-2.58-1.54-1.84 0-3.33 1.49-3.33 3.33s1.49 3.33 3.33 3.33c1.01 0 2.01-.58 2.58-1.54l-.76-.76zm7.2-2.3l-.76.76c.29-.54.84-.85 1.4-.85.92 0 1.67.75 1.67 1.67 0 .92-.75 1.67-1.67 1.67-.56 0-1.11-.31-1.4-.85l-.76.76c.57.96 1.57 1.54 2.58 1.54 1.84 0 3.33-1.49 3.33-3.33s-1.49-3.33-3.33-3.33c-1.01 0-2.01.58-2.58 1.54z"/>
                        </svg>
                        <span class="text-stone-800 dark:text-stone-200 text-sm font-medium">Play Store</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>

微交互徽章组件

一个复杂的响应式徽章组件，具有柔和的色彩，专为咨询/服务而设计，具有悬停微交互和深色模式支持。每个徽章在悬停时都会略微展开，以显示更多上下文。

打开预览

                <div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen p-8 sm:p-12 font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-6 sm:mb-8 text-purple-800 dark:text-purple-300">
      Our Expertise
    </h2>
    <p class="text-lg sm:text-xl text-center mb-12 max-w-2xl mx-auto text-gray-600 dark:text-gray-400">
      Explore the diverse areas where our strategic advice can elevate your business. Hover to learn more.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">

      <!-- Badge 1: Strategic Planning -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-purple-200 dark:border-purple-800 focus-within:ring-4 focus-within:ring-purple-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-purple-100 dark:bg-purple-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-purple-600 dark:text-purple-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-purple-700 dark:text-purple-300">
            Strategic Planning
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Crafting tailored roadmaps for sustainable growth and market leadership.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Strategic Planning"></a>
      </div>

      <!-- Badge 2: Digital Transformation -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-blue-200 dark:border-blue-800 focus-within:ring-4 focus-within:ring-blue-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-blue-100 dark:bg-blue-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v10c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM10 4h4v2h-4V4zm4 14H6V8h8v10z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-blue-700 dark:text-blue-300">
            Digital Transformation
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Guiding your business through technological evolution for efficiency and innovation.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Digital Transformation"></a>
      </div>

      <!-- Badge 3: Operational Excellence -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-green-200 dark:border-green-800 focus-within:ring-4 focus-within:ring-green-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-green-100 dark:bg-green-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-green-700 dark:text-green-300">
            Operational Excellence
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Streamlining processes and optimizing workflows for peak performance and reduced costs.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Operational Excellence"></a>
      </div>

      <!-- Badge 4: Market Research & Analytics -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-yellow-200 dark:border-yellow-800 focus-within:ring-4 focus-within:ring-yellow-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-yellow-100 dark:bg-yellow-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.5 10H15v2h-1.5zM10.5 10h1.5v2h-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-3-11h1.5v4H9v-4zm-3 0h1.5v4H6v-4z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-yellow-700 dark:text-yellow-300">
            Market Research
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Providing deep insights into market trends and customer behavior for informed decisions.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Market Research & Analytics"></a>
      </div>

      <!-- Badge 5: Financial Advisory -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-red-200 dark:border-red-800 focus-within:ring-4 focus-within:ring-red-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-red-100 dark:bg-red-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-red-600 dark:text-red-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2c1.38 0 2.5 1.12 2.5 2.5a2.5 2.5 0 01-5 0c0-1.38 1.12-2.5 2.5-2.5zm0 9.5c0 .83-.67 1.5-1.5 1.5S9 12.33 9 11.5 9.67 10 10.5 10s1.5.67 1.5 1.5zM13.5 13.5c0 .83-.67 1.5-1.5 1.5S11 14.33 11 13.5 11.67 12 12.5 12s1.5.67 1.5 1.5z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-red-700 dark:text-red-300">
            Financial Advisory
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Expert guidance on capital management, investments, and fiscal health.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Financial Advisory"></a>
      </div>

      <!-- Badge 6: Human Capital Management -->
      <div class="group relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-102 bg-white dark:bg-gray-850 border border-orange-200 dark:border-orange-800 focus-within:ring-4 focus-within:ring-orange-300">
        <div class="relative p-6 sm:p-8 flex flex-col items-center text-center">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-orange-100 dark:bg-orange-900 p-3 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110">
            <svg class="w-10 h-10 sm:w-12 sm:h-12 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.83 6-3.83s5.97 1.84 6 3.83c-1.29 1.94-3.5 3.22-6 3.22z"/>
            </svg>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-orange-700 dark:text-orange-300">
            Human Capital
          </h3>
          <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 absolute inset-x-0 bottom-0 pt-20 pb-6 bg-gradient-to-t from-white dark:from-gray-850 to-transparent flex items-end justify-center rounded-b-2xl">
            Developing and retaining top talent to fuel your organization's success.
          </p>
        </div>
        <a href="#" class="absolute inset-0 z-10" aria-label="Learn more about Human Capital Management"></a>
      </div>

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

俏皮的彩虹图组件（时尚/美容）

一个简单、有趣、多彩的图表组件，专为时尚和美容品牌设计，具有圆润元素、彩虹渐变和完全响应能力，并支持深色模式。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden p-6 sm:p-8 border border-purple-200 dark:border-purple-700">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 dark:from-pink-400 dark:via-purple-400 dark:to-indigo-400">
      Our Beauty Trends
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Chart 1: Sales Growth -->
      <div class="bg-gradient-to-br from-pink-100 via-red-100 to-orange-100 dark:from-pink-800 dark:via-red-800 dark:to-orange-800 p-6 rounded-2xl shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border border-pink-200 dark:border-pink-700">
        <h3 class="text-xl font-bold mb-4 text-pink-700 dark:text-pink-200">Product Popularity</h3>
        <div class="h-48 flex items-end justify-around" role="img" aria-label="Bar chart showing product popularity">
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-red-400 to-pink-500 dark:from-red-600 dark:to-pink-700 group-hover:from-red-500 group-hover:to-pink-600 h-28" style="height: 70%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Skincare</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-orange-400 to-yellow-500 dark:from-orange-600 dark:to-yellow-700 group-hover:from-orange-500 group-hover:to-yellow-600 h-36" style="height: 90%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Makeup</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-blue-400 to-green-500 dark:from-blue-600 dark:to-green-700 group-hover:from-blue-500 group-hover:to-green-600 h-24" style="height: 60%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Haircare</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-purple-400 to-indigo-500 dark:from-purple-600 dark:to-indigo-700 group-hover:from-purple-500 group-hover:to-indigo-600 h-32" style="height: 80%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Fragrance</span>
          </div>
        </div>
      </div>

      <!-- Chart 2: Customer Satisfaction -->
      <div class="bg-gradient-to-br from-green-100 via-blue-100 to-purple-100 dark:from-green-800 dark:via-blue-800 dark:to-purple-800 p-6 rounded-2xl shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border border-green-200 dark:border-green-700">
        <h3 class="text-xl font-bold mb-4 text-green-700 dark:text-green-200">Customer Delight Score</h3>
        <div class="h-48 flex items-center justify-center relative">
          <div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center relative overflow-hidden ring-4 ring-green-300 dark:ring-green-600">
            <div class="absolute inset-0 rounded-full" style="background-image: conic-gradient(from 0deg, #81e6d9 0%, #38a169 85%, #edf2f7 85%, #edf2f7 100%); clip-path: polygon(50% 0%, 50% 100%, 100% 100%, 100% 0%);"></div>
            <div class="absolute inset-0 rounded-full" style="clip-path: polygon(50% 0%, 50% 100%, 0% 100%, 0% 0%); background-color: #edf2f7; background-image: conic-gradient(from 180deg, #edf2f7 0%, transparent 0%);"></div>
            <div class="absolute w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-full bg-gradient-to-br from-green-500 to-teal-400 dark:from-green-700 dark:to-teal-600 flex items-center justify-center text-white text-3xl font-extrabold shadow-inner">
              85%
            </div>
          </div>
        </div>
        <p class="text-center mt-4 text-sm text-gray-700 dark:text-gray-300">Based on recent surveys</p>
      </div>
    </div>

    <!-- Fun Icons/Illustrations -->
    <div class="flex justify-around items-center pt-8 mt-8 border-t border-purple-200 dark:border-purple-700">
      <img src="https://picsum.photos/id/66/60/60" alt="Cosmetic bottle illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-pink-300 dark:border-pink-600 object-cover transform rotate-6 hover:rotate-0 transition-transform duration-300">
      <img src="https://picsum.photos/id/29/60/60" alt="Makeup brush illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-yellow-300 dark:border-yellow-600 object-cover transform -rotate-12 hover:rotate-0 transition-transform duration-300">
      <img src="https://picsum.photos/id/105/60/60" alt="Flower illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-blue-300 dark:border-blue-600 object-cover transform rotate-3 hover:transform-rotate-0 transition-transform duration-300">
    </div>
  </div>
</div>

赛博朋克评论部分

一个简单的响应式评论部分组件，具有赛博朋克、未来主义霓虹灯美学和彩虹渐变配色方案，适用于旅行/旅游网站。包括深色模式支持。

打开预览

                <section class="py-8 px-4 bg-gray-900 dark:bg-black text-white font-mono">
  <div class="max-w-xl mx-auto">
    <h2 class="text-2xl md:text-3xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 dark:from-red-300 dark:via-yellow-200 dark:to-green-300">
      Traveler Echoes
    </h2>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-fuchsia-500 dark:border-cyan-400 object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-aqua-400 dark:text-lime-300">Aisha_Voyager</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">2 days ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "The neon-lit streets of Neo-Kyoto were an absolute dream! Navigating the floating sky-trams with the city's hum was an experience beyond words. Highly recommend for any adventurer seeking a true urban spectacle."
      </p>
    </div>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-500 dark:border-yellow-400 object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-blue-400 dark:text-purple-300">Synth_Nomad</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">4 days ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "Just completed the 'Andromeda Nebula' virtual reality tour. The hyper-accurate simulations of the exoplanets were breathtaking. It felt incredibly real, almost like I was truly there. A must-do for space enthusiasts!"
      </p>
    </div>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-yellow-400 dark:border-red-400 object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-pink-400 dark:text-orange-300">Glitch_Queen</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">1 week ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "The 'Digital Sahara' desert trek was surprisingly intense, even through a haptic suit. The bioluminescent cacti at night were mesmerizing. Pack plenty of virtual hydration, you'll need it!"
      </p>
    </div>

    <div class="mt-8">
      <h3 class="text-xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 dark:from-red-300 dark:via-yellow-200 dark:to-green-300">
        Leave Your Echo
      </h3>
      <textarea class="w-full p-3 mb-4 rounded-lg bg-gray-800 dark:bg-gray-950 border border-gray-700 dark:border-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-blue-400 placeholder-gray-500 dark:placeholder-gray-600 resize-none" rows="4" placeholder="Share your travel experiences..."></textarea>
      <button class="w-full md:w-auto px-6 py-3 rounded-lg font-bold text-white shadow-lg 
                      bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 
                      hover:from-purple-700 hover:via-pink-600 hover:to-red-600 
                      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 
                      dark:from-blue-600 dark:via-cyan-500 dark:to-green-500 
                      dark:hover:from-blue-700 dark:hover:via-cyan-600 dark:hover:to-green-600 
                      dark:focus:ring-blue-400 dark:focus:ring-offset-gray-900">
        Submit Echo
      </button>
    </div>
  </div>
</section>

Memphis_Muted_Infographics_Component_Government

政府/公共服务的信息图表组件，灵感来自孟菲斯设计，采用柔和/不饱和的配色方案。具有大胆的几何图形、俏皮的图案和响应式布局，并支持深色模式。直观地显示关键统计信息和信息。

打开预览

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-4 sm:p-8 lg:p-12">

  <div class="max-w-7xl mx-auto grid lg:grid-cols-3 gap-8">

    <!-- Main Title and Intro -->
    <div class="lg:col-span-3 text-center mb-8">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-4 text-blue-800 dark:text-blue-300 tracking-tight leading-tight relative z-10">
        <span class="block">Public Service Impact</span>
        <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-12 sm:w-64 sm:h-16 lg:w-96 lg:h-24 bg-yellow-400 dark:bg-yellow-600 rounded-full mix-blend-multiply opacity-30 transform rotate-3 z-0"></span>
      </h1>
      <p class="text-lg sm:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Understanding the reach and effectiveness of our community programs.
      </p>
    </div>

    <!-- Metric Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden p-6 sm:p-8 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div class="absolute top-0 right-0 w-24 h-24 sm:w-32 sm:h-32 bg-purple-200 dark:bg-purple-700 rounded-bl-full opacity-60 z-0"></div>
      <div class="absolute bottom-0 left-0 w-16 h-16 sm:w-24 sm:h-24 bg-green-200 dark:bg-green-700 rounded-tr-full opacity-60 z-0"></div>
      <div class="relative z-10">
        <svg class="h-12 w-12 text-blue-600 dark:text-blue-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-3-3H4a3 3 0 00-3 3v2h5M10 12a2 2 0 100-4 2 2 0 000 4zm7-4a2 2 0 100-4 2 2 0 000 4zm0 8a2 2 0 100-4 2 2 0 000 4zm-7 0a2 2 0 100-4 2 2 0 000 4zm7-4a2 2 0 100-4 2 2 0 000 4z" />
        </svg>
        <p class="text-sm text-gray-500 dark:text-gray-400 font-medium uppercase mb-1">Citizens Served</p>
        <p class="text-4xl font-bold mb-4 text-blue-700 dark:text-blue-300">2,500,000+</p>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Through various outreach and support programs across the nation.</p>
      </div>
    </div>

    <!-- Metric Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden p-6 sm:p-8 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div class="absolute top-0 left-0 w-24 h-24 sm:w-32 sm:h-32 bg-orange-200 dark:bg-orange-700 rounded-br-full opacity-60 z-0"></div>
      <div class="absolute bottom-0 right-0 w-16 h-16 sm:w-24 sm:h-24 bg-red-200 dark:bg-red-700 rounded-tl-full opacity-60 z-0"></div>
      <div class="relative z-10">
        <svg class="h-12 w-12 text-green-600 dark:text-green-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.09.289 2.158.647 3.197M12 21.056a11.955 11.955 0 01-8.618-3.04A12.007 12.007 0 002.944 12c.071-1.09.289-2.158.647-3.197m0 0l-1.042-1.042" />
        </svg>
        <p class="text-sm text-gray-500 dark:text-gray-400 font-medium uppercase mb-1">Programs Completed</p>
        <p class="text-4xl font-bold mb-4 text-green-700 dark:text-green-300">1,200+</p>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Successful initiatives ranging from education to public health.</p>
      </div>
    </div>

    <!-- Metric Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden p-6 sm:p-8 flex flex-col justify-between transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
      <div class="absolute top-0 right-0 w-24 h-24 sm:w-32 sm:h-32 bg-cyan-200 dark:bg-cyan-700 rounded-bl-full opacity-60 z-0"></div>
      <div class="absolute bottom-0 left-0 w-16 h-16 sm:w-24 sm:h-24 bg-yellow-200 dark:bg-yellow-700 rounded-tr-full opacity-60 z-0"></div>
      <div class="relative z-10">
        <svg class="h-12 w-12 text-purple-600 dark:text-purple-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2v2.219c-.554.168-1 .593-1 1.28V16h8l-.75-1.5-.25-.5H14c-1.657 0-3-.895-3-2V10c0-1.105.895-2 2-2h4V6H7v2h5z" />
        </svg>
        <p class="text-sm text-gray-500 dark:text-gray-400 font-medium uppercase mb-1">Volunteers Engaged</p>
        <p class="text-4xl font-bold mb-4 text-purple-700 dark:text-purple-300">75,000+</p>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Dedicated individuals contributing their time and expertise.</p>
      </div>
    </div>

    <!-- Progress Bar Section -->
    <div class="lg:col-span-2 relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden p-6 sm:p-8 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl border-dashed border-2 border-gray-300 dark:border-gray-700">
        <div class="absolute top-4 left-4 w-12 h-12 sm:w-16 sm:h-16 bg-red-300 dark:bg-red-800 rounded-full opacity-40 mix-blend-multiply"></div>
        <div class="absolute bottom-4 right-4 w-8 h-8 sm:w-12 sm:h-12 bg-yellow-300 dark:bg-yellow-800 rounded-xl rotate-45 opacity-40 mix-blend-multiply"></div>
        <div class="relative z-10">
            <h3 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-100">Key Initiative Progress</h3>

            <div class="mb-6">
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Sustainable Community Project</p>
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
                    <div class="bg-blue-500 dark:bg-blue-600 h-full rounded-full" style="width: 85%;">
                        <span class="absolute right-2 text-white text-xs font-bold leading-none select-none">85%</span>
                    </div>
                    <div class="absolute top-0 right-0 bottom-0 left-0 border-2 border-white dark:border-gray-800 rounded-full"></div>
                </div>
            </div>

            <div class="mb-6">
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Digital Literacy Campaign</p>
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
                    <div class="bg-green-500 dark:bg-green-600 h-full rounded-full" style="width: 60%;">
                        <span class="absolute right-2 text-white text-xs font-bold leading-none select-none">60%</span>
                    </div>
                    <div class="absolute top-0 right-0 bottom-0 left-0 border-2 border-white dark:border-gray-800 rounded-full"></div>
                </div>
            </div>

            <div>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Youth Mentorship Program</p>
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
                    <div class="bg-purple-500 dark:bg-purple-600 h-full rounded-full" style="width: 92%;">
                        <span class="absolute right-2 text-white text-xs font-bold leading-none select-none">92%</span>
                    </div>
                     <div class="absolute top-0 right-0 bottom-0 left-0 border-2 border-white dark:border-gray-800 rounded-full"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Testimonial/Quote Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden p-6 sm:p-8 flex flex-col justify-center items-center text-center transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900 dark:to-pink-900 opacity-40"></div>
        <div class="relative z-10">
            <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Community Member Avatar" class="w-20 h-20 rounded-full object-cover mx-auto mb-4 border-4 border-white dark:border-gray-800 shadow-md">
            <p class="text-xl italic text-gray-700 dark:text-gray-200 mb-4">
                "Their programs truly made a difference in my family's life. We are grateful for the support."
            </p>
            <p class="font-semibold text-blue-800 dark:text-blue-300">Maria Rodriguez</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Local Resident & Program Beneficiary</p>
        </div>
    </div>

    <!-- Information Grid (Simple statistics with icons) -->
    <div class="lg:col-span-3 grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8">

      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 text-center overflow-hidden transform transition-all duration-300 hover:scale-[1.03]">
        <div class="absolute top-0 left-0 w-full h-full bg-purple-100 dark:bg-purple-900 opacity-30 mix-blend-multiply z-0 rounded-xl"></div>
        <div class="relative z-10">
          <svg class="h-10 w-10 text-purple-600 dark:text-purple-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.523 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.523 18.246 18 16.5 18c-1.747 0-3.332.477-4.5 1.253" /></svg>
          <p class="text-3xl font-bold text-purple-700 dark:text-purple-300 mb-1">1500+</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Workshops Held</p>
        </div>
      </div>

      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 text-center overflow-hidden transform transition-all duration-300 hover:scale-[1.03]">
        <div class="absolute top-0 left-0 w-full h-full bg-red-100 dark:bg-red-900 opacity-30 mix-blend-multiply z-0 rounded-xl"></div>
        <div class="relative z-10">
          <svg class="h-10 w-10 text-red-600 dark:text-red-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z" /></svg>
          <p class="text-3xl font-bold text-red-700 dark:text-red-300 mb-1">$10M</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">in Aid Distributed</p>
        </div>
      </div>

      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 text-center overflow-hidden transform transition-all duration-300 hover:scale-[1.03]">
        <div class="absolute top-0 left-0 w-full h-full bg-blue-100 dark:bg-blue-900 opacity-30 mix-blend-multiply z-0 rounded-xl"></div>
        <div class="relative z-10">
          <svg class="h-10 w-10 text-blue-600 dark:text-blue-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M12 20.005v-2.19m0 0A10.005 10.005 0 0110 10c0-4.418 3.582-8 8-8s8 3.582 8 8a10.005 10.005 0 01-2.005 6L20 18l-.75-1.5-.25-.5H14c-1.657 0-3-.895-3-2V10c0-1.105.895-2 2-2h4V6H7v2h5z" /> </svg>
          <p class="text-3xl font-bold text-blue-700 dark:text-blue-300 mb-1">95%</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Satisfaction Rate</p>
        </div>
      </div>

      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 text-center overflow-hidden transform transition-all duration-300 hover:scale-[1.03]">
        <div class="absolute top-0 left-0 w-full h-full bg-green-100 dark:bg-green-900 opacity-30 mix-blend-multiply z-0 rounded-xl"></div>
        <div class="relative z-10">
          <svg class="h-10 w-10 text-green-600 dark:text-green-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
          <p class="text-3xl font-bold text-green-700 dark:text-green-300 mb-1">50+</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Community Partners</p>
        </div>
      </div>

    </div>

    <!-- Image with caption -->
    <div class="lg:col-span-3 relative bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden flex flex-col md:flex-row transform transition-all duration-300 hover:scale-[1.01] hover:shadow-xl">
      <div class="md:w-1/2 overflow-hidden">
        <img src="https://picsum.photos/id/40/800/600" alt="Community event" class="object-cover w-full h-64 md:h-full transform transition-transform duration-500 hover:scale-110">
      </div>
      <div class="md:w-1/2 p-6 sm:p-8 flex flex-col justify-center relative">
        <div class="absolute top-4 right-4 w-16 h-16 bg-blue-200 dark:bg-blue-700 rounded-full opacity-50 mix-blend-multiply"></div>
        <div class="absolute bottom-4 left-4 w-12 h-12 bg-lime-200 dark:bg-lime-700 rounded-xl rotate-12 opacity-50 mix-blend-multiply"></div>
        <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4 relative z-10">Engaging Our Communities</h3>
        <p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg relative z-10">
          From local workshops to large-scale events, we are constantly working to foster stronger bonds and address direct community needs. Our initiatives are designed with direct input from citizens.
        </p>
      </div>
    </div>

  </div>
</div>

Industrial_Agriculture_Hamburger_Menu

一个复杂的工业主题汉堡菜单组件，具有温暖的“日落”配色方案，专为农业/农业网站设计。具有公开元素、原始材质美学和多个交互式元素，完全响应暗模式支持。

打开预览

                <div class="relative bg-gradient-to-br from-orange-600 via-red-700 to-yellow-600 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-900 text-stone-100 dark:text-stone-300 md:rounded-lg shadow-xl overflow-hidden">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="font-black text-2xl tracking-tighter uppercase text-stone-900 dark:text-orange-500 hover:text-stone-800 dark:hover:text-orange-400 transition duration-300">Agri<span class="text-stone-100 dark:text-white">Connect</span></a>
      <span class="hidden md:block text-stone-900 text-opacity-70 dark:text-orange-200 dark:text-opacity-50 text-sm italic">Cultivating the Future</span>
    </div>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Dashboard</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Farms</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Crops</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Analytics</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Marketplace</a>
    </nav>

    <!-- User Actions and Mobile Toggle -->
    <div class="flex items-center space-x-4">
      <div class="hidden md:flex items-center space-x-3">
        <button class="p-2 rounded-full ring-2 ring-stone-900 dark:ring-orange-500 text-stone-900 dark:text-orange-500 hover:bg-stone-900 hover:text-orange-300 dark:hover:bg-orange-500 dark:hover:text-stone-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-stone-900 dark:focus:ring-orange-500">
          <svg class="w-5 h-5" 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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
        </button>
        <div class="relative group">
          <img class="w-8 h-8 rounded-full ring-2 ring-stone-900 dark:ring-orange-500 cursor-pointer object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-stone-800 dark:bg-stone-900 border border-stone-700 dark:border-stone-800 rounded-md shadow-lg py-1 z-20 transition-opacity duration-300 opacity-0 group-hover:opacity-100">
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Settings</a>
            <div class="border-t border-stone-700 dark:border-stone-800 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Sign Out</a>
          </div>
        </div>
      </div>
      
      <button id="mobile-menu-button" class="md:hidden p-2 rounded-md ring-2 ring-stone-900 dark:ring-orange-500 text-stone-900 dark:text-orange-500 hover:bg-stone-900 hover:text-orange-300 dark:hover:bg-orange-500 dark:hover:text-stone-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-stone-900 dark:focus:ring-orange-500">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path id="mobile-menu-icon-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          <path id="mobile-menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default) -->
  <nav id="mobile-menu" class="hidden md:hidden absolute left-0 w-full bg-stone-900 dark:bg-stone-950/95 border-t border-stone-800 dark:border-stone-800 py-4 z-10 animate-fade-in-down">
    <div class="px-4 flex flex-col space-y-4">
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Dashboard</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Farms</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Crops</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Analytics</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Marketplace</a>
      
      <div class="pt-4 border-t border-stone-800 dark:border-stone-700 mt-4 flex flex-col space-y-3">
        <a href="#" class="flex items-center space-x-2 py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">
          <img class="w-7 h-7 rounded-full ring-1 ring-orange-500 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <span>My Profile</span>
        </a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Notifications</a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Settings</a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Sign Out</a>
      </div>
    </div>
  </nav>

  <!-- Simple toggle script for demonstration, in a real app this would be in a JS file -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const button = document.getElementById('mobile-menu-button');
      const menu = document.getElementById('mobile-menu');
      const iconOpen = document.getElementById('mobile-menu-icon-open');
      const iconClose = document.getElementById('mobile-menu-icon-close');

      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        iconOpen.classList.toggle('hidden');
        iconClose.classList.toggle('hidden');
      });
    });
  </script>
</div>

注册表组件

一个响应式预订/预订注册表组件，具有深色模式 UI 和霓虹灯/电色方案，专为预约和预订系统设计。

打开预览

                <div class="min-h-screen bg-gray-950 dark:bg-black p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="max-w-md w-full bg-gray-900 dark:bg-gray-900 rounded-lg shadow-2xl p-6 sm:p-8 border border-purple-700 dark:border-purple-600 animate-fade-in">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-white text-center mb-6 sm:mb-8 tracking-wide animate-pulse-light">
      Book Your Spot
    </h2>
    <p class="text-center text-gray-400 mb-6 sm:mb-8 text-sm sm:text-base">
      Fill out the form below to reserve your appointment.
    </p>

    <form class="space-y-4 sm:space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-medium text-purple-400 mb-2">Full Name</label>
        <input type="text" id="full-name" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="John Doe" required>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-purple-400 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 border border-transparent focus:border-blue-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="[email protected]" required>
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium text-purple-400 mb-2">Phone Number</label>
        <input type="tel" id="phone" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-pink-400 border border-transparent focus:border-pink-400 placeholder-gray-500 transition duration-300 ease-in-out" placeholder="+1 (555) 123-4567">
      </div>

      <div>
        <label for="date" class="block text-sm font-medium text-purple-400 mb-2">Preferred Date</label>
        <input type="date" id="date" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 transition duration-300 ease-in-out" required>
      </div>

      <div>
        <label for="time" class="block text-sm font-medium text-purple-400 mb-2">Preferred Time</label>
        <input type="time" id="time" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 border border-transparent focus:border-blue-400 transition duration-300 ease-in-out" required>
      </div>

      <div>
        <label for="service" class="block text-sm font-medium text-purple-400 mb-2">Service Type</label>
        <select id="service" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-pink-400 border border-transparent focus:border-pink-400 transition duration-300 ease-in-out" required>
          <option value="">Select a service</option>
          <option value="consultation">Consultation</option>
          <option value="repair">Repair</option>
          <option value="installation">Installation</option>
          <option value="maintenance">Maintenance</option>
        </select>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium text-purple-400 mb-2">Additional Notes (Optional)</label>
        <textarea id="message" rows="3" class="w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-400 border border-transparent focus:border-green-400 placeholder-gray-500 transition duration-300 ease-in-out resize-y" placeholder="Any specific requests or details..."></textarea>
      </div>

      <button type="submit" class="w-full flex items-center justify-center p-3 text-lg font-semibold rounded-md bg-gradient-to-r from-purple-600 to-blue-500 text-white hover:from-purple-700 hover:to-blue-600 focus:outline-none focus:ring-4 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 animate-gradient-hover">
        Confirm Booking
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </form>

    <p class="text-center text-gray-500 text-xs sm:text-sm mt-8">
      Need help? <a href="#" class="text-purple-400 hover:underline">Contact support</a>
    </p>
  </div>
</div>

<style>
  /* Adding a subtle animation for the form as it loads */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.7s ease-out forwards;
  }

  /* Neon light effect for the title */
  @keyframes pulse-light {
    0%, 100% { text-shadow: 0 0 5px #e879f9, 0 0 10px #e879f9, 0 0 15px #c084fc; }
    50% { text-shadow: 0 0 7px #d946ef, 0 0 12px #d946ef, 0 0 17px #a78bfa; }
  }
  .animate-pulse-light {
    animation: pulse-light 3s infinite alternate;
  }

  /* Button hover effect - inspired by gradients */
  @keyframes gradient-hover {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  .animate-gradient-hover:hover {
    background-size: 200% auto;
    animation: gradient-hover 3s ease-in-out infinite alternate;
  }
</style>

注册表组件

响应式注册表组件，具有工业但甜美的配色方案，适用于非营利组织/慈善组织，具有裸露的元素和实用主义美学。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-zinc-200 dark:bg-zinc-900 p-4 font-mono select-none">
  <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-xl p-8 max-w-lg w-full transform transition-all duration-300 ease-in-out
              border-4 border-dashed border-pink-400 dark:border-pink-600
              hover:shadow-2xl hover:border-solid hover:border-pink-500 dark:hover:border-pink-700">
    <div class="text-center mb-8">
      <h2 class="text-4xl md:text-5xl font-extrabold text-pink-500 dark:text-pink-400 mb-2 tracking-tighter uppercase leading-none">
        Join Us!
      </h2>
      <p class="text-zinc-600 dark:text-zinc-400 text-lg md:text-xl font-medium tracking-wide leading-tight">
        Register for a Sweet Cause
      </p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Full Name
        </label>
        <input type="text" id="full-name" placeholder="John Doe" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Full Name" required>
      </div>

      <div>
        <label for="email-address" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Email Address
        </label>
        <input type="email" id="email-address" placeholder="[email protected]" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Email Address" required>
      </div>

      <div>
        <label for="password" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Password
        </label>
        <input type="password" id="password" placeholder="Minimum 8 characters" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Password" required>
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-bold text-zinc-700 dark:text-zinc-300 mb-2 uppercase tracking-tight">
          Confirm Password
        </label>
        <input type="password" id="confirm-password" placeholder="Repeat your password" class="w-full p-3 bg-zinc-100 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200
                     border-2 border-zinc-300 dark:border-zinc-600 rounded-md
                     focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 focus:border-mint-500 dark:focus:border-mint-400
                     transition-all duration-200 ease-in-out placeholder-zinc-500 dark:placeholder-zinc-400 font-medium tracking-wider"
               aria-label="Confirm Password" required>
      </div>

      <div class="flex items-start">
        <input id="terms-and-conditions" type="checkbox" class="h-5 w-5 rounded-sm text-pink-500 dark:text-pink-600 bg-zinc-100 dark:bg-zinc-700
                      border-2 border-zinc-300 dark:border-zinc-600 focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700 checked:bg-pink-500 dark:checked:bg-pink-600
                      transition-all duration-200 ease-in-out cursor-pointer">
        <label for="terms-and-conditions" class="ml-3 block text-sm text-zinc-600 dark:text-zinc-400 font-medium tracking-wide cursor-pointer">
          I agree to the
          <a href="#" class="text-pink-500 dark:text-pink-400 hover:underline hover:text-pink-700 dark:hover:text-pink-300 transition-colors duration-200">Terms & Conditions</a>
        </label>
      </div>

      <button type="submit" class="w-full py-3 px-6 rounded-md
                      bg-pink-500 text-white dark:bg-pink-600 dark:text-white
                      font-extrabold text-lg uppercase tracking-widest
                      border-b-4 border-r-4 border-pink-700 dark:border-pink-800
                      hover:bg-pink-600 dark:hover:bg-pink-700
                      active:translate-y-0.5 active:translate-x-0.5 active:border-0 active:border-b-0 active:border-r-0
                      focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700
                      transition-all duration-200 ease-in-out shadow-lg hover:shadow-xl"
              aria-label="Register">
        Register
      </button>
    </form>

    <div class="mt-8 text-center text-zinc-600 dark:text-zinc-400 text-sm">
      Already have an account?
      <a href="#" class="text-mint-500 dark:text-mint-400 hover:underline hover:text-mint-700 dark:hover:text-mint-300 transition-colors duration-200 font-bold">
        Log In
      </a>
    </div>

    <div class="mt-8 text-center text-zinc-500 dark:text-zinc-600 text-xs italic opacity-80">
      <p>Building a better tomorrow, one sweet step at a time.</p>
    </div>
  </div>
</div>

Neumorphic 导航栏

一个简单、响应迅速的中态导航栏，专为约会/社交平台设计，使用支持深色模式的森林/绿色调色板。

打开预览

                <nav class="p-4 bg-lime-100 dark:bg-emerald-900 shadow-neumorphic-light dark:shadow-neumorphic-dark flex flex-col md:flex-row justify-between items-center rounded-2xl max-w-7xl mx-auto my-8">
  <div class="flex items-center space-x-2 mb-4 md:mb-0">
    <svg class="w-8 h-8 text-emerald-700 dark:text-lime-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
    </svg>
    <span class="text-2xl font-bold text-emerald-800 dark:text-lime-200 font-serif">LoveLink</span>
  </div>
  <ul class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-lg font-medium text-emerald-700 dark:text-lime-300">
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Discover
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Messages
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Profile
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Settings
      </a>
    </li>
  </ul>
</nav>

<style>
  /* Neumorphic Shadows - You would typically configure these in your tailwind.config.js */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #104e3b, -6px -6px 12px #268a6f;
  }

  .shadow-neumorphic-inner-light {
    box-shadow: inset 3px 3px 6px #9acd32, inset -3px -3px 6px #e0ffe0;
  }
  .dark .shadow-neumorphic-inner-dark {
    box-shadow: inset 3px 3px 6px #104e3b, inset -3px -3px 6px #268a6f;
  }

  .shadow-neumorphic-outer-light {
    box-shadow: 6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0;
  }
  .dark .shadow-neumorphic-outer-dark {
    box-shadow: 6px 6px 12px #104e3b, -6px -6px 12px #268a6f;
  }

  /* You'd add these custom styles to your tailwind.config.js extends section for shadows. */
  /* Example tailwind.config.js snippet: */
  /*
  module.exports = {
    theme: {
      extend: {
        colors: {
          'lime-100': '#f0fff0',
          'emerald-900': '#1a5f4a',
          'emerald-700': '#047857',
          'emerald-800': '#065f46',
          'lime-200': '#d9f99d',
          'lime-300': '#bef264',
          'emerald-500': '#10b981',
        },
        boxShadow: {
          'neumorphic-light': '6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0',
          'neumorphic-dark': '6px 6px 12px #104e3b, -6px -6px 12px #268a6f',
          'neumorphic-inner-light': 'inset 3px 3px 6px #9acd32, inset -3px -3px 6px #e0ffe0',
          'neumorphic-inner-dark': 'inset 3px 3px 6px #104e3b, inset -3px -3px 6px #268a6f',
          'neumorphic-outer-light': '6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0',
          'neumorphic-outer-dark': '6px 6px 12px #104e3b, -6px -6px 12px #268a6f',
        }
      }
    },
    plugins: [],
  }
  */
</style>

1 ... 56 57 58 59 60 ... 335