Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de panier d’achat

Un composant de panier d’achat réactif avec des effets de néon/lueur et une palette de couleurs bleues d’entreprise, prenant en charge le mode sombre. Comprend des listes de produits, des ajustements de quantité et un résumé complet.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden mb-8 transform transition-all duration-500 scale-95 md:scale-100
    dark:border dark:border-blue-700 dark:shadow-blue-500/30 shadow-lg">
    <div class="relative p-6 sm:p-8 bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-950 text-white
      before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-400/20 before:to-transparent before:animate-pulse-slow
      dark:before:from-blue-600/30 dark:before:to-transparent">
      <h2 class="relative z-10 text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight tracking-tight text-shadow-lg
        dark:text-blue-200 dark:shadow-blue-300/50">
        Your Shopping Cart
      </h2>
      <p class="relative z-10 text-lg sm:text-xl font-light opacity-90">
        Review your items before checkout.
      </p>
      <div class="absolute inset-0 pointer-events-none glowing-lines"></div>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">
        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">
              Ergonomic Wireless Mouse
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Color: Midnight Blue</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">1</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Premium USB-C Hub</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ports: 7-in-1</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">2</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$75.00</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <!-- Cart Item 3 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item3/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Noise-Cancelling Headphones</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Model: ProAudio 3000</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">1</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$199.99</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <div class="flex justify-between items-center mt-6">
          <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 flex items-center space-x-2 transition-colors duration-200
            py-2 px-4 rounded-lg border border-blue-400 dark:border-blue-700 hover:bg-blue-50 dark:hover:bg-blue-900 glow-on-hover">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            <span>Continue Shopping</span>
          </button>
          <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 flex items-center space-x-2 transition-colors duration-200
            py-2 px-4 rounded-lg border border-red-400 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900 glow-on-hover">
            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"/>
            </svg>
            <span>Clear Cart</span>
          </button>
        </div>
      </div>

      <!-- Order Summary -->
      <div class="lg:col-span-1 bg-gray-50 dark:bg-gray-700 rounded-lg p-4 sm:p-6 shadow-xl
        dark:border dark:border-blue-600/50 dark:shadow-blue-500/30
        relative overflow-hidden before:content-[''] before:absolute before:inset-0 before:bg-blue-500/10 before:blur-md before:animate-pulse-light">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight relative">Order Summary</h3>
        <div class="space-y-3 sm:space-y-4 text-lg text-gray-800 dark:text-gray-200 relative z-10">
          <div class="flex justify-between items-center">
            <span>Subtotal (4 items)</span>
            <span class="font-semibold">$400.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Shipping</span>
            <span class="font-semibold">$15.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Tax (8%)</span>
            <span class="font-semibold">$32.00</span>
          </div>
          <div class="h-px bg-gray-300 dark:bg-gray-600 my-4"></div>
          <div class="flex justify-between items-center font-bold text-xl sm:text-2xl text-blue-700 dark:text-blue-300">
            <span>Total</span>
            <span>$447.00</span>
          </div>
        </div>
        <button class="mt-6 w-full py-3 px-6 rounded-lg text-white font-bold text-lg sm:text-xl
          bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800
          focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
          transition-all duration-300 transform hover:scale-105 shadow-lg border border-blue-700 dark:border-blue-900
          relative overflow-hidden glowing-button">
          Proceed to Checkout
          <span class="absolute top-0 left-0 w-full h-full bg-blue-500 opacity-0 animate-pulse-effect"></span>
        </button>
        <p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400 relative z-10">
          Shipping calculated at next step.
        </p>
      </div>
    </div>
  </div>

  <!-- Tailwind JIT / Custom styles for glow effects -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 0.1; }
      50% { opacity: 0.3; }
    }
    @keyframes pulse-light {
      0%, 100% { opacity: 0.05; }
      50% { opacity: 0.15; }
    }
    @keyframes button-glow {
      0%, 100% { box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color), 0 0 15px var(--glow-color); }
      50% { box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color); }
    }
    @keyframes text-shadow-glow {
      0%, 100% { text-shadow: 0 0 2px rgba(255,255,255,0.7), 0 0 5px rgba(255,255,255,0.5); }
      50% { text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7); }
    }
    @keyframes pulse-effect {
      0% { transform: scale(0); opacity: 0.5; }
      100% { transform: scale(1); opacity: 0; }
    }

    .animate-pulse-slow { animation: pulse-slow 5s infinite ease-in-out; }
    .animate-pulse-light { animation: pulse-light 4s infinite ease-in-out; }
    .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .dark .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.4); }

    .dark .text-shadow-glow {
      text-shadow: 0 0 5px #60A5FA, 0 0 10px #3B82F6;
      animation: text-shadow-glow 3s infinite alternate;
    }
    .glowing-button {
      --glow-color: #3B82F6;
      transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .dark .glowing-button {
      --glow-color: #60A5FA;
      box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color) !important;
    }
    .glowing-button:hover {
      box-shadow: 0 0 8px var(--glow-color), 0 0 15px var(--glow-color), 0 0 25px var(--glow-color) !important;
    }
    .dark .glowing-button:hover {
      box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color) !important;
    }
    .glowing-button:focus {
        box-shadow: 0 0 0 4px var(--glow-color), 0 0 10px var(--glow-color) !important;
    }

    .glow-on-hover {
      transition: box-shadow 0.3s, background-color 0.3s;
    }
    .glow-on-hover:hover {
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
    }
    .dark .glow-on-hover:hover {
      box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
    }

    .glowing-lines {
      pointer-events: none;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(circle at top left, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%),
                  radial-gradient(circle at bottom right, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%);
      filter: blur(10px);
      opacity: 0.6;
      animation: glowing-lines-effect 8s infinite alternate;
    }
    .dark .glowing-lines {
      background: radial-gradient(circle at top left, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%),
                  radial-gradient(circle at bottom right, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%);
    }
    @keyframes glowing-lines-effect {
      0% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.02); opacity: 0.7; }
      100% { transform: scale(1); opacity: 0.6; }
    }
    .animate-pulse-effect {
      animation: pulse-effect 1.5s infinite;
    }
  </style>
