Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Industrial_Candy_Finance_Badges_Component

Un composant complexe de badges pour la finance/banque, mélangeant l’esthétique industrielle avec des couleurs vives de bonbon. Dispose de plusieurs badges interactifs, d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir Aperçu

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

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center text-gray-800 dark:text-gray-200 tracking-tight leading-tight">
    <span class="text-pink-500">Financial</span> <span class="text-cyan-400">Insights</span> Badges
  </h2>

  <!-- Industrial Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-4 border-gray-300 dark:border-gray-700
              transform skew-y-1 rotate-1 translate-x-1 translate-y-1
              transition-transform duration-300 hover:skew-y-0 hover:rotate-0 hover:translate-x-0 hover:translate-y-0
              relative before:absolute before:inset-0 before:bg-gradient-to-br before:from-gray-100 before:to-gray-200 dark:before:from-gray-900 dark:before:to-gray-950 before:opacity-5 dark:before:opacity-10 ">

    <!-- Exposed Elements Top Border -->
    <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400 dark:from-pink-600 dark:via-purple-600 dark:to-cyan-600 rounded-t-lg"></div>

    <!-- Inner Content Area -->
    <div class="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col lg:flex-row gap-8 items-start">

      <!-- Left Section: Main Badges Area -->
      <div class="flex-1 w-full">
        <h3 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-200 flex items-center justify-between">
          <span>Your Current Status</span>
          <svg class="h-7 w-7 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.364 6.364l-.707-.707M12 20v1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707m1.279-.621A6 6 0 0112 2c2.652 0 4.972 1.258 6.367 3.17c1.701 2.378 1.83 5.464-.176 7.747C15.688 15.753 13.921 18 12 18s-3.688-2.247-5.823-4.908c-2.006-2.283-1.877-5.369.176-7.747C4.657 5.176 6.98 4 9.663 4H12z" /></svg>
        </h3>

        <!-- Badges Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">

          <!-- Badge 1: Savings Goal -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900 dark:to-pink-800 border-2 border-pink-300 dark:border-pink-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-pink-500 text-white rounded-full mr-4 shadow-lg group-hover:rotate-6 transition-transform">
                <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 8h6m-5 0h.01M12 4h.01M12 4v12a4 4 0 004 4h0M12 4v12a4 4 0 01-4 4h0m0-16v12a4 4 0 004 4h0m0-16v12a4 4 0 01-4 4h0m-4-7h4m-4 0h.01M17 7H7a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2V9a2 2 0 00-2-2z" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-pink-700 dark:text-pink-300">Savings Goal</p>
              <p class="text-sm text-pink-600 dark:text-pink-400">80% Achieved</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-pink-400 text-white dark:bg-pink-600">High</span>
          </div>

          <!-- Badge 2: Credit Score -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900 dark:to-cyan-800 border-2 border-cyan-300 dark:border-cyan-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-cyan-500 text-white rounded-full mr-4 shadow-lg group-hover:-rotate-6 transition-transform">
              <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4v10a2 2 0 002 2h12a2 2 0 002-2V4" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-cyan-700 dark:text-cyan-300">Credit Score</p>
              <p class="text-sm text-cyan-600 dark:text-cyan-400">Excellent (780)</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-cyan-400 text-white dark:bg-cyan-600">Stable</span>
          </div>

          <!-- Badge 3: Investment Growth -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 border-2 border-purple-300 dark:border-purple-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-purple-500 text-white rounded-full mr-4 shadow-lg group-hover:scale-110 transition-transform">
                <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-purple-700 dark:text-purple-300">Investment Growth</p>
              <p class="text-sm text-purple-600 dark:text-purple-400">+15% YTD</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-purple-400 text-white dark:bg-purple-600">Growing</span>
          </div>

          <!-- Badge 4: Emergency Fund -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 border-2 border-green-300 dark:border-green-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-green-500 text-white rounded-full mr-4 shadow-lg group-hover:translate-x-1 transition-transform">
              <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-green-700 dark:text-green-300">Emergency Fund</p>
              <p class="text-sm text-green-600 dark:text-green-400">3 Months Covered</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-green-400 text-white dark:bg-green-600">Good</span>
          </div>

          <!-- Badge 5: Debt-to-Income -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 border-2 border-yellow-300 dark:border-yellow-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-yellow-500 text-white rounded-full mr-4 shadow-lg group-hover:rotate-12 transition-transform">
                <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-yellow-700 dark:text-yellow-300">Debt-to-Income</p>
              <p class="text-sm text-yellow-600 dark:text-yellow-400">Decreasing (28%)</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-yellow-400 text-white dark:bg-yellow-600">Monitor</span>
          </div>

          <!-- Badge 6: Budget Compliance -->
          <div class="flex items-center p-4 rounded-lg shadow-md bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 border-2 border-blue-300 dark:border-blue-700
                      transform hover:scale-105 transition-transform duration-200 ease-out cursor-pointer group">
            <div class="flex-shrink-0 p-3 bg-blue-500 text-white rounded-full mr-4 shadow-lg group-hover:-translate-y-1 transition-transform">
              <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c.74 3.05 2.11 5.86 4.09 8.23a10.001 10 0 0014.17-14.17c-2.37-1.98-5.18-3.35-8.23-4.09z" /></svg>
            </div>
            <div>
              <p class="text-lg font-bold text-blue-700 dark:text-blue-300">Budget Compliance</p>
              <p class="text-sm text-blue-600 dark:text-blue-400">95% On Track</p>
            </div>
            <span class="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-blue-400 text-white dark:bg-blue-600">OK</span>
          </div>

        </div>

        <!-- Call to Action / Information Area -->
        <div class="p-6 rounded-lg bg-gray-50 dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 text-center relative overflow-hidden group">
          <div class="absolute top-0 left-0 w-full h-full bg-opacity-10 dark:bg-opacity-20 bg-pink-500 dark:bg-cyan-500 transform -skew-y-3 group-hover:skew-y-0 transition-transform duration-300"></div>
          <p class="relative z-10 text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">
            Need a financial tune-up? Connect with an advisor.
          </p>
          <button class="relative z-10 px-6 py-2 rounded-full font-bold
                         bg-gradient-to-r from-pink-500 to-purple-500 text-white
                         hover:from-pink-600 hover:to-purple-600 shadow-lg
                         transform hover:-translate-y-1 transition-transform duration-200">
            Schedule a Call
          </button>
        </div>

      </div>

      <!-- Right Section: Recent Activity / Profile -->
      <div class="w-full lg:w-1/3 p-6 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md border-2 border-gray-200 dark:border-gray-600 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80">
        <h3 class="text-xl font-bold mb-5 text-gray-800 dark:text-gray-200">Recent Activity</h3>
        <ul class="space-y-4">
          <li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-pink-400 dark:bg-pink-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
            <span class="ml-4">Credit Card Payment</span>
            <span class="font-semibold text-pink-600 dark:text-pink-400">- $500</span>
          </li>
          <li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-cyan-400 dark:bg-cyan-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
            <span class="ml-4">Investment Deposit</span>
            <span class="font-semibold text-cyan-600 dark:text-cyan-400">+ $1,200</span>
          </li>
          <li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-purple-400 dark:bg-purple-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
            <span class="ml-4">Mortgage Payment</span>
            <span class="font-semibold text-purple-600 dark:text-purple-400">- $1,800</span>
          </li>
          <li class="flex items-center justify-between text-sm sm:text-base text-gray-700 dark:text-gray-300 relative group">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-green-400 dark:bg-green-600 group-hover:w-4 group-hover:h-4 transition-all duration-200"></div>
            <span class="ml-4">Q4 Dividend Payout</span>
            <span class="font-semibold text-green-600 dark:text-green-400">+ $250</span>
          </li>
        </ul>

        <h3 class="text-xl font-bold mt-8 mb-4 text-gray-800 dark:text-gray-200">Your Profile</h3>
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-16 h-16 rounded-full border-4 border-cyan-400 dark:border-cyan-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Premium Member</p>
          </div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
          Dedicated to achieving financial freedom through smart choices and consistent habits.
        </p>
        <button class="w-full px-4 py-2 rounded-md font-bold
                        bg-gradient-to-r from-cyan-500 to-green-500 text-white
                        hover:from-cyan-600 hover:to-green-600 shadow-lg
                        transform hover:-translate-x-1 hover:-translate-y-1 transition-transform duration-200">
          Edit Profile
        </button>
      </div>

    </div>

    <!-- Exposed Elements Bottom Border -->
    <div class="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-green-400 via-blue-400 to-purple-400 dark:from-green-600 dark:via-blue-600 dark:to-purple-600 rounded-b-lg"></div>

  </div>
