Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant d’info-bulle

Un composant d’info-bulle réactif avec des couleurs vives, des micro-interactions et une prise en charge du mode sombre, adapté aux applications industrielles et manufacturières. Affiche des informations sur le survol/la mise au point.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="relative group">
    <!-- Trigger Element -->
    <button
      class="peer px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg 
             focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 
             transition-all duration-300 ease-in-out transform hover:scale-105 
             dark:bg-blue-800 dark:hover:bg-blue-700"
      aria-describedby="tooltip-info"
    >
      <svg class="inline-block w-5 h-5 mr-2 -mt-0.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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.707 6.364l-.707-.707M12 21v-1m-4.636-1.636l-.707.707M3 12H2m1.636-4.636l.707-.707M10 21h4a2 2 0 002-2V9a2 2 0 00-2-2h-4a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
      View Machine Status
    </button>

    <!-- Tooltip Content -->
    <div
      id="tooltip-info"
      role="tooltip"
      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 
             bg-gradient-to-br from-green-500 to-teal-600 text-white text-sm font-medium rounded-lg shadow-xl 
             whitespace-nowrap transition-all duration-300 ease-out 
             opacity-0 invisible 
             group-hover:opacity-100 group-hover:visible group-hover:-translate-y-2 
             group-focus-within:opacity-100 group-focus-within:visible group-focus-within:-translate-y-2 
             dark:from-green-700 dark:to-teal-800 
             sm:text-base"
    >
      
      <div class="relative flex items-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.756a4.898 4.898 0 011.041 3.565A6.003 6.003 0 0124 12c0 2.21-1.229 4.143-3.053 5.176l-1.921 1.921A8.96 8.96 0 0112 24c-2.868 0-5.514-.766-7.85-2.096l-1.921-1.921A6.003 6.003 0 010 12c0-2.21 1.229-4.143 3.053-5.176l1.921-1.921A8.96 8.96 0 0112 0c2.868 0 5.514.766 7.85 2.096l1.921 1.921A6.003 6.003 0 0124 12z"></path></svg>
        Machine #1789: Operating Normally

        <!-- Tail/Arrow for the Tooltip -->
        <svg class="absolute top-full left-1/2 -ml-2 w-4 h-4 text-green-600 dark:text-green-800 rotate-180 -mt-1" fill="currentColor" viewBox="0 0 24 24"><path d="M24 22h-24l12-12z"/></svg>
      </div>

    </div>
  </div>

</div>

Neumorphic_Charity_Success_Message

Un composant de message de réussite simple et réactif conçu avec un style neumorphique doux et une palette de couleurs monochromatiques, adapté aux organisations à but non lucratif et caritatives. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">

  <div class="max-w-md w-full rounded-2xl p-6 md:p-8
    bg-gray-100 shadow-xl-light dark:bg-gray-800 dark:shadow-xl-dark
    text-center border border-gray-200 dark:border-gray-700">

    <div class="mb-6">
      <svg class="mx-auto h-20 w-20 text-indigo-500 mb-4"
        fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2
        drop-shadow-sm dark:drop-shadow-lg">Donation Successful!</h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        Thank you for your generous contribution.
      </p>
    </div>

    <p class="text-gray-500 dark:text-gray-400 mb-6 leading-relaxed">
      Your support will make a significant impact on our cause and help us continue our vital work.
      We are deeply grateful for your kindness.
    </p>

    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
      <button type="button" class="w-full py-3 px-6 rounded-xl
        bg-indigo-500 text-white font-semibold text-lg
        shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark
        hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75
        transform transition-transform duration-200 ease-in-out active:scale-95">
        Share Your Impact
      </button>
      <button type="button" class="w-full py-3 px-6 rounded-xl
        bg-gray-200 text-gray-700 font-semibold text-lg
        shadow-neumorphic-button-reverse-light dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-button-reverse-dark
        hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75
        transform transition-transform duration-200 ease-in-out active:scale-95">
        View Receipt
      </button>
    </div>

  </div>

  <style>
    .shadow-xl-light {
      box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
    }
    .dark .shadow-xl-dark {
      box-shadow: 10px 10px 20px #212121, -10px -10px 20px #3f3f3f;
    }

    .shadow-neumorphic-button-light {
      box-shadow: 6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-button-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #444444;
    }

    .shadow-neumorphic-button-reverse-light {
      box-shadow: inset 6px 6px 12px #9a9a9a, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-button-reverse-dark {
      box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #444444;
    }
  </style>

</div>