</div>

Job_Application_Data_Table

Un composant de tableau de données réactif et interactif pour les candidatures, conçu avec un style typographique suisse/international épuré et minimaliste et une palette de couleurs sourdes. Comprend le filtrage, le tri, la pagination et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-full mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden ring-1 ring-gray-200 dark:ring-gray-700">
    <div class="px-4 py-5 sm:px-6 flex flex-col sm:flex-row items-center justify-between border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-semibold leading-6 text-gray-900 dark:text-gray-100 mb-4 sm:mb-0">Job Applications</h2>
      <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
        <div class="relative w-full sm:w-64">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
          <input type="text" name="search" id="search" class="block w-full rounded-md border-0 py-1.5 pl-10 pr-3 text-gray-900 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:focus:ring-blue-400 sm:text-sm sm:leading-6" placeholder="Search...">
        </div>
        <button type="button" class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-100 dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600">
          <svg class="-ml-0.5 h-5 w-5 text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2.628 1.601C5.817 1.025 9.045 1 12.25 1h.062c3.21.002 6.425.042 9.619.117a.75.75 0 01.554.757l-.002.001c-.137 1.833-.217 3.666-.217 5.5V14.5c0 1.25.792 2.38 1.95 2.76A.75.75 0 0024 17.5V19c0 .828-.672 1.5-1.5 1.5H1.5C.672 20.5 0 19.828 0 19v-1.5a.75.75 0 00-.75-.75L-.75 2.5a.75.75 0 01.75-.75c.148 0 .292.016.435.045l.002-.001c.137-1.833.217-3.666.217-5.5V5.5c0-.828.672-1.5 1.5-1.5h17c.828 0 1.5.672 1.5 1.5v2c0 .828-.672 1.5-1.5 1.5H4.25c-.828 0-1.5.672-1.5 1.5v2c0 .828.672 1.5 1.5 1.5H8.75c.828 0 1.5.672 1.5 1.5v2c0 .828-.672 1.5-1.5 1.5H2.628z" clip-rule="evenodd" />
            <path d="M8.25 12a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h3.5a.75.75 0 00.75-.75v-1.5a.75.75 0 00-.75-.75H8.25z" />
          </svg>
          Filter
        </button>
      </div>
    </div>
    <div class="-mx-4 sm:-mx-6 lg:-mx-8 overflow-x-auto">
      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
        <table class="min-w-full divide-y divide-gray-300 dark:bg-gray-850 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-800">
            <tr>
              <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-0">
                <a href="#" class="group inline-flex">
                  Applicant
                  <span class="ml-2 flex-none rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.25 9.5a.75.75 0 011.1 1.02L10 15.148l2.7-2.908a.75.75 0 011.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.55-.24z" clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
              </th>
              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">
                <a href="#" class="group inline-flex">
                  Role Applied For
                  <span class="ml-2 flex-none rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-600 invisible group-hover:visible group-asc:visible group-desc:visible">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.25 9.5a.75.75 0 011.1 1.02L10 15.148l2.7-2.908a.75.75 0 011.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.55-.24z" clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
              </th>
              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">
                <a href="#" class="group inline-flex">
                  Status
                  <span class="ml-2 flex-none rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-600 invisible group-hover:visible group-asc:visible group-desc:visible">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.25 9.5a.75.75 0 011.1 1.02L10 15.148l2.7-2.908a.75.75 0 011.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.55-.24z" clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
              </th>
              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 hidden md:table-cell">
                <a href="#" class="group inline-flex">
                  Submission Date
                  <span class="ml-2 flex-none rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-600 invisible group-hover:visible group-asc:visible group-desc:visible">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.25 9.5a.75.75 0 011.1 1.02L10 15.148l2.7-2.908a.75.75 0 011.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.55-.24z" clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
              </th>
              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
                <span class="sr-only">Actions</span>
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">Jane Cooper</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">Senior Software Engineer</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-yellow-50 dark:bg-yellow-900/20 px-2 py-1 text-xs font-medium text-yellow-800 dark:text-yellow-400 ring-1 ring-inset ring-yellow-600/20 dark:ring-yellow-800/30">Pending Review</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-11-15</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, Jane Cooper</span></a>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">John Doe</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">Product Manager</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-green-50 dark:bg-green-900/20 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-800/30">Interview Scheduled</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-11-10</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, John Doe</span></a>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/7.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">Alice Smith</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-gray-50 dark:bg-gray-700/20 px-2 py-1 text-xs font-medium text-gray-600 dark:text-gray-400 ring-1 ring-inset ring-gray-500/10 dark:ring-gray-600/30">Application Received</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-11-18</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, Alice Smith</span></a>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/50.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">Robert Brown</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">Software Development Intern</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2 py-1 text-xs font-medium text-red-700 dark:text-red-400 ring-1 ring-inset ring-red-600/20 dark:ring-red-800/30">Rejected</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-10-25</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, Robert Brown</span></a>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/22.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">Emily White</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">Marketing Specialist</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-green-50 dark:bg-green-900/20 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-800/30">Interview Scheduled</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-11-01</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, Emily White</span></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <nav class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-850 px-4 py-3 sm:px-6" aria-label="Pagination">
      <div class="hidden sm:block">
        <p class="text-sm text-gray-700 dark:text-gray-300">
          Showing
          <span class="font-medium">1</span>
          to
          <span class="font-medium">5</span>
          of
          <span class="font-medium">12</span>
          results
        </p>
      </div>
      <div class="flex flex-1 justify-between sm:justify-end gap-2">
        <a href="#" class="relative inline-flex items-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus-visible:outline-offset-0">
          Previous
        </a>
        <a href="#" class="relative inline-flex items-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus-visible:outline-offset-0">
          Next
        </a>
      </div>
    </nav>
  </div>