</div>

Composant de navigation collante

Un composant de navigation autocollant complexe et réactif avec une esthétique de conception 3D et une palette de couleurs forêt/vert, adapté aux applications médicales/de santé. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <nav class="sticky top-0 z-50 w-full backdrop-blur-sm bg-lime-100/80 dark:bg-emerald-950/80 shadow-lg dark:shadow-emerald-700/30 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-2 md:py-4 flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-2 md:mb-0">
      <a href="#" class="flex items-center space-x-2 text-emerald-800 dark:text-emerald-50 font-bold text-2xl md:text-3xl tracking-tight">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-emerald-600 dark:text-emerald-400 transform -rotate-12 transition-transform duration-300 ease-in-out" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-1-11h2v6h-2zm0 8h2v2h-2z"/>
          <path d="M12 11a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1zm0 8a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z" fill="url(#gradient)"/>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#10B981" />
              <stop offset="100%" stop-color="#059669" />
            </linearGradient>
          </defs>
        </svg>
        <span class="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,0.1)]">MedCare</span>
      </a>
      <button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-2 transition-all duration-200 ease-in-out">
        <svg class="w-7 h-7 text-emerald-700 dark:text-emerald-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <div id="navbar-menu" class="hidden md:flex flex-col md:flex-row md:items-center space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto text-center md:text-left">
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        Home
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>
      <div class="relative group">
        <button class="flex items-center text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md py-2 md:py-0">
          Services
          <svg class="ml-1 w-4 h-4 transition-transform duration-200 ease-in-out group-hover:rotate-180" 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 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-emerald-900 shadow-xl dark:shadow-emerald-800/50 rounded-lg py-2 mt-2 w-48 transition-all duration-300 ease-out transform origin-top-left scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 perspective-100 rotate-x-5">
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Consultation
          </a>
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Appointments
          </a>
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Health Records
          </a>
        </div>
      </div>
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        About Us
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>

      <div class="flex items-center space-x-4 md:ml-auto mt-4 md:mt-0">
        <button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-700 dark:text-emerald-200 shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
          <svg class="w-6 h-6 sun-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.573l.707-.707M3.929 19.071l.707-.707m-4.596 0l-.707.707M19.071 3.929l-.707.707M6 12a6 6 0 1112 0 6 6 0 01-12 0z"></path>
          </svg>
          <svg class="w-6 h-6 moon-icon hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
        </button>
        <a href="#" class="flex items-center p-2 rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <img class="w-8 h-8 rounded-full object-cover mr-2 brightness-90 contrast-125 saturate-150" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
            <span class="text-sm font-medium hidden lg:block perspective-100 rotate-x-5">Dr. Smith</span>
            <svg class="w-5 h-5 ml-2 hidden lg:block transition-transform transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A11.952 11.952 0 0112 15c4.764 0 9.102 1.341 12 3.654-.539-7.243-7.533-13.654-15-13.654S-3.539 10.561-3 17.804zM12 10a4 4 0 100-8 4 4 0 000 8z"></path></svg>
        </a>
      </div>
    </div>
  </div>