Composant de menu déroulant

Un composant de menu déroulant simple de style industriel pour les sites Web d’actualités/journalisme, avec une palette de couleurs forêt/vert et la prise en charge du mode sombre. Conçu pour être réactif sur tous les appareils.

Ouvrir Aperçu

                <div class="relative flex justify-center items-center font-sans dark:bg-gray-900 bg-gray-100 p-4">
  <div class="group relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center items-center w-full rounded-md border border-gray-400 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 dark:focus:ring-emerald-600 transition-all duration-300" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Sections
        <svg class="-mr-1 ml-2 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="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!--
      Dropdown menu, show/hide based on menu state.

      Entering: "transition ease-out duration-100"
        From: "transform opacity-0 scale-95"
        To: "transform opacity-100 scale-100"
      Leaving: "transition ease-in duration-75"
        From: "transform opacity-100 scale-100"
        To: "transform opacity-0 scale-95"
    -->
    <div class="opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 duration-200 ease-out origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none transition-all" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">Latest News</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">Politics</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">Business</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">Technology</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">Opinion</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">Sports</a>
      </div>
    </div>
  </div>
</div>

Composant de plan du site

Un composant de plan de site complexe et réactif avec un style d’entreprise/professionnel et une palette de couleurs de terre, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-stone-50 text-stone-700 dark:bg-stone-900 dark:text-stone-300 py-12 md:py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-12">

      <!-- Company Info / Logo -->
      <div class="md:col-span-2 lg:col-span-2">
        <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <a href="#" class="flex items-center space-x-2">
            <svg class="h-8 w-8 text-amber-600 dark:text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9Fehmeda 9H3m9-9a9 9 0 00-9 9m-9-9h16.5a2.25 2.25 0 012.25 2.25v1.5a2.25 2.25 0 01-2.25 2.25H3.75a2.25 2.25 0 01-2.25-2.25V6.75a2.25 2.25 0 012.25-2.25H12" />
            </svg>
            <span class="block">AcmeCorp</span>
          </a>
        </h2>
        <p class="mt-4 text-stone-600 dark:text-stone-400 leading-relaxed max-w-sm">
          Building a sustainable future through innovative solutions and unwavering commitment to excellence.
        </p>
        <div class="mt-6 flex space-x-4">
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">Facebook</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22h7.493c4.613-.755 8.167-4.508 8.167-9.879z" clip-rule="evenodd" /></svg></a>
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">LinkedIn</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" /></svg></a>
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">Twitter</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.007-.532A11.022 11.022 0 0022 5.92a10.847 10.847 0 01-3.148.815A4.771 4.771 0 0019.426 3.7c.905-.541 1.791-1.295 2.617-2.196a11.396 11.396 0 01-3.69 1.408A4.757 4.757 0 0015.65 0c-2.073 0-3.75 1.677-3.75 3.75 0 .296.033.583.092.86S10.59 5 10.3 5.485C6.591 2.502 3.82 1.34 1.75 0 1.258.463.81 1 0 1.636 1.748 3.064 3.728 4.095 5.922 4.095c-.352 2.25 1.096 4.3 3.322 4.764a4.57 4.57 0 01-2.148.069c.563 1.332 1.632 2.3 2.923 2.628a9.886 9.886 0 01-6.104 2.158c-.378 0-.756-.022-1.13-.067.8 2.25 2.474 3.996 4.744 4.558-.093 0-.187-.008-.28-.008-.43 0-.853-.024-1.28-.072C4.195 20.358 1.94 21.054 0 21.292a11.127 11.127 0 006 1.838c7.886 0 12.87-6.9 12.87-12.873 0-.196-.005-.39-.013-.585A8.67 8.67 0 0022 4.4z" /></svg></a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              About Us
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Our Services
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Portfolio
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              News & Blog
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Careers
            </a>
          </li>
        </ul>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Help Center
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              FAQs
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Support Docs
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Customer Stories
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Partnerships
            </a>
          </li>
        </ul>
      </div>

      <!-- Legal & Contact -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Legal & Contact</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Privacy Policy
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Terms of Service
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Cookie Policy
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Contact Us
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Site Map
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="mt-12 border-t border-stone-200 dark:border-stone-700 pt-8 text-center text-sm text-stone-500 dark:text-stone-400">
      <p>&copy; <span id="current-year"></span> AcmeCorp. All rights reserved.</p>
      <p class="mt-2">Powered by Innovation. Built for the Future.</p>
    </div>
  </div>
</footer>

