Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Composants de visualisation de données

Il s’agit d’un composant de réservation/réservation complexe et minimaliste avec une palette de couleurs néon/électrique, avec des éléments de visualisation de données tels qu’un calendrier et un sélecteur de créneaux horaires. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant complexe de navigation de pied de page inspiré de la 3D pour les plates-formes musicales/audio, avec des neutres chauds et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant Microinteractions Badges

Un composant de badges complexe et réactif aux couleurs pastel, conçu pour le conseil/les services, avec des micro-interactions au survol et la prise en charge du mode sombre. Chaque badge s’agrandit légèrement au survol pour révéler plus de contexte.

Ouvrir Aperçu

                <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>

Composant Graphiques arc-en-ciel ludiques (mode/beauté)

Un composant de graphiques simple, ludique et coloré conçu pour les marques de mode et de beauté, avec des éléments arrondis, des dégradés arc-en-ciel et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

CyberpunkCommentairesSection

Un composant simple et réactif de la section des commentaires avec une esthétique cyberpunk et futuriste et un dégradé de couleurs arc-en-ciel, adapté aux sites Web de voyage / tourisme. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant infographique pour le gouvernement/les services publics, inspiré du design de Memphis avec une palette de couleurs sourdes/désaturées. Présente des géométries audacieuses, des motifs ludiques et une mise en page réactive avec prise en charge du mode sombre. Affiche visuellement les statistiques et les informations clés.

Ouvrir Aperçu

                <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

Un composant de menu de hamburger complexe, à thème industriel, avec une palette de couleurs chaudes « coucher de soleil », conçu pour les sites Web d’agriculture. Comprend des éléments exposés, une esthétique de matière première et de multiples éléments interactifs, entièrement réactifs avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un composant de formulaire de réservation/inscription réactif avec une interface utilisateur en mode sombre et une palette de couleurs néon/électrique, conçu pour les systèmes de rendez-vous et de réservation.

Ouvrir Aperçu

                <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>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif avec une palette de couleurs à la fois industrielle et sucrée, adapté aux organisations à but non lucratif / caritatives, avec des éléments exposés et une esthétique utilitaire.

Ouvrir Aperçu

                <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>

Barre de navigation neumorphe

Une barre de navigation neumorphique simple et réactive conçue pour les plateformes de rencontres/sociales, utilisant une palette de couleurs forêt/vert avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Rechercher des composants

Catégories

Tous les composants