</nav>

<script>
  // Dark Mode Toggle Logic
  const darkModeToggle = document.getElementById('dark-mode-toggle');
  const sunIcon = darkModeToggle.querySelector('.sun-icon');
  const moonIcon = darkModeToggle.querySelector('.moon-icon');

  function setDarkMode(isDark) {
    if (isDark) {
      document.documentElement.classList.add('dark');
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
      localStorage.setItem('theme', 'light');
    }
  }

  // Check for saved theme or system preference
  const preferredTheme = localStorage.getItem('theme');
  if (preferredTheme === 'dark' || (!preferredTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    setDarkMode(true);
  } else {
    setDarkMode(false);
  }

  darkModeToggle.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });

  // Navbar Toggle Logic for Mobile
  const navbarToggle = document.getElementById('navbar-toggle');
  const navbarMenu = document.getElementById('navbar-menu');

  navbarToggle.addEventListener('click', () => {
    navbarMenu.classList.toggle('hidden');
    navbarMenu.classList.toggle('flex');
  });

  // Close mobile menu when a link is clicked
  navbarMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
      if (!navbarMenu.classList.contains('hidden') && window.innerWidth < 768) { // Only close if mobile menu is open and on mobile size
        navbarMenu.classList.add('hidden');
        navbarMenu.classList.remove('flex');
      }
    });
  });

</script>

Composant de panier d’achat d’entreprise rétro

