Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Wishlist_Component

Un composant de liste de souhaits réactif et artistique pour les applications de sport/fitness, doté d’une palette de couleurs vert forêt, avec des textures douces et peintes et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased text-gray-900 bg-emerald-50 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.005]">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-emerald-100 dark:border-gray-700">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-900 dark:text-emerald-100 mb-4 tracking-tight drop-shadow-md">Your Fitness Wishlist</h2>
      <p class="text-lg text-emerald-700 dark:text-emerald-300 max-w-2xl leading-relaxed">
        Curate your dream gear and activities. Add items you're eyeing or experiences you aspire to conquer.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Wishlist Item 1 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=1" alt="Trail Running Shoes" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Trail Running Shoes</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Lightweight, durable, and grippy for conquering any terrain. Essential for trail adventures.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$149.99</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=2" alt="Smart Sports Watch" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Smart Sports Watch</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Track your performance, heart rate, and GPS with this advanced fitness companion.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$299.00</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=3" alt="Yoga Mat" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Premium Yoga Mat</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Thick, non-slip, and eco-friendly. Perfect for deep stretches and challenging poses.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$59.50</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=4" alt="Resistance Bands Set" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Resistance Bands Set</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Versatile for strength training, stretching, and physical therapy. All levels.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$34.99</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 5 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=5" alt="Aero Cycling Helmet" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Aero Cycling Helmet</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Lightweight, aerodynamic design for speed and safety on your rides.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$99.00</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-emerald-500 group-hover:text-red-500 dark:text-emerald-300 dark:group-hover:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Wishlist Item 6 -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-300 transition-all duration-300 ease-in-out transform hover:scale-[1.02]">
        <img src="https://picsum.photos/400/250?random=6" alt="Hydration Backpack" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-5">
          <h3 class="text-2xl font-bold text-emerald-900 dark:text-emerald-100 mb-2">Hydration Backpack</h3>
          <p class="text-emerald-700 dark:text-emerald-300 text-sm mb-4 leading-snug">Stay hydrated on long runs or hikes with this lightweight, comfortable pack.</p>
          <div class="flex items-center justify-between">
            <span class="text-xl font-semibold text-emerald-800 dark:text-emerald-200">$75.00</span>
            <button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 dark:bg-emerald-500 dark:hover:bg-emerald-600">
              Add to Cart
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 text-red-500 dark:text-red-400 cursor-pointer transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-emerald-100 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center">
      <p class="text-emerald-700 dark:text-emerald-300 text-center sm:text-left mb-4 sm:mb-0">
        Ready to make your fitness dreams a reality? Start adding items!
      </p>
      <button class="px-8 py-3 bg-emerald-700 hover:bg-emerald-800 text-white font-bold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-emerald-600 dark:hover:bg-emerald-700">
        Discover More Gear
      </button>
    </div>
  </div>
</div>

Volet Indicateurs de progrès