</div>

Composant CAPTCHA

Un composant CAPTCHA épuré et minimaliste avec un style de typographie suisse/international, avec des tons océan/bleu. Conçu pour les sites Web d’événements et de conférences, il est réactif et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] dark:border dark:border-gray-700">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-blue-800 dark:text-blue-300 text-center">
        Verify Humanity
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 text-center leading-relaxed">
        To proceed, please complete the security check below.
      </p>

      <div class="space-y-4">
        <!-- CAPTCHA Main Area -->
        <div class="p-4 bg-blue-50 dark:bg-gray-700 rounded-md border border-blue-200 dark:border-gray-600 shadow-inner flex flex-col items-center justify-center min-h-[140px] relative">
          <!-- Loading/Placeholder state -->
          <div class="absolute inset-0 flex items-center justify-center bg-blue-50 dark:bg-gray-700 rounded-md z-0 opacity-100 transition-opacity duration-300" id="captcha_loading_state">
            <div class="w-8 h-8 border-4 border-blue-400 border-t-transparent rounded-full animate-spin"></div>
            <span class="ml-3 text-blue-600 dark:text-blue-400 text-sm">Loading CAPTCHA...</span>
          </div>

          <!-- Simulated CAPTCHA content (initially hidden) -->
          <div class="flex flex-col items-center justify-center space-y-4 opacity-0 transition-opacity duration-300" id="captcha_content_state">
            <img src="https://picsum.photos/seed/captcha/300/100" alt="Image CAPTCHA" class="w-full max-w-[300px] h-auto rounded-sm border border-gray-300 dark:border-gray-500 shadow-sm">
            <p class="text-sm text-gray-700 dark:text-gray-300 font-medium">What do you see in the image?</p>
            <input type="text" placeholder="Enter text here" class="w-full p-2.5 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white text-base transition-all duration-200">
          </div>
        </div>

        <!-- Refresh/Audio Buttons -->
        <div class="flex justify-between items-center gap-2">
          <button class="flex-1 py-2 px-4 rounded-md border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            <svg class="inline-block w-4 h-4 mr-1 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.823 4.239 2.207 5.768m0-11.536c1.384-1.529 3.314-2.207 5.346-2.207 4.493 0 8.002 3.614 8.002 8s-3.509 8-8.002 8c-2.21 0-4.239-.823-5.768-2.207m0-11.536H16h-4" /></svg>
            Refresh
          </button>
          <button class="flex-1 py-2 px-4 rounded-md border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            <svg class="inline-block w-4 h-4 mr-1 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.899a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.647 11 4.103 11 5v14c0 .897-.077 1.353-.293 1.586l-4.707-4.707z" /></svg>
            Audio
          </button>
        </div>
      </div>

      <!-- Submit Button -->
      <button class="w-full flex justify-center items-center py-3 px-6 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-800 transition-colors duration-200">
        Verify
        <svg class="w-5 h-5 ml-2 -mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center leading-snug pt-2">
        This site is protected by reCAPTCHA and the Google
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy Policy</a> and
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms of Service</a> apply.
      </p>
    </div>
  </div>