Un composant de panier d’achat complexe et réactif avec un style de design rétro/vintage, axé sur l’esthétique des années 80/90 et les tons bleus d’entreprise, adapté aux applications manufacturières/industrielles. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-mono">
  <div class="w-full max-w-6xl bg-white border-4 border-blue-800 shadow-lg p-6 rounded-lg relative overflow-hidden dark:bg-gray-800 dark:border-blue-500">
    <!-- Retro Header Bar -->
    <div class="absolute top-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-b-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
      <span class="tracking-wider">SYSTEM CART V1.9.89Beta</span>
      <div class="flex space-x-2">
        <span>[FILE]</span>
        <span>[EDIT]</span>
        <span>[VIEW]</span>
        <span>[HELP]</span>
      </div>
    </div>
    <div class="pt-10 pb-4">
      <!-- Main Content Area -->
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- Cart Items Section -->
        <div class="lg:w-2/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
          <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> INVENTORY SELECTION: ACTIVE</h2>

          <!-- Cart Item 1 -->
          <div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
            <img src="https://picsum.photos/seed/tool1/120/120" alt="Industrial Robot Arm" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
            <div class="flex-grow">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Z-900 Automated Assembly Arm</h3>
              <p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: IND-RA9001 | Lot: 01-2023</p>
              <div class="flex items-center space-x-4">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
                  <input type="text" value="2" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
                </div>
                <p class="text-lg font-bold text-green-700 dark:text-green-400">$49,999.00</p>
              </div>
            </div>
            <button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
          </div>

          <!-- Cart Item 2 -->
          <div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
            <img src="https://picsum.photos/seed/gearbox/120/120" alt="Precision Gearbox" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
            <div class="flex-grow">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">HD Precision Gearbox (Model M8)</h3>
              <p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: PART-GBM800 | Lot: 03-2024</p>
              <div class="flex items-center space-x-4">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
                  <input type="text" value="5" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
                  <button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
                </div>
                <p class="text-lg font-bold text-green-700 dark:text-green-400">$1,250.00</p>
              </div>
            </div>
            <button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
          </div>

          <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
            <button class="px-6 py-2 bg-blue-200 border-2 border-blue-400 text-blue-800 hover:bg-blue-300 rounded-md shadow-md dark:bg-blue-800 dark:border-blue-600 dark:text-blue-200 dark:hover:bg-blue-700">
              \u003c\u003c ADD MORE ITEMS
            </button>
            <button class="text-red-600 hover:underline">
              CLEAR ALL ITEMS
            </button>
          </div>
        </div>

        <!-- Order Summary Section -->
        <div class="lg:w-1/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
          <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> ORDER LOG: SUMMARY</h2>

          <div class="mb-4">
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Item Subtotal:</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$101,248.00</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Shipping (Freight):</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$750.00</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
              <span class="text-gray-700 dark:text-gray-300">Estimated Tax (7.5%):</span>
              <span class="font-bold text-gray-900 dark:text-gray-100">$7,650.00</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-lg font-bold text-blue-800 dark:text-blue-300">TOTAL DUE:</span>
              <span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100">$109,648.00</span>
            </div>
          </div>

          <div class="mb-6">
            <label for="promo" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-300">PROMO CODE / ACCOUNT ID:</label>
            <div class="flex">
              <input type="text" id="promo" class="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600" placeholder="Enter code">
              <button class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-700 dark:hover:bg-blue-600">
                APPLY
              </button>
            </div>
          </div>

          <p class="text-gray-600 text-xs mb-4 dark:text-gray-400">
            <strong class="text-yellow-600 dark:text-yellow-400">\u003e\u003e SYSTEM MESSAGE:</strong> All orders are subject to final review and confirmation. Lead times may vary based on component availability. For bulk discounts, contact sales.
          </p>

          <button class="w-full bg-blue-800 text-white font-bold py-3 mt-4 rounded-md shadow-lg hover:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-500">
            \u003c\u003c INITIATE CHECKOUT PROTOCOL \u003e\u003e
          </button>
        </div>
      </div>
    </div>
    <!-- Retro Footer Bar -->
    <div class="absolute bottom-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-t-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
      <span class="tracking-wider">STATUS: READY | USER: JDOE89 | SESSION: ACTIVE</span>
      <div class="flex space-x-4">
        <span>[F1-Help]</span>
        <span>[F5-Refresh]</span>
        <span>[F12-Exit]</span>
      </div>
    </div>
  </div>
</div>

Navigation minimaliste dans les restaurants et les restaurants

Un composant de navigation minimaliste et réactif pour les sites Web d’alimentation et de restaurants, avec des tons de bijoux, la prise en charge du mode sombre et un design plat et épuré. Comprend un logo, des liens de navigation et un bouton d’appel à l’action, avec un menu de hamburgers adapté aux mobiles.

Ouvrir Aperçu

                <nav class="bg-emerald-600 dark:bg-emerald-900 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-1.636 6.364l-.707-.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M9 11a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0zm-9 9a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0z"></path>
      </svg>
      <span class="text-white text-xl font-bold font-serif">FoodieFinds</span>
    </a>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#menu" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#how-it-works" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        How It Works
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#restaurants" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Restaurants
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#contact" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>

    <!-- Call to Action Button -->
    <div class="hidden md:block">
      <button class="bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none focus:ring-2 focus:ring-emerald-200 rounded-md p-1" aria-label="Toggle menu">
        <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation Menu (hidden by default, would be toggled by JS) -->
  <!-- For demonstration, using simple display classes; in a real app, you'd use JS to toggle 'hidden' -->
  <div class="md:hidden hidden bg-emerald-700 dark:bg-emerald-800 py-2" id="mobile-menu">
    <a href="#menu" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Menu</a>
    <a href="#how-it-works" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">How It Works</a>
    <a href="#restaurants" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Restaurants</a>
    <a href="#contact" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Contact</a>
    <div class="px-4 py-2">
      <button class="w-full bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>
  </div>