Un composant complexe d’indicateur de progression avec des dégradés de couleurs neutres et froides, des transitions fluides et une progression en plusieurs étapes, adapté aux sites Web gouvernementaux/de services publics. Inclut la prise en charge du mode sombre et est entièrement réactif.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans text-gray-800 dark:text-gray-200 flex items-center justify-center">
  <div class="w-full max-w-5xl bg-white dark:bg-gray-850 shadow-xl rounded-xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-700 overflow-hidden">

    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-6 sm:mb-8 md:mb-10 text-gray-900 dark:text-gray-100 leading-tight">
      Application Progress Tracker
    </h2>

    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 mb-8 sm:mb-10 md:mb-12">
      <!-- Step Navigation -->
      <div class="flex flex-col sm:flex-row lg:flex-col items-center lg:items-start w-full lg:w-auto mb-6 lg:mb-0">
        <div class="flex flex-wrap justify-center sm:justify-start lg:block space-x-2 sm:space-x-4 lg:space-x-0 lg:space-y-4 mb-4 lg:mb-0">
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-blue-600/10 text-blue-700 dark:bg-blue-400/20 dark:text-blue-300 shadow-sm hover:underline">
            <svg class="w-4 h-4 mr-2 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="block">Step 1: Personal Details</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-blue-500/5 text-blue-600 dark:bg-gray-700/50 dark:text-gray-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-600/10 dark:hover:bg-blue-400/20 shadow-sm">
            <svg class="w-4 h-4 mr-2 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 2: Address Information</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-gray-100 dark:bg-gray-750 text-gray-500 dark:text-gray-400 cursor-not-allowed">
            <svg class="w-4 h-4 mr-2 hidden sm:block" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 3: Document Upload</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-gray-100 dark:bg-gray-750 text-gray-500 dark:text-gray-400 cursor-not-allowed">
            <svg class="w-4 h-4 mr-2 hidden sm:block" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 4: Review and Submit</span>
          </a>
        </div>
      </div>

      <!-- Overall Progress Bar -->
      <div class="flex-1 w-full lg:w-auto lg:max-w-md">
        <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200 text-center lg:text-left">Overall Progress: 50% Complete</h3>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative">
          <div class="h-full bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full transition-all duration-500 ease-out"
               style="width: 50%;">
            <span class="sr-only">50% Complete</span>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-200">50%</span>
        </div>
      </div>
    </div>

    <!-- Current Step Details -->
    <div class="border-t border-gray-200 dark:border-gray-700 pt-6 sm:pt-8">
      <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Current Step: Personal Details</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        Please provide your basic personal information. All fields are required to proceed to the next step. Your data is securely handled and protected in accordance with government regulations.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 md:gap-8 mb-8">
        <div>
          <label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
          <input type="text" id="firstName" name="firstName" placeholder="e.g., John" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
          <input type="text" id="lastName" name="lastName" placeholder="e.g., Doe" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email" name="email" placeholder="e.g., [email protected]" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="dob" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date of Birth</label>
          <input type="date" id="dob" name="dob" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
      </div>

      <div class="flex justify-end gap-3">
        <button type="button" class="px-6 py-2 sm:py-2.5 rounded-md text-base font-medium 
          bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 
          hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 
          focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          Save Draft
        </button>
        <button type="button" class="px-6 py-2 sm:py-2.5 rounded-md text-base font-medium 
          bg-gradient-to-r from-blue-500 to-blue-700 text-white dark:from-blue-700 dark:to-blue-900 
          shadow-blue-500/30 hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          Next Step
        </button>
      </div>
    </div>
  </div>
</div>

Composant de nuage de balises pour l’agriculture/l’élevage

Un composant de nuage de balises minimaliste et réactif conçu pour les sites Web agricoles et agricoles, avec des couleurs neutres froides et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-4xl mx-auto font-sans text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center sm:text-left">
    Explore Farming Topics
  </h2>
  <div class="flex flex-wrap gap-2 sm:gap-3 justify-center sm:justify-start">
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌱</span> Crop Rotation
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🚜</span> Farm Machinery
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌾</span> Grain Storage
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">💧</span> Water Management
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐄</span> Livestock Care
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌎</span> Sustainable Farming
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐛</span> Pest Control
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">💰</span> Agricultural Economics
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🍎</span> Orchard Management
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">☀️</span> Climate Effects
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🔬</span> Soil Science
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐝</span> Pollination
    </a>
  </div>
</div>

ArtDeco_Neon_Photography_Navigation

Un composant de navigation simple et réactif pour les portfolios de photographie, avec des motifs géométriques inspirés de l’Art déco et une palette de couleurs néon/électrique vibrante avec prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-gradient-to-r from-purple-900 via-pink-800 to-indigo-900 dark:from-purple-950 dark:via-pink-900 dark:to-indigo-950 p-4 shadow-xl font-['Georgia',_serif]">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-white tracking-widest text-3xl font-bold uppercase select-none relative group">
      <span class="relative z-10">LUMINA</span>
      <span class="absolute inset-0 bg-gradient-to-br from-pink-500 to-blue-500 blur-sm opacity-0 group-hover:opacity-75 transition-opacity duration-300"></span>
      <span class="absolute inset-0 bg-gradient-to-br from-pink-400 to-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform group-hover:scale-105"></span>
    </a>

    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border-2 rounded text-white border-neon-blue-400 hover:text-neon-pink-400 hover:border-neon-pink-400 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-neon-blue-300">
        <svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/>
        </svg>
      </button>
    </div>

    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="navbar-default">
      <ul class="text-sm lg:flex flex-1 items-center lg:justify-end uppercase tracking-wide">
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-blue-300 transition-colors duration-300 px-4 py-2 relative group">
            Gallery
            <span class="block h-0.5 bg-neon-blue-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-pink-300 transition-colors duration-300 px-4 py-2 relative group">
            Portfolio
            <span class="block h-0.5 bg-neon-pink-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-green-300 transition-colors duration-300 px-4 py-2 relative group">
            About
            <span class="block h-0.5 bg-neon-green-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-yellow-300 transition-colors duration-300 px-4 py-2 relative group">
            Contact
            <span class="block h-0.5 bg-neon-yellow-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Composant de la barre de progression