</div>

<script>
  // Simulate CAPTCHA loading
  document.addEventListener('DOMContentLoaded', () => {
    const loadingState = document.getElementById('captcha_loading_state');
    const contentState = document.getElementById('captcha_content_state');

    setTimeout(() => {
      loadingState.classList.add('opacity-0');
      loadingState.classList.remove('z-0');
      loadingState.classList.add('z-10');
      contentState.classList.remove('opacity-0');
      contentState.classList.add('opacity-100');
    }, 1500);
  });
</script>

Composant de formulaire de paiement ludique

Un composant de formulaire de paiement simple, ludique et réactif avec des éléments arrondis et des couleurs sourdes, adapté aux plateformes d’emploi/de carrière. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-gray-900 dark:to-blue-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8">
      <div class="text-center mb-6 sm:mb-8">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-2 font-['Inter',sans-serif]">Yay! Let's Get Started</h2>
        <p class="text-gray-500 dark:text-gray-400 text-lg sm:text-xl">Complete your registration</p>
      </div>

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

        <div>
          <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email-address" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" placeholder="Minimum 8 characters" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
          <input type="password" id="confirm-password" placeholder="Repeat your password" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform transition duration-200 ease-in-out hover:scale-105 active:scale-95">
          <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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" />
          </svg>
          Complete Registration!
        </button>
      </form>

      <div class="mt-6 text-center text-sm">
        <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition duration-150 ease-in-out">Sign In Here!</a></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-gray-900 py-4 px-6 sm:px-8 text-center text-gray-600 dark:text-gray-400 text-sm border-t border-blue-200 dark:border-gray-700">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</div>

Earth_Tones_Gradient_Breadcrumb_Navigation

Un composant de navigation complexe et réactif conçu pour les sites Web d’actualités et de journalisme, avec des transitions de dégradé terreux et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse bg-gradient-to-r from-stone-100 via-stone-50 to-amber-50 dark:from-stone-800 dark:via-stone-700 dark:to-amber-950 p-2 sm:p-3 rounded-lg shadow-lg dark:shadow-stone-950/50 transition-all duration-300 ease-in-out">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-stone-700 hover:text-stone-900 dark:text-stone-300 dark:hover:text-white transition-colors duration-200">
        <svg class="w-4 h-4 me-2.5 text-amber-600 dark:text-amber-400 transition-colors duration-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
          Categories
        </a>
      </div>
    </li>
    <li class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
          Politics
        </a>
      </div>
    </li>
    <li aria-current="page" class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-semibold text-amber-800 md:ms-2 dark:text-amber-300 transition-colors duration-200 group-hover:text-amber-900 dark:group-hover:text-amber-200">
          Current Affairs Article Title
        </span>
      </div>
    </li>
  </ol>
</nav>

Luxury_Premium_Manufacturing_Data_Table