<script>
  // Dynamically set the current year for the copyright notice
  document.getElementById('current-year').textContent = new Date().getFullYear();

  // Basic dark mode toggle for demonstration (optional, often managed by a higher-level framework)
  // To make dark mode work, you'd typically have a button somewhere on your page
  // or rely on the user's system preferences with Tailwind's 'class' dark mode strategy.
  // This snippet is just to show the HTML output is ready for dark mode.
  // Example of a toggle (you'd need a button to trigger this):
  /*
  const htmlElement = document.documentElement;
  const isDarkMode = localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);

  if (isDarkMode) {
    htmlElement.classList.add('dark');
  } else {
    htmlElement.classList.remove('dark');
  }

  function toggleDarkMode() {
    if (htmlElement.classList.contains('dark')) {
      htmlElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      htmlElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
  }
  */
</script>

ArtDeco_SaaS_MegaMenu

Un composant de méga menu simple et réactif conçu avec une esthétique Art Déco, utilisant une palette de couleurs violet/violet, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-gradient-to-r from-purple-800 to-indigo-900 text-white dark:from-gray-900 dark:to-black font-serif shadow-lg">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center">
    <a href="#" class="text-2xl font-bold tracking-wider uppercase text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out transform hover:scale-105">
      SaaSymmetry
    </a>
    
    <!-- Mobile Menu Button -->
    <button class="md:hidden focus:outline-none" aria-label="Toggle menu">
      <svg class="w-8 h-8 text-purple-200 dark:text-purple-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="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Desktop Menu (visible on md and up) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12">
      <div class="relative group">
        <button class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Features</button>
        <div class="absolute hidden group-hover:block bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-800 dark:to-gray-950 shadow-xl rounded-lg mt-3 p-6 min-w-[200px] z-10 border border-purple-700 dark:border-gray-700">
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Analytics</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Automation</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Integrations</a>
        </div>
      </div>
      
      <div class="relative group">
        <button class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Solutions</button>
        <div class="absolute hidden group-hover:block bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-800 dark:to-gray-950 shadow-xl rounded-lg mt-3 p-6 min-w-[200px] z-10 border border-purple-700 dark:border-gray-700">
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Enterprise</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Small Business</a>
        </div>
      </div>

      <a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Pricing</a>
      <a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Contact</a>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, can be toggled by JS) -->
  <!-- For a purely HTML/CSS solution, this would typically be hidden and revealed with a :checked pseudo-class on a hidden checkbox, 
       but that gets complex for nested menus without JS. This is illustrative for positioning. -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 text-center">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Features</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Solutions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Pricing</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Contact</a>
    </div>
  </div>
</nav>

Composant de navigation ludique

Un composant de navigation ludique et attrayant conçu pour les plateformes éducatives, avec des couleurs vives, des éléments arrondis et un contraste élevé pour une lisibilité facile. Il prend en charge le mode sombre et est entièrement réactif.

Ouvrir Aperçu

                <nav class="flex justify-center px-4 py-3 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 shadow-xl rounded-b-3xl dark:from-gray-800 dark:via-gray-900 dark:to-black sm:px-6 md:px-8 lg:px-10 xl:px-12" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
    <li>
      <a href="#" class="flex items-center text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
        <svg class="w-5 h-5 mr-1 sm:mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
        <span class="font-semibold text-sm sm:text-base">Home</span>
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
        <a href="#" class="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
          <span class="font-medium text-sm sm:text-base">Courses</span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
        <a href="#" class="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
          <span class="font-medium text-sm sm:text-base">Web Development</span>
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
        <span class="ml-1 sm:ml-2 text-yellow-100 font-bold drop-shadow-lg text-sm sm:text-base dark:text-orange-400">
          Mastering Tailwind CSS
        </span>
      </div>
    </li>
  </ol>
</nav>

Industrial_Sepia_Medical_Modal