Un composant de barre de progression simple et réactif avec l’influence du Material Design, utilisant des tons chauds de coucher de soleil. Idéal pour les applications technologiques/SaaS, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Upload Progress</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Uploading your files. Please wait...</p>

      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 sm:h-3.5 mb-2 relative overflow-hidden shadow-inner">
        <div class="bg-gradient-to-r from-red-500 to-orange-400 h-full rounded-full dark:from-red-600 dark:to-orange-500 transition-all duration-500 ease-out" style="width: 75%;"></div>
        <div class="absolute top-0 right-0 h-full w-4 bg-white dark:bg-gray-800 opacity-20 transform -skew-x-12" style="margin-left: -2px;"></div>
      </div>

      <div class="flex justify-between items-center text-sm font-medium text-gray-700 dark:text-gray-300">
        <span>75% Complete</span>
        <span>3 of 4 files</span>
      </div>

      <div class="mt-6 flex justify-end">
        <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md font-semibold text-sm hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-150 ease-in-out">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

Social_Media_Dashboard

Un composant complexe de tableau de bord de médias sociaux avec une esthétique monochromatique de Material Design, avec des mises en page basées sur une grille, des effets de profondeur et une réactivité avec prise en charge du mode sombre. Conçu pour les interfaces de réseaux sociaux.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen text-gray-900 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Main Content Area -->
    <div class="md:col-span-2 lg:col-span-3 flex flex-col gap-6">

      <!-- Top Navigation/Search -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 flex items-center space-x-4">
        <div class="relative flex-grow">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          <input type="text" placeholder="Search posts, friends, and more..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
        </div>
        <button class="p-2 rounded-full bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
          <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 17h.01M12 21v-4m-3 4v-4m0 0h6m-12 0H6m6 0C5.03 17 3 14.654 3 12S5.03 7 7.5 7h9C18.97 7 21 9.346 21 12s-2.03 5-4.5 5h-9z"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
        </button>
      </div>

      <!-- Create Post Widget -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4">Create New Post</h2>
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <input type="text" placeholder="What's on your mind?" class="flex-grow py-2 px-4 rounded-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
        </div>
        <div class="flex justify-between items-center">
          <div class="flex space-x-4">
            <button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
              <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6l.01 0M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
              <span class="text-sm hidden sm:block">Photo</span>
            </button>
            <button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
              <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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8V4a1 1 0 011-1h6a1 1 0 011 1v4M7 16v4a1 1 0 001 1h6a1 1 0 001-1v-4M4 8h16M4 16h16"></path></svg>
              <span class="text-sm hidden sm:block">Video</span>
            </button>
            <button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
              <span class="text-sm hidden sm:block">Location</span>
            </button>
          </div>
          <button class="px-6 py-2 bg-blue-600 text-white dark:bg-blue-500 dark:text-white rounded-full font-medium shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">
            Post
          </button>
        </div>
      </div>

      <!-- Feed Post - Example 1 (with image) -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <div class="flex items-center space-x-3 mb-4">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold">Jane Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Enjoying the beautiful autumn colors! Such a peaceful afternoon spent exploring the local park. #AutumnVibes #NatureLover</p>
        <img class="rounded-lg mb-4 w-full h-auto object-cover max-h-96" src="https://picsum.photos/800/500?random=1" alt="Post Image">
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
          <div class="flex space-x-6">
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <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="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>120</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span>45</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.552 3.546m-6.552-3.546L12 10.5m7.5-2.046l.758-.426M6.44 14.35H5.05M18 10a8 8 0 10-16 0V5a2 2 0 012-2h3a2 2 0 012 2v2.185a4.85 4.85 0 01-. .815a4.85 4.85 0 01-. .815"></path></svg>
              <span>15</span>
            </button>
          </div>
          <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition duration-150">View comments</button>
        </div>
      </div>

      <!-- Feed Post - Example 2 (text only) -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <div class="flex items-center space-x-3 mb-4">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold">John Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Just finished a great coding session! Feeling productive and ready to tackle the next challenge. #codinglife #developer</p>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
          <div class="flex space-x-6">
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <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="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>88</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span>30</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
              <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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.552 3.546m-6.552-3.546L12 10.5m7.5-2.046l.758-.426M6.44 14.35H5.05M18 10a8 8 0 10-16 0V5a2 2 0 012-2h3a2 2 0 012 2v2.185a4.85 4.85 0 01-. .815a4.85 4.85 0 01-. .815"></path></svg>
              <span>8</span>
            </button>
          </div>
          <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition duration-150">View comments</button>
        </div>
      </div>

    </div>

    <!-- Sidebar / Widgets Area -->
    <div class="md:col-span-1 lg:col-span-1 flex flex-col gap-6">

      <!-- Profile Card -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 text-center">
        <img class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Avatar">
        <h3 class="text-xl font-semibold mb-1">Alex Johnson</h3>
        <p class="text-gray-600 dark:text-gray-400">Web Developer | Enthusiast</p>
        <div class="flex justify-around items-center mt-4 border-t border-b border-gray-200 dark:border-gray-700 py-3">
          <div>
            <p class="font-semibold text-lg">1.2K</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div>
            <p class="font-semibold text-lg">500</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div>
            <p class="font-semibold text-lg">89</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="mt-4 w-full px-4 py-2 bg-blue-600 text-white dark:bg-blue-500 dark:text-white rounded-full font-medium shadow hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">
          View Profile
        </button>
      </div>

      <!-- Trending Topics Widget -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-xl font-semibold mb-4">Trending Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#1</span> #AIRevolution <span class="text-xs text-gray-500 dark:text-gray-400">(1.5M posts)</span></a></li>
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#2</span> #FrontendDev <span class="text-xs text-gray-500 dark:text-gray-400">(980K posts)</span></a></li>
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#3</span> #SustainableLiving <span class="text-xs text-gray-500 dark:text-gray-400">(720K posts)</span></a></li>
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#4</span> #TravelGoals <span class="text-xs text-gray-500 dark:text-gray-400">(600K posts)</span></a></li>
          <li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#5</span> #HealthAndFitness <span class="text-xs text-gray-500 dark:text-gray-400">(550K posts)</span></a></li>
        </ul>
      </div>

      <!-- Who to Follow Widget -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-xl font-semibold mb-4">Who to Follow</h3>
        <ul class="space-y-4">
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
              <div>
                <p class="font-semibold">Sarah Green</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">@sarah_g</p>
              </div>
            </div>
            <button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
              Follow
            </button>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/25.jpg" alt="User Avatar">
              <div>
                <p class="font-semibold">David Lee</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">@davidd_lee</p>
              </div>
            </div>
            <button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
              Follow
            </button>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
              <div>
                <p class="font-semibold">Emily Chen</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">@emily_c</p>
              </div>
            </div>
            <button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
              Follow
            </button>
          </li>
        </ul>
      </div>

    </div>

  </div>