Un composant de table de données complexe et réactif pour une utilisation industrielle/industrielle, doté d’un design luxueux/haut de gamme avec une palette de couleurs noir et blanc et une seule couleur d’accent vive. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <div class="font-sans antialiased text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 min-h-screen">

  <!-- Component Header -->
  <div class="mb-6 md:mb-8 flex flex-col md:flex-row items-start md:items-center justify-between">
    <div>
      <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight mb-2 text-gray-900 dark:text-gray-50">Production Line Overview</h1>
      <p class="text-lg text-gray-600 dark:text-gray-400">Real-time data and historical trends for all active manufacturing units.</p>
    </div>
    <div class="mt-4 md:mt-0 flex items-center space-x-3">
      <button class="px-5 py-2.5 bg-indigo-600 text-white dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 transition-colors duration-200 rounded-lg shadow-md font-semibold text-sm flex items-center">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"></path></svg>
        Add New Line
      </button>
      <button class="px-4 py-2.5 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 rounded-lg shadow-sm font-semibold text-sm flex items-center">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3zm3 1a1 1 0 00-1 1v1.586l2 2V17h2v-5.586l2-2V5a1 1 0 00-1-1H6z" fill-rule="evenodd"></path></svg>
        Filter
      </button>
    </div>
  </div>

  <!-- Controls and Search -->
  <div class="mb-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
    <div class="relative w-full sm:w-1/2 lg:w-1/3">
      <input type="text" placeholder="Search production lines..." class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 outline-none transition-all duration-200">
      <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    </div>
    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 w-full sm:w-auto">
      <select class="block w-full sm:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-100 appearance-none transition-all duration-200">
        <option>All Status</option>
        <option>Active</option>
        <option>Maintenance</option>
        <option>Idle</option>
      </select>
      <select class="block w-full sm:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-100 appearance-none transition-all duration-200">
        <option>Sort by Date</option>
        <option>Sort by Throughput</option>
        <option>Sort by Efficiency</option>
      </select>
    </div>
  </div>

  <!-- Data Table -->
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Line ID
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Product
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Status
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Last Updated
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Throughput (Units/Hr)
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Efficiency
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Operator
            </th>
            <th scope="col" class="relative px-6 py-3">
              <span class="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
          <!-- Row 1 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-001</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Medical Gauze</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-26 14:30</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">1,250</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-500 dark:border-indigo-600">98.2%</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Operator Avatar">
              Marcus Bell
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>

          <!-- Row 2 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-002</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Automotive Sensor</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">
                Maintenance
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-26 10:00</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">0</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-500 dark:text-gray-400 border-l-2 border-gray-400 dark:border-gray-500">N/A</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Operator Avatar">
              Sarah Lee
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>

          <!-- Row 3 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-003</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Food Packaging</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-26 15:05</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">2,100</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-500 dark:border-indigo-600">99.5%</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Operator Avatar">
              David Kim
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>

          <!-- Row 4 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-004</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Electronic Components</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">
                Idle
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-25 18:00</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">0</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-500 dark:text-gray-400 border-l-2 border-gray-400 dark:border-gray-500">N/A</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Operator Avatar">
              Emily Chen
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>

          <!-- Row 5 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-005</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Textile Fabric</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-26 14:55</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">1,800</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-500 dark:border-indigo-600">97.8%</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Operator Avatar">
              Alex Johnson
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <nav class="px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6" aria-label="Pagination">
      <div class="flex-1 flex justify-between sm:hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
          Previous
        </a>
        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
          Next
        </a>
      </div>
      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-gray-700 dark:text-gray-300">
            Showing
            <span class="font-medium">1</span>
            to
            <span class="font-medium">5</span>
            of
            <span class="font-medium">100</span>
            results
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              <span class="sr-only">Previous</span>
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 dark:bg-indigo-900 dark:border-indigo-600 dark:text-indigo-100 relative inline-flex items-center px-4 py-2 border text-sm font-semibold transition-colors duration-200">
              1
            </a>
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              2
            </a>
            <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              3
            </a>
            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300">
              ...
            </span>
            <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              9
            </a>
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              10
            </a>
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              <span class="sr-only">Next</span>
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              </svg>
            </a>
          </nav>
        </div>
      </div>
    </nav>
  </div>

</div>

Monospace_Developer_Media_Component

Un composant multimédia complexe, orienté vers l’éducation, avec un style de conception monospace/développeur et une palette de couleurs océan/bleu, conçu pour les plateformes d’apprentissage. Comprend la lecture multimédia, des extraits de code et des sections de contenu structuré.