</nav>

Material_Design_Video_Player_Component

Un composant de lecteur vidéo réactif avec une esthétique de conception matérielle, une palette de couleurs neutres chaudes, une prise en charge du mode sombre, adapté aux systèmes de réservation. Comprend une vignette vidéo, un bouton de lecture, un titre, une description et un appel à l’action « Réserver maintenant ».

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative">
    <!-- Video Thumbnail & Play Button -->
    <div class="relative pb-9/16 overflow-hidden group">
      <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
        <button class="p-4 md:p-6 bg-amber-500 text-white rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50" aria-label="Play Video">
          <svg class="h-8 w-8 md:h-10 md:w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 md:p-8">
      <h3 class="text-2xl sm:text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-3 leading-tight">
        Exclusive Tour: Discover Our Premier Service
      </h3>
      <p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg mb-5 leading-relaxed">
        Watch this short video to get a comprehensive understanding of our top-tier service, designed to cater to your specific needs. Learn about our process, benefits, and how we ensure a seamless experience from start to finish.
      </p>

      <!-- Details Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
        <div>
          <div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Duration:</span> 4 min 30 sec
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-200">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2v-2a2 2 0 00-2-2H4a2 2 0 00-2 2V6z"></path><path fill-rule="evenodd" d="M4 4h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm4.586 7.414a2 2 0 10-2.828 2.828L10 17.828l4.243-4.242a2 2 0 10-2.828-2.828L10 12.172l-1.414-1.414z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Format:</span> HD 1080p
          </div>
        </div>
        <div>
          <div class="flex items-center text-gray-700 dark:text-gray-200 mb-2">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM1 18h18V8H1v10z"></path></svg>
            <span class="font-medium">Presenter:</span> Alex Johnson
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-200">
            <svg class="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            <span class="font-medium">Relevant for:</span> All Clients
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700 mt-4">
        <button class="px-6 py-3 bg-amber-600 text-white font-semibold rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-300 transform hover:-translate-y-0.5" aria-label="Book a Reservation">
          Book Your Reservation Now
        </button>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Product_Reviews_Component

Un composant d’avis sur les produits simple et réactif avec une esthétique rétro/vintage, utilisant des tons bleus professionnels adaptés aux entreprises manufacturières/industrielles. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="font-mono bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-bold text-center mb-12 uppercase tracking-wider text-blue-800 dark:text-blue-200 border-b-4 border-blue-600 dark:border-blue-400 pb-4 inline-block mx-auto">
      Customer Feedback Terminal
    </h2>

    <div class="grid gap-8 sm:grid-cols-1 lg:grid-cols-2">
      <!-- Review Card 1 -->
      <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue- সহায়-400 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
          <div>
            <p class="font-semibold text-blue-800 dark:text-blue-100">Jasper 'The Cog' Milligan</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Production Manager</p>
          </div>
        </div>
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
          "This machinery is a workhorse! Precision engineering from a bygone era, but with modern reliability. Integrates seamlessly with our existing setup. A true industrial classic!"
        </blockquote>
        <p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Octane 23, 1997</p>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
          <div>
            <p class="font-semibold text-blue-800 dark:text-blue-100">Eleanor 'The Spark' Vance</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Lead Engineer, Robotics Division</p>
          </div>
        </div>
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
          "Absolutely fantastic! The build quality reminds me of the good old days – robust and reliable. It handles extreme conditions without a hitch. A crucial asset for our high-tech industrial applications."
        </blockquote>
        <p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Nov 14, 1998</p>
      </div>

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

Composant de colonnes de fabrication d’entreprise/professionnel

Un composant de colonnes complexe et réactif conçu pour les entreprises manufacturières/industrielles avec une esthétique d’entreprise/professionnelle et une palette de couleurs automnale. Inclut la prise en charge du mode sombre et du HTML sémantique.