</div>

Composant du système d’évaluation

Un composant de système d’évaluation simple et attrayant conçu avec des tons riches et précieux, fournissant un retour d’information de micro-interaction pour la documentation et les sites de base de connaissances. Entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 text-center mb-6">
      How useful was this article?
    </h3>
    <div class="flex justify-center space-x-2 sm:space-x-3 mb-6">
      <button aria-label="1 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-red-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-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-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="2 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-orange-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-orange-500 group-hover:text-orange-600 dark:text-orange-400 dark:group-hover:text-orange-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-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-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="3 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-amber-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-amber-500 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-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-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="4 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-emerald-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-emerald-500 group-hover:text-emerald-600 dark:text-emerald-400 dark:group-hover:text-emerald-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-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-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="5 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-indigo-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-indigo-500 group-hover:text-indigo-600 dark:text-indigo-400 dark:group-hover:text-indigo-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-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-.69L9.049 2.927z"></path>
        </svg>
      </button>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
      Click a star to rate
    </p>
  </div>
</div>

Composant de mise en page de grille de divertissement

Une grille épurée et minimaliste inspirée de la typographie suisse/internationale pour les plateformes de divertissement et de médias. Dispose d’une palette de couleurs triadique, d’une réactivité et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-900 py-8 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="container mx-auto">
    <div class="mb-8 text-center">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
        Featured Entertainment
      </h2>
      <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
        Explore our curated selection of movies, shows, and more.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Item 1 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=1" alt="Movie Still 1" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Grand Adventure</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A captivating journey through uncharted territories. (2023)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.8</span>
            <a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=2" alt="Movie Still 2" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">City of Echoes</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A thrilling mystery unfolding in a futuristic cityscape. (2022)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.5</span>
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=3" alt="Movie Still 3" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">Quantum Leap Series</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">Science fiction drama exploring alternate dimensions. (Series)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.9</span>
            <a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 4 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=4" alt="Movie Still 4" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Whispering Woods</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">An eerie tale of supernatural events in a secluded forest. (2023)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.3</span>
            <a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 5 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=5" alt="Movie Still 5" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">Cosmic Symphony</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A documentary exploring the mysteries of the universe. (2021)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.7</span>
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 6 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=6" alt="Movie Still 6" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">The Last Code</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A cyberpunk thriller set in a dystopian future. (2024)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.6</span>
            <a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant d’en-tête