Ouvrir Aperçu

                <div class="font-['Menlo',_Monaco,_Consolas,_'Liberation_Mono',_'Courier_New',_monospace] bg-gray-50 text-blue-900 min-h-screen p-4 dark:bg-gray-900 dark:text-blue-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
    <!-- Header/Title Section -->
    <header class="bg-blue-800 text-white p-4 flex items-center justify-between dark:bg-blue-900">
      <h1 class="text-xl font-bold flex items-center">
        <svg class="w-6 h-6 mr-2 text-blue-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.316 3.051A1 1 0 0113 2v2.247a1 1 0 01-.018.067L10.021 12.5h-2.11C5.698 12.5 5 13.197 5 14s.698 1.5 1.5 1.5h1.968l-3.328 3.328A1 1 0 016.328 20L9 17.328l3.328 3.328A1 1 0 0113.672 20L11 17.328l3.672-3.672A1 1 0 0115 13c-.001-.01-.004-.019-.009-.028-.684-1.12-1.921-1.872-3.327-1.977l.006-8.084zM10 5.25v6.5h-2.25v-6.5zm-3 3.5v-3.5h-1.5v3.5zm6 0v-3.5h1.5v3.5zM12 7.75v3.5h1.5v-3.5zm-3 3.5v-3.5h-1.5v3.5z" clip-rule="evenodd"></path></svg>
        Module: Introduction to Data Structures
      </h1>
      <div class="flex space-x-3">
        <button class="px-3 py-1 bg-blue-700 rounded text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Download Resources</button>
        <button class="px-3 py-1 bg-blue-700 rounded text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Mark Complete</button>
      </div>
    </header>

    <!-- Main Content Area -->
    <div class="md:flex">
      <!-- Left Column: Video Player & Description -->
      <section class="md:w-3/5 p-6 border-r border-blue-100 dark:border-blue-700">
        <div class="aspect-w-16 aspect-h-9 bg-black rounded overflow-hidden mb-6 border border-blue-500 dark:border-blue-600">
          <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

        <h2 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-200">Lesson 1: Understanding Arrays</h2>
        <p class="mb-4 leading-relaxed text-gray-700 dark:text-gray-300">
          Arrays are fundamental data structures that store a fixed-size sequential collection of elements of the same type. This lesson covers their basic definition, memory allocation, and common operations like initialization, accessing elements, and basic traversal.
        </p>
        \div class="text-sm text-gray-600 dark:text-gray-400 mb-6">
          <p>Published: <time datetime="2023-10-26">October 26, 2023</time></p>
          <p>Instructor: Dr. Alice Smith</p>
        </div">

        <!-- Key Concepts Section -->
        <article class="border-t border-b border-blue-200 py-6 mb-6 dark:border-blue-700">
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Key Concepts</h3>
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 marker:text-blue-600 dark:marker:text-blue-400">
            <li class="mb-2">Definition of an array and its contiguous memory allocation.</li>
            <li class="mb-2">Indexing: zero-based vs. one-based.</li>
            <li class="mb-2">Common operations: declaration, initialization, element access, and update.</li>
            <li>Distinction between static and dynamic arrays.</li>
          </ul>
        </article>

        <!-- Further Reading -->
        <article>
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Further Reading</h3>
          <ul class="space-y-3">
            <li><a href="#" class="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"><svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> Wikipedia: Array Data Structure</a></li>
            <li><a href="#" class="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"><svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> GeeksforGeeks: Arrays</a></li>
          </ul>
        </article>
      </section>

      <!-- Right Column: Code Snippets, Q&A, and Navigation -->
      <aside class="md:w-2/5 p-6 bg-blue-50 dark:bg-gray-850">
        <!-- Code Snippet Section -->
        <div class="mb-6">
          <h3 class="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-200">Code Example: Array Initialization (Python)</h3>
          <pre class="bg-blue-900 text-blue-50 p-4 rounded-md text-sm overflow-x-auto dark:bg-gray-950 dark:text-gray-100 border border-blue-700 dark:border-blue-700">
            <code class="language-python">
# Declaring and initializing an array
my_array = [10, 20, 30, 40, 50]

# Accessing an element
print(f"First element: {my_array[0]}") # Output: 10

# Iterating through an array
for element in my_array:
    print(element)
            </code>
          </pre>
        </div>

        <!-- Table of Contents / Navigation -->
        <nav class="mb-6">
          <h3 class="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-200">Module Navigation</h3>
          <ul class="space-y-2">
            <li><a href="#" class="block p-3 bg-blue-100 rounded hover:bg-blue-200 text-blue-800 font-medium dark:bg-blue-700 dark:hover:bg-blue-600 dark:text-blue-100 transition-colors"><span class="mr-2 text-blue-600 dark:text-blue-200">&#9658;</span> Lesson 1: Understanding Arrays <span class="text-xs text-blue-500 dark:text-blue-300 ml-2">(Current)</span></a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Lesson 2: Array Operations</a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Lesson 3: Multidimensional Arrays</a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Quiz: Array Fundamentals</a></li>
          </ul>
        </nav>

        <!-- Instructor Profile -->
        <div class="bg-white rounded-lg shadow-sm p-4 text-center dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Instructor Info</h3>
          <img class="w-24 h-24 rounded-full mx-auto mb-3 border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor Alice Smith">
          <p class="text-lg font-bold text-blue-800 dark:text-blue-200">Dr. Alice Smith</p>
          <p class="text-xs text-gray-600 dark:text-gray-400 mb-3">Lead Data Scientist & Adjunct Professor</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Specializing in algorithms and complex data structures. Passionate about making computer science accessible.</p>
        </div>
      </aside>
    </div>

    <!-- Comments/Questions Section (Placeholder) -->
    <section class="bg-blue-50 p-6 border-t border-blue-100 dark:bg-gray-850 dark:border-blue-700">
      <h2 class="text-2xl font-bold mb-4 text-blue-800 dark:text-blue-200">Questions & Discussion</h2>
      <div class="bg-white rounded-lg p-4 shadow-sm dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
        <p class="text-gray-700 dark:text-gray-300">No questions yet. Be the first to ask!</p>
        <button class="mt-4 px-4 py-2 bg-blue-700 text-white rounded hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Ask a Question</button>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-blue-800 text-white p-4 text-center text-sm dark:bg-blue-900">
      &copy; 2023 Learning Platform. All rights reserved.
    </footer>
  </div>