Ouvrir Aperçu

                <section class="py-12 bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-orange-800 dark:text-orange-300 mb-4 tracking-tight">
        Driving Industrial Innovation
      </h2>
      <p class="text-lg sm:text-xl text-brown-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Leading the future of manufacturing with precision, efficiency, and unwavering commitment to quality.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">
      <!-- Column 1: Advanced Automation -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-orange-600 dark:border-orange-500">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-orange-600 dark:bg-orange-500 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1.5-1.5M15 17l.75 3L17 18.5M2.25 10.5l1.5 5.25L5.75 10.5M9 6h6M19.5 10.5l-1.5 5.25L16.25 10.5M12 21a9 9 0 100-18 9 9 0 000 18z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors duration-300">
            Advanced Automation
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Leveraging cutting-edge robotics and AI to optimize production workflows and reduce operational costs.
          </p>
          <img src="https://picsum.photos/400/250?random=1" alt="Industrial robots" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Robotic Process Automation (RPA)</li>
            <li>Machine Learning for Predictive Maintenance</li>
            <li>Automated Quality Control Systems</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-md">
            Learn More
            <svg class="ml-2 -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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 2: Sustainable Manufacturing -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-burgundy-700 dark:border-burgundy-600">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-burgundy-700 dark:bg-burgundy-600 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.5l4 4L19.5 6" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-burgundy-800 dark:text-burgundy-200 mb-3 group-hover:text-burgundy-600 dark:group-hover:text-burgundy-400 transition-colors duration-300">
            Sustainable Manufacturing
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Pioneering eco-friendly production methods to minimize environmental impact and foster a greener future.
          </p>
          <img src="https://picsum.photos/400/250?random=2" alt="Eco-friendly factory" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Renewable Energy Integration</li>
            <li>Waste Reduction & Recycling Programs</li>
            <li>Carbon Footprint Optimization</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-700 hover:bg-burgundy-800 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 transition-colors duration-300 shadow-md">
            Explore Initiatives
            <svg class="ml-2 -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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 3: Global Supply Chain Excellence -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-brown-700 dark:border-brown-600">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-brown-700 dark:bg-brown-600 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-3 group-hover:text-brown-600 dark:group-hover:text-brown-400 transition-colors duration-300">
            Global Supply Chain Excellence
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Building resilient and efficient supply networks to ensure timely delivery and consistent product availability.
          </p>
          <img src="https://picsum.photos/400/250?random=3" alt="Global logistics network" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Real-time Logistics Tracking</li>
            <li>Supplier Relationship Management</li>
            <li>Risk Mitigation Strategies</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brown-700 hover:bg-brown-800 dark:bg-brown-600 dark:hover:bg-brown-700 transition-colors duration-300 shadow-md">
            Discover Our Reach
            <svg class="ml-2 -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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
    </div>

    <div class="text-center mt-12">
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-800 hover:bg-burgundy-900 dark:bg-burgundy-700 dark:hover:bg-burgundy-800 transition-colors duration-300 shadow-lg sm:text-xl">
        Contact Our Experts
        <svg class="ml-3 -mr-1 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8H8a2 2 0 00-2 2v6a2 2 0 002 2h9a2 2 0 002-2v-6a2 2 0 00-2-2zM9 11a1 1 0 100 2h6a1 1 0 100-2H9z" />
        </svg>
      </a>
    </div>
  </div>
</section>