Un composant d’en-tête réactif pour une plate-forme musicale/audio, doté d’une esthétique de conception monospace/développeur avec des tons de terre et la prise en charge du mode sombre.

Ouvrir Aperçu

                <header class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-md font-mono">
  <div class="container mx-auto px-4 py-4 flex items-center justify-between">
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M3 19l6 3V6m0 0l6-3m-6 3v13M3 19V6l6-3m0 0L3 6m0 0v13m0-13l6-3m0 3v13m0-13l-6 3m0 0L3 6m0 0l6-3" />
      </svg>
      <span class="text-xl font-bold tracking-tight text-amber-700 dark:text-amber-300">TuneFlow</span>
    </a>

    <nav class="hidden md:flex space-x-8 text-lg">
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Browse</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">My Music</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Radio</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Settings</a>
    </nav>

    <div class="flex items-center space-x-4">
      <div class="relative hidden md:block">
        <input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-stone-200 dark:bg-stone-800 text-stone-700 dark:text-stone-300 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 transition-all duration-300 w-48 lg:w-64">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>

      <button class="md:hidden focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 rounded-md p-1">
        <svg class="h-7 w-7 text-stone-700 dark:text-stone-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-amber-600 dark:border-amber-400 cursor-pointer object-cover hidden md:block">
    </div>
  </div>
</header>

Retour en haut de la page Composant du bouton

Un bouton simple et artistique « Retour en haut » conçu pour les sites Web d’alimentation/restaurants, avec une esthétique en niveaux de gris inspirée de l’aquarelle. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <a href="#" aria-label="Back to top" class="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-50 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 dark:focus:ring-gray-100">
  <div class="relative w-14 h-14 md:w-16 md:h-16 rounded-full overflow-hidden shadow-lg transform transition-all duration-300 group-hover:scale-110 group-active:scale-95 border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800">
    <!-- Artistic background layer -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-900 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      <!-- Example of a subtle watercolor texture effect (can be replaced with actual SVG or background image for more detail) -->
      <svg class="absolute inset-0 w-full h-full opacity-30 group-hover:opacity-50 transition-opacity duration-300" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <filter id="watercolorFilter" x="-50%" y="-50%" width="200%" height="200%">
            <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise" />
            <feDiffuseLighting in="noise" lighting-color="white" surfaceScale="2" result="light" />
            <feBlend in="SourceGraphic" in2="light" mode="overlay" />
          </filter>
        </defs>
        <rect width="100" height="100" fill="#fff" filter="url(#watercolorFilter)" class="dark:fill-gray-900"/>
      </svg>
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
      <svg class="w-8 h-8 md:w-9 md:h-9 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 group-hover:-translate-y-1 group-active:translate-y-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
    </div>
  </div>
</a>

1 ... 37 38 39 40 41 ... 335

Rechercher des composants

Catégories

Tous les composants