</div>

Composante Visualisation de Données - Agriculture Industrielle

Un composant de visualisation de données à l’esthétique industrielle et brute, utilisant une palette de couleurs violet/violet, adapté à l’agriculture et aux sites Web agricoles. Il affiche les indicateurs clés dans une mise en page réactive avec prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto space-y-8">
    
    <div class="text-center">
      <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-400 mb-2 tracking-tight uppercase">
        Farm Analytics Dashboard
      </h1>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
        Real-time insights for optimized agricultural operations.
      </p>
    </div>

    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Soil Moisture</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">68%</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-green-500 font-medium">+3%</span> last 24h
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Air Temperature</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">24°C</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 110 2H9a1 1 0 01-1-1v-4a1 1 0 112 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-red-500 font-medium">-1°C</span> last hour
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Yield Forecast</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">+15%</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-green-500 font-medium">Expected</span> growth
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Water Usage</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3500L</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span class="text-yellow-500 font-medium">Steady</span> daily
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>
    </div>

    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      
      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
        <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Historical Data Trends</h3>
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
        <div class="relative z-10">
          <img src="https://picsum.photos/700/300?random=1" alt="Placeholder chart for historical trends" class="object-cover w-full h-auto rounded-md border border-gray-200 dark:border-gray-700 aspect-[7/3] dark:opacity-80">
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-3">Insights on growth performance over the past quarter.</p>
        </div>
      </div>

      
      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
        <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Crop Health Status</h3>
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
        <div class="relative z-10">
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <img src="https://picsum.photos/150/150?random=2" alt="Healthy crop placeholder" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-full border-4 border-green-500 shadow-md dark:border-green-600">
            <ul class="flex-1 text-gray-700 dark:text-gray-300 leading-relaxed">
              <li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-green-500 rounded-full"></span> All fields showing optimal growth.</li>
              <li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-yellow-500 rounded-full"></span> Minor nutrient variance in Sector B.</li>
              <li class="flex items-center"><span class="w-2 h-2 mr-2 bg-red-500 rounded-full"></span> No critical health alerts detected.</li>
            </ul>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-4">Regular drone scans provide detailed health assessments.</p>
        </div>
      </div>
    </div>

    
    <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
      <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Resource Allocation Overview</h3>
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
      <div class="relative z-10">
        <div class="flex flex-col md:flex-row gap-6 mb-6">
          <div class="flex-1">
            <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Water Distribution</h4>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
              <div class="bg-purple-600 h-4 rounded-full" style="width: 85%;"></div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">85% of capacity utilized across all zones.</p>
          </div>
          <div class="flex-1">
            <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Equipment Deployment</h4>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
              <div class="bg-violet-600 h-4 rounded-full" style="width: 70%;"></div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">70% of machinery actively deployed or on standby.</p>
          </div>
        </div>
        
        <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-md">
          <h4 class="text-lg font-semibold text-purple-600 dark:text-purple-400 mb-2">Team Activity</h4>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar of John Doe" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
                <span>John Doe - Field A Maintenance</span>
              </div>
              <span class="text-sm text-green-600 dark:text-green-400">Active</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Avatar of Jane Smith" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
                <span>Jane Smith - QA Check, Sector C</span>
              </div>
              <span class="text-sm text-yellow-600 dark:text-yellow-400">Paused</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</section>

Luxury_Autumn_Maps_Component