Un composant modal simple et réactif avec une esthétique industrielle et des matières premières, utilisant des tons sépia/bruns, conçu pour les applications médicales/de santé, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-85 flex items-center justify-center p-4 z-50">
  <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl max-w-lg w-full transform transition-all duration-300 ease-out scale-95 opacity-0 sm:scale-100 sm:opacity-100 border border-stone-400 dark:border-stone-700 overflow-hidden">
    <!-- Header -->
    <div class="bg-stone-300 dark:bg-stone-700 p-4 border-b border-stone-400 dark:border-stone-600 flex justify-between items-center">
      <h3 class="text-lg font-mono tracking-wide uppercase text-stone-800 dark:text-stone-200">Patient Details</h3>
      <button class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 p-1 rounded-full">
        <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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Body -->
    <div class="p-6 space-y-4 text-stone-700 dark:text-stone-300">
      <div class="flex items-center space-x-4">
        <img class="w-16 h-16 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Patient Avatar">
        <div>
          <p class="font-semibold text-xl">John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">ID: P102938</p>
        </div>
      </div>
      <p class="text-sm text-stone-800 dark:text-stone-200 leading-relaxed font-mono">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
        <div>
          <p class="font-medium">Age:</p>
          <p>45</p>
        </div>
        <div>
          <p class="font-medium">Blood Type:</p>
          <p>O+</p>
        </div>
        <div>
          <p class="font-medium">Last Visit:</p>
          <p>2023-10-26</p>
        </div>
        <div>
          <p class="font-medium">Status:</p>
          <p><span class="px-2 py-0.5 rounded-full bg-yellow-600 dark:bg-yellow-700 text-white text-xs font-semibold">Stable</span></p>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="bg-stone-300 dark:bg-stone-700 p-4 border-t border-stone-400 dark:border-stone-600 flex justify-end space-x-3">
      <button class="px-5 py-2 text-sm font-mono tracking-wide text-stone-700 dark:text-stone-300 bg-stone-400 dark:bg-stone-600 hover:bg-stone-500 dark:hover:bg-stone-500 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-300 dark:focus:ring-offset-stone-700">
        Close
      </button>
      <button class="px-5 py-2 text-sm font-mono tracking-wide text-white bg-amber-700 dark:bg-amber-800 hover:bg-amber-800 dark:hover:bg-amber-900 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-300 dark:focus:ring-offset-stone-700">
        View Record
      </button>
    </div>
  </div>
</div>

Navigation brutaliste

Un composant de navigation d’inspiration brutaliste pour les systèmes de réservation, avec un contraste élevé, en noir et blanc avec une couleur d’accent vive, et une réactivité totale avec la prise en charge du mode sombre. Chaque étape est clairement délimitée par une typographie audacieuse et un séparateur unique.

Ouvrir Aperçu

                <nav class="bg-white px-4 py-3 border-b-4 border-black font-mono dark:bg-black dark:border-white sm:px-6 lg:px-8" aria-label="Breadcrumb">
  <ol role="list" class="flex flex-wrap items-center space-x-0.5 sm:space-x-1.5">
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 pr-1 dark:text-white dark:hover:text-red-500">
        Booking
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Select Service
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Choose Date & Time
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Confirm Details
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center">
      <span class="text-red-500 uppercase text-sm font-extrabold tracking-widest px-1 dark:text-red-500" aria-current="page">
        Payment
      </span>
    </li>
  </ol>
</nav>

Composant de curseur de carrousel

Un composant de curseur de carrousel complexe et réactif avec une palette de couleurs triadique pour les entreprises/professionnels, conçu pour la présentation de données météorologiques/climatiques. Inclut la prise en charge du mode sombre et utilise le HTML sémantique.

Ouvrir Aperçu

                <div class="relative w-full max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900 overflow-hidden">
  <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-10">Global Climate Insights</h2>

  <div class="relative flex items-center justify-center">
    <button aria-label="Previous slide" class="absolute left-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
      <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
      </svg>
    </button>

    <div class="w-full overflow-hidden">
      <div class="flex transition-transform duration-500 ease-in-out" style="transform: translateX(0%);">
        <!-- Slide 1 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1025/600/400" alt="Rainfall Pattern" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">HOT TOPIC</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Global Rainfall Patterns</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Analyzes the shifts in precipitation, highlighting regions susceptible to drought and flooding due to climate change.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>3,200 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                <span>March 15, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Leo Thompson</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Climatologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1018/600/400" alt="Temperature Trends" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-teal-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">NEW RESEARCH</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Arctic Ice Melt Projections</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Examines the rapid melting of polar ice caps and its significant implications for global sea levels and ecosystems.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>5,100 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                <span>Feb. 28, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Sofia Rossi</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Oceanographer</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1060/600/400" alt="Extreme Weather Events" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-cyan-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">FEATURED</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Frequency of Extreme Weather</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Investigates the rising occurrence of severe storms, heatwaves, and wildfires globally, linking them to changing climate.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>4,500 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                <span>Jan. 20, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/women/52.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Prof. Clara Davies</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Meteorologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 4 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1029/600/400" alt="Ocean Acidification" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">URGENT</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Ocean Acidification Impacts</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Details the increasing acidity of oceans due to CO2 absorption and its devastating effects on marine life and coral reefs.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>6,800 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                <span>Dec. 5, 2022</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. James Chen</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Marine Biologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <button aria-label="Next slide" class="absolute right-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
      <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>

  <div role="tablist" aria-label="Carousel pagination" class="flex justify-center mt-8 space-x-2">
    <button role="tab" aria-selected="true" aria-controls="slide-1" class="w-3 h-3 bg-cyan-600 dark:bg-cyan-400 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-2" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-3" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-4" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
  </div>