<style>
  /* Custom colors for autumn palette */
  .text-brown-700 { color: #8B4513; } /* SaddleBrown */
  .dark\:text-brown-200 { color: #D2B48C; } /* Tan light for dark mode */
  .dark\:text-brown-400 { color: #A0522D; } /* Sienna light for dark mode hover */
  .bg-brown-700 { background-color: #A0522D; } /* Sienna */
  .hover\:bg-brown-800:hover { background-color: #8B4513; } /* SaddleBrown for hover */
  .dark\:bg-brown-600 { background-color: #D2B48C; } /* Tan */
  .dark\:hover\:bg-brown-700:hover { background-color: #A0522D; } /* Sienna for dark hover */

  .text-burgundy-700 { color: #800020; } /* Burgundy */
  .text-burgundy-800 { color: #6A0527; } /* slightly darker burgundy */
  .dark\:text-burgundy-200 { color: #EDC1C1; } /* light pink for dark mode */
  .dark\:text-burgundy-400 { color: #EC2E5F; } /* medium pink for dark hover */
  .bg-burgundy-700 { background-color: #800020; } /* Burgundy */
  .hover\:bg-burgundy-800:hover { background-color: #6A0527; } /* slightly darker burgundy for hover */
  .dark\:bg-burgundy-600 { background-color: #C04000; } /* Burnt Orange */
  .dark\:hover\:bg-burgundy-700:hover { background-color: #800020; } /* Burgundy for dark hover */

  .text-orange-800 { color: #CC5500; } /* Dark Orange */
  .dark\:text-orange-200 { color: #FFDAB9; } /* PeachPuff for dark */
  .dark\:text-orange-300 { color: #FFC0CB; } /* LightPink for dark heading */
  .dark\:text-orange-400 { color: #FFB347; } /* Light Orange for dark hover */
  .bg-orange-700 { background-color: #FF8c00; } /* DarkOrange */
  .hover\:bg-orange-800:hover { background-color: #CC5500; } /* Darker Orange for hover */
  .dark\:bg-orange-600 { background-color: #FFA07A; } /* LightSalmon light for dark */
  .dark\:hover\:bg-orange-700:hover { background-color: #FF8c00; } /* DarkOrange light for dark hover */

  .border-orange-600 { border-color: #FF8c00; }
  .dark\:border-orange-500 { border-color: #FFA07A; }
  .border-burgundy-700 { border-color: #800020; }
  .dark\:border-burgundy-600 { border-color: #C04000; }
  .border-brown-700 { border-color: #A0522D; }
  .dark\:border-brown-600 { border-color: #D2B48C; }
<\/style>

Nature-Inspired_Entertainment_Navigation

Un composant de navigation complexe, inspiré de la nature, pour les plateformes de divertissement et de médias, avec des lignes fluides et des combinaisons de couleurs sucrées. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="relative bg-gradient-to-br from-purple-200 via-pink-200 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-green-950 shadow-lg dark:shadow-xl rounded-b-3xl md:rounded-b-[4rem] overflow-hidden p-4 md:p-6 lg:p-8 transform -skew-y-1 perspective-1000">
  <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/natural-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply dark:mix-blend-screen -skew-y-1"></div>
  <div class="relative flex flex-col md:flex-row items-center justify-between mx-auto max-w-7xl skew-y-1">
    
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2 mb-4 md:mb-0">
      <svg class="h-10 w-10 text-pink-600 dark:text-purple-400 transform rotate-45 -translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 100 8h10a4 4 0 100-8H7zm0 0l-4-4m4 4l-4 4m10 0l4-4m-4 4l4 4"></path>
      </svg>
      <a href="#" class="font-extrabold text-3xl text-purple-700 dark:text-pink-300 font-serif tracking-tight drop-shadow-md dark:drop-shadow-lg">WAVEFLIX</a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <button class="text-purple-700 dark:text-pink-300 hover:text-pink-600 dark:hover:text-purple-400 focus:outline-none focus:ring-2 focus:ring-pink-400 rounded-md p-2 transition duration-300 ease-in-out" aria-label="Toggle navigation menu">
        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12 mt-4 md:mt-0">
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Home</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Movies</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Series</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Live</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Categories</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
    </div>

    <!-- Search and User Profile -->
    <div class="hidden md:flex items-center space-x-4 lg:space-x-6 mt-4 md:mt-0">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-white/70 dark:bg-gray-800/70 border border-transparent focus:border-pink-400 focus:ring-2 focus:ring-pink-200 dark:focus:border-purple-600 dark:focus:ring-2 dark:focus:ring-purple-900 text-purple-900 dark:text-pink-100 placeholder-purple-500 dark:placeholder-pink-400 transition duration-300 ease-in-out shadow-sm dark:shadow-md backdrop-blur-sm">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-purple-500 dark:text-pink-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>
      <button class="relative flex items-center justify-center p-2 rounded-full bg-pink-400/80 dark:bg-purple-600/80 hover:bg-pink-500 hover:dark:bg-purple-700 transition duration-300 ease-in-out shadow-md dark:shadow-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-purple-500">
        <svg class="h-6 w-6 text-white dark:text-pink-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full transform translate-x-1/2 -translate-y-1/2">3</span>
      </button>
      <a href="#" class="block relative w-10 h-10 rounded-full overflow-hidden border-2 border-pink-400 dark:border-purple-500 transform transition duration-300 ease-in-out hover:scale-110 shadow-md">
        <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Profile">
        <span class="absolute bottom-0 right-0 h-3 w-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></span>
      </a>
    </div>
  </div>
</nav>

Composant de connexion sociale

Composant de connexion sociale propre, inspiré du code, avec une police monospace, une palette de couleurs neutres et chaudes, adapté aux sites Web gouvernementaux/de services publics. Comprend la conception réactive et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 duration-300 p-4 font-mono antialiased">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-xl dark:shadow-stone-700/50 overflow-hidden border border-stone-200 dark:border-stone-700 transition-colors duration-300">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-center text-stone-800 dark:text-stone-100 uppercase tracking-wide">Log In Securely</h2>
      <p class="text-center text-stone-600 dark:text-stone-300 text-sm sm:text-base">
        Connect using your trusted government-approved accounts.
      </p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-3 sm:py-3.5 border border-stone-300 dark:border-stone-600 rounded-md text-base sm:text-lg font-medium text-stone-700 dark:text-stone-200 bg-stone-50 hover:bg-stone-100 dark:bg-stone-700 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.1a7.9 7.9 0 017.9 7.9c0 4.38-3.538 7.9-7.9 7.9s-7.9-3.52-7.9-7.9c0-4.38 3.538-7.9 7.9-7.9v0zM10.8 12h2.4v-2.4h-2.4V12zm-2.4 0h-2.4v-2.4h2.4V12zm4.8 0h2.4v-2.4h-2.4V12zm-4.8-4.8h2.4v-2.4h-2.4v2.4zm-2.4 0h-2.4v-2.4h2.4v2.4zm4.8 0h2.4v-2.4h-2.4v2.4zm0-4.8h2.4v-2.4h-2.4v2.4z"></path>
          </svg>
          <span>Continue with GovConnect ID</span>
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 sm:py-3.5 border border-stone-300 dark:border-stone-600 rounded-md text-base sm:text-lg font-medium text-stone-700 dark:text-stone-200 bg-stone-50 hover:bg-stone-100 dark:bg-stone-700 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.873V14.89h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.776-3.89 1.094 0 2.24.195 2.24.195v2.454H15.83c-1.222 0-1.6.75-1.6 1.555V12h2.77l-.44 2.89h-2.33v6.983C18.343 21.128 22 16.991 22 12z"></path>
          </svg>
          <span>Sign in with CitizenNet</span>
        </button>
      </div>

      <div class="relative flex justify-center text-xs sm:text-sm text-stone-500 dark:text-stone-400">
        <span class="bg-white dark:bg-stone-800 px-2 z-10">Or continue with credentials</span>
        <div class="absolute inset-y-0 left-0 right-0 h-px bg-stone-200 dark:bg-stone-700 top-1/2 -translate-y-1/2"></div>
      </div>

      <form class="space-y-4">
        <div>
          <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200 tracking-tight mb-1">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 text-stone-900 dark:text-stone-100 bg-stone-50 dark:bg-stone-700 focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:focus:ring-amber-400 dark:focus:border-amber-400 sm:text-base transition-colors duration-200">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200 tracking-tight mb-1">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 text-stone-900 dark:text-stone-100 bg-stone-50 dark:bg-stone-700 focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:focus:ring-amber-400 dark:focus:border-amber-400 sm:text-base transition-colors duration-200">
        </div>

        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-600 rounded bg-stone-50 dark:bg-stone-700 dark:checked:bg-amber-600">
            <label for="remember-me" class="ml-2 block text-stone-600 dark:text-stone-300">
              Remember me
            </label>
          </div>

          <div class="text-right">
            <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">
              Forgot password?
            </a>
          </div>
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-amber-400 transition-colors duration-200">
          Log In
        </button>
      </form>

      <p class="mt-6 text-center text-sm text-stone-600 dark:text-stone-300">
        Need an account? <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Register Now</a>
      </p>
    </div>
  </div>
</div>

Aquarelle/Néon artistique Footer

Un composant de pied de page simple et réactif avec une esthétique aquarelle/artistique et une palette de couleurs néon vibrantes, adapté à un site Web de portfolio. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 text-gray-800 py-8 px-4 sm:px-6 lg:px-8 overflow-hidden dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 dark:text-gray-200">
  <!-- Artistic Overlays (Simulated watercolor effect with gradients) -->
  <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply">
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 rounded-full filter blur-3xl opacity-60 dark:bg-blue-600"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-pink-400 rounded-full filter blur-3xl opacity-60 dark:bg-pink-600"></div>
    <div class="absolute top-1/4 right-0 w-1/3 h-1/3 bg-lime-300 rounded-full filter blur-3xl opacity-60 dark:bg-lime-500"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
    <div class="flex flex-col items-center md:items-start space-y-2">
      <p class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-pink-600 to-lime-600 dark:from-blue-400 dark:via-pink-400 dark:to-lime-400">
        [Your Name/Studio]
      </p>
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; <span id="current-year"></span> All rights reserved.
      </p>
    </div>

    <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2">
      <a href="#" class="text-sm font-medium hover:text-blue-500 transition duration-300 dark:hover:text-blue-300">Home</a>
      <a href="#" class="text-sm font-medium hover:text-pink-500 transition duration-300 dark:hover:text-pink-300">Portfolio</a>
      <a href="#" class="text-sm font-medium hover:text-lime-500 transition duration-300 dark:hover:text-lime-300">About</a>
      <a href="#" class="text-sm font-medium hover:text-purple-500 transition duration-300 dark:hover:text-purple-300">Contact</a>
    </nav>
  </div>

  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

1 ... 36 37 38 39 40 ... 282

Catégories

Tous les composants