Un composant de carte réactif et élégant conçu pour les sites Web de voyage et de tourisme de luxe, avec des couleurs d’automne et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-stone-50 dark:bg-stone-950 min-h-screen p-4 sm:p-8 font-serif text-stone-800 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white dark:bg-stone-900 rounded-3xl shadow-xl overflow-hidden md:flex elevation-200">
    
    <!-- Left Panel: Map Preview -->
    <div class="md:w-3/5 relative min-h-[300px] md:min-h-auto">
      <img src="https://picsum.photos/1200/800/?random=1&blur=2" alt="Map Preview" class="w-full h-full object-cover brightness-90 dark:brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-6 md:p-10">
        <h2 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-2">
          Explore Hidden Gems
        </h2>
      </div>
      <button class="absolute top-6 right-6 p-3 rounded-full bg-white dark:bg-stone-800 text-stone-700 dark:text-stone-300 shadow-lg hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-stone-300 dark:focus:ring-stone-700" aria-label="View Live Map">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h-5v-1h5.381c.217 0 .419-.074.587-.206 1.745-1.229 2.542-3.873 1.282-5.733L7.02 9.083c-.882-1.322-.44-3.109 1.096-3.771 1.764-.784 3.731-.225 4.542 1.411.085.176.136.377.144.584L14.5 12h2.5l-.276-2.76A5 5 0 0013.2 4.14C11.5 1.458 8 1.875 6.07 4.128L3.11 7.24a4.998 4.998 0 00-1.07 4.137l.45 2.25c.162.81.71 1.636 1.44 2.115l.235.155c.677.447 1.503.654 2.316.654H9.75z" />
        </svg>
      </button>
    </div>

    <!-- Right Panel: Location Details & Search -->
    <div class="md:w-2/5 p-6 sm:p-8 md:p-10 flex flex-col justify-between">
      <div>
        <h3 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-4">Discover Your Next Adventure</h3>
        <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6">
          Uncover curated experiences and stunning destinations. From serene landscapes to bustling cityscapes, find your perfect escape.
        </p>

        <!-- Search Bar -->
        <div class="relative mb-6">
          <input type="text" placeholder="Search locations, landmarks..." class="w-full py-3 pl-12 pr-4 rounded-xl bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500">
          <div class="absolute inset-y-0 left-0 flex items-center pl-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>

        <!-- Featured Locations -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 auto-rows-fr">
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=2" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Autumn Peaks</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">Mountains, SCENIC</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=3" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Vineyard Valley</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">WINE, RURAL</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=4" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Lakeside Retreat</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">NATURE, CALM</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=5" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Historic Old Town</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">CITY, CULTURAL</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-8">
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 rounded-xl bg-orange-700 text-white font-semibold tracking-wide hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-lg transform hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 5.273L3 9.77v.068a.5.5 0 01-.5.5h-.069l-.16.03a.5.5 0 01-.177.018l-1.077.016a.5.5 0 01-.497-.48l-.001-.01c0-.27.224-.492.497-.492a.5.5 0 01.49-.408l.01-.01.01-.005a.5.5 0 01.372-.09m14.975 1.01a8 8 0 00-11.314-11.314M12 17.5V12h-.01m0 0l-5-5m5 5l5-5" />
          </svg>
          Plan Your Trip Now
        </a>
      </div>
    </div>

  </div>
</div>

Gradient_Forest_Maps_Component

Un composant de carte simple et réactif pour les plates-formes éducatives, doté d’une palette de dégradés vert forêt et de transitions fluides, 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-emerald-50 to-lime-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full rounded-xl shadow-2xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-500 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 border border-emerald-200 dark:border-emerald-700">
    <div class="p-6 sm:p-8 lg:p-10 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-4 sm:mb-6 leading-tight transition-colors duration-500">
        Explore Geographic Concepts
      </h2>
      <p class="text-lg sm:text-xl text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 transition-colors duration-500">
        Visualize and understand complex geographic data with interactive maps.
      </p>

      <div class="relative w-full h-64 sm:h-80 md:h-96 lg:h-112 rounded-lg overflow-hidden shadow-xl border border-emerald-300 dark:border-emerald-600 group">
        <!-- Placeholder for an interactive map -->
        <img src="https://picsum.photos/1200/800?random=1&blur=2" alt="Placeholder map illustration with abstract geographical features" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 group-focus-within:scale-105 opacity-80 dark:opacity-70" aria-hidden="true">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-400/30 to-lime-200/30 dark:from-emerald-800/40 dark:to-lime-900/40 flex items-center justify-center p-4 rounded-lg">
          <div class="text-white drop-shadow-lg text-center">
            <p class="text-xl sm:text-2xl font-bold mb-2">Interactive Map Area</p>
            <p class="text-sm sm:text-base">Content for map embedding would go here.</p>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
        bg-gradient-to-r from-emerald-500 to-lime-600 hover:from-emerald-600 hover:to-lime-700 
        dark:from-emerald-600 dark:to-lime-700 dark:hover:from-emerald-700 dark:hover:to-lime-800 
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white dark:focus:ring-offset-gray-900">
          
          View Course Maps
          <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <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 fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.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" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

1 ... 28 29 30 31 32 ... 262

Catégories

Tous les composants