</div>

Memphis_Pastel_Food_Badges_Component

Un composant de badges complexe et réactif pour les sites Web de restauration, inspiré de Memphis Design avec une palette de couleurs pastel. Présente des formes géométriques, des motifs ludiques et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-purple-950 dark:via-pink-950 dark:to-yellow-950 min-h-screen font-sans">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-200 mb-8 sm:mb-12 text-center relative z-10">
    <span class="block relative z-10">Today's Specials <span class="text-pink-600 dark:text-pink-400">&amp;</span> Perks!</span>
    <span class="absolute inset-x-0 bottom-0 h-4 bg-yellow-300 dark:bg-yellow-700 transform -skew-x-12 origin-top-left z-0"></span>
  </h2>

  <!-- Badges Container Grid -->
  <div class="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">

    <!-- Badge 1: Discount -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-pink-500/20 border-4 border-yellow-300 dark:border-yellow-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-8 -left-8 w-24 h-24 bg-pink-300 dark:bg-pink-700 rounded-full opacity-70 group-hover:rotate-45 transition-transform duration-500"></div>
      <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-200 dark:bg-purple-600 rounded-lg transform rotate-12 opacity-70 group-hover:-rotate-12 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-pink-500 dark:text-pink-400 mb-4 transform rotate-3 origin-center group-hover:rotate-0 transition-transform duration-300">25%</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Off Your First Order!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Enjoy a fantastic saving on your initial culinary adventure.</p>
        <button class="px-6 py-3 bg-purple-500 dark:bg-purple-700 text-white rounded-full font-semibold shadow-md hover:bg-purple-600 dark:hover:bg-purple-800 transition duration-300 transform -skew-x-6">
          Claim Now!
        </button>
        <span class="absolute top-2 right-2 text-yellow-500 dark:text-yellow-400 transform -rotate-12 text-lg font-bold">⭐ Hot Deal!</span>
      </div>
    </div>

    <!-- Badge 2: Free Delivery -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-yellow-500/20 border-4 border-pink-300 dark:border-pink-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-10 -right-10 w-28 h-28 bg-yellow-300 dark:bg-yellow-700 rounded-full opacity-70 group-hover:-translate-y-2 transition-transform duration-500"></div>
      <div class="absolute -bottom-8 -left-8 w-20 h-20 bg-pink-200 dark:bg-pink-600 rounded-xl transform -rotate-6 opacity-70 group-hover:rotate-6 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-green-500 dark:text-green-400 mb-4 transform -rotate-3 origin-center group-hover:rotate-0 transition-transform duration-300">🚚</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Free Delivery!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">No delivery fees on orders over $25. Get your food delivered for free.</p>
        <button class="px-6 py-3 bg-yellow-500 dark:bg-yellow-700 text-white rounded-full font-semibold shadow-md hover:bg-yellow-600 dark:hover:bg-yellow-800 transition duration-300 transform skew-x-6">
          Order Now!
        </button>
        <span class="absolute top-2 left-2 text-purple-500 dark:text-purple-400 transform rotate-12 text-lg font-bold">🎉 Limited Time!</span>
      </div>
    </div>

    <!-- Badge 3: Loyalty Program -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-purple-500/20 border-4 border-purple-300 dark:border-purple-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-6 left-1/4 w-20 h-20 bg-purple-300 dark:bg-purple-700 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>
      <div class="absolute -bottom-6 right-1/4 w-24 h-24 bg-yellow-200 dark:bg-yellow-600 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>
      <div class="absolute top-1/2 left-3 w-16 h-4 bg-pink-400 dark:bg-pink-700 transform -rotate-12 opacity-70 group-hover:rotate-0 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-purple-500 dark:text-purple-400 mb-4 transform -skew-y-3 origin-center group-hover:skew-y-0 transition-transform duration-300">💎</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Loyalty Rewards</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Earn points with every purchase and redeem them for exclusive discounts.</p>
        <button class="px-6 py-3 bg-pink-500 dark:bg-pink-700 text-white rounded-full font-semibold shadow-md hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-300 transform -skew-x-6">
          Join Now!
        </button>
        <span class="absolute bottom-2 right-2 text-orange-500 dark:text-orange-400 text-lg font-bold">⭐ VIP Perks!</span>
      </div>
    </div>

    <!-- Badge 4: Special Dish Highlight -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-green-500/20 border-4 border-orange-300 dark:border-orange-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-4 -right-4 w-20 h-20 bg-orange-300 dark:bg-orange-700 rounded-full opacity-70 group-hover:translate-x-2 transition-transform duration-500"></div>
      <div class="absolute bottom-2 left-2 w-16 h-16 bg-green-200 dark:bg-green-600 rounded-xl transform rotate-45 opacity-70 group-hover:-rotate-45 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Spicy Noodles" class="w-24 h-24 rounded-full object-cover border-4 border-yellow-400 dark:border-yellow-500 mb-4 transition-transform duration-300 group-hover:scale-105 group-hover:rotate-6">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Chef's Spicy Noodles!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">A fiery blend of flavors, our new special is a must-try!</p>
        <button class="px-6 py-3 bg-green-500 dark:bg-green-700 text-white rounded-full font-semibold shadow-md hover:bg-green-600 dark:hover:bg-green-800 transition duration-300 transform skew-x-6">
          View Dish
        </button>
        <span class="absolute top-2 right-2 text-red-500 dark:text-red-400 font-bold text-xl">🌶️ New!</span>
      </div>
    </div>

    <!-- Badge 5: Limited Time Offer -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-red-500/20 border-4 border-yellow-300 dark:border-yellow-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-10 -left-10 w-28 h-28 bg-red-300 dark:bg-red-700 rounded-lg transform -rotate-12 opacity-70 group-hover:rotate-0 transition-transform duration-500"></div>
      <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-purple-200 dark:bg-purple-600 rounded-full opacity-70 group-hover:translate-x-2 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <span class="text-6xl font-black text-red-500 dark:text-red-400 mb-4 transform scale-90 group-hover:scale-100 transition-transform duration-300 rotate-6">⏳</span>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Flash Sale!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Selected items at 30% off for the next 24 hours only!</p>
        <button class="px-6 py-3 bg-red-500 dark:bg-red-700 text-white rounded-full font-semibold shadow-md hover:bg-red-600 dark:hover:bg-red-800 transition duration-300 transform -skew-x-6">
          Shop Now!
        </button>
        <span class="absolute top-2 right-2 text-yellow-500 dark:text-yellow-400 font-bold text-lg">⏰ Hurry!</span>
      </div>
    </div>

    <!-- Badge 6: New Restaurant Highlight -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-blue-500/20 border-4 border-pink-300 dark:border-pink-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-8 right-1/4 w-24 h-24 bg-blue-300 dark:bg-blue-700 rounded-xl opacity-70 group-hover:rotate-90 transition-transform duration-500"></div>
      <div class="absolute -bottom-4 left-1/4 w-20 h-20 bg-pink-200 dark:bg-pink-600 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/100/100?random=2" alt="Restaurant Icon" class="w-24 h-24 rounded-full object-cover border-4 border-purple-400 dark:border-purple-500 mb-4 transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-6">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Newcomer: "Flavor Fiesta"</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Discover authentic Mexican cuisine, now available for delivery!</p>
        <button class="px-6 py-3 bg-blue-500 dark:bg-blue-700 text-white rounded-full font-semibold shadow-md hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 transform skew-x-6">
          Explore Dishes
        </button>
        <span class="absolute bottom-2 left-2 text-yellow-500 dark:text-yellow-400 font-bold text-lg">✨ Fresh!</span>
      </div>
    </div>

  </div>

  <!-- Call to Action / Footer Section -->
  <div class="mt-12 sm:mt-16 md:mt-20 text-center">
    <p class="text-lg text-purple-800 dark:text-purple-200 mb-4">
      Ready to indulge? Explore more delicious deals!
    </p>
    <a href="#" class="inline-block px-8 py-4 bg-pink-500 dark:bg-pink-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-300 transform hover:scale-105 -skew-x-6 dark:shadow-pink-500/30">
      See All Offers!
      <span class="ml-2 inline-block transform group-hover:translate-x-1 transition-transform duration-300">→</span>
    </a>
  </div>

</div>

1 ... 20 21 22 23 24 ... 335

Rechercher des composants

Catégories

Tous les composants