Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Organic_Nature_ProgressBar

Un composant de barre de progression à thème rétro inspiré de la nature pour les applications industrielles et manufacturières, avec des lignes fluides, des couleurs sourdes et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-amber-100 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-stone-700 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.02] border-t-4 border-l-4 border-stone-200 dark:border-stone-600">
    <div class="p-6 sm:p-8 flex items-center justify-between border-b border-stone-200 dark:border-stone-600">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 font-serif tracking-wide">Production Progress</h2>
      <span class="px-4 py-2 bg-gradient-to-tr from-orange-400 to-amber-500 text-white text-sm sm:text-base font-semibold rounded-full shadow-md transform hover:scale-105 transition-transform duration-200 ease-out">Batch #235</span>
    </div>
    <div class="p-6 sm:p-8 md:p-10">
      <div class="mb-6">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Component Assembly</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-teal-500 to-emerald-600 dark:from-teal-600 dark:to-emerald-700 rounded-full transition-all duration-500 ease-out" style="width: 75%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>75% Complete</span>
                <span class="text-xs sm:text-sm">Stage 3 of 4</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
          <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-1">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="10"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-teal-500 dark:fill-teal-600" width="75%" height="100%" filter="url(#wavy-fill-1)" x="0" y="0"/>
          </svg>
        </div>
      </div>

      <div class="mb-6">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Quality Assurance</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-yellow-500 to-orange-500 dark:from-yellow-600 dark:to-orange-600 rounded-full transition-all duration-500 ease-out" style="width: 40%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>40% Scanned</span>
                <span class="text-xs sm:text-sm">Remaining: 60%</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
           <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-2">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="20"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-yellow-500 dark:fill-yellow-600" width="40%" height="100%" filter="url(#wavy-fill-2)" x="0" y="0"/>
          </svg>
        </div>
      </div>

      <div>
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Final Packaging</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-violet-500 to-purple-600 dark:from-violet-600 dark:to-purple-700 rounded-full transition-all duration-500 ease-out" style="width: 90%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>90% Packed</span>
                <span class="text-xs sm:text-sm">Next: Shipping</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
          <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-3">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="30"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-violet-500 dark:fill-violet-600" width="90%" height="100%" filter="url(#wavy-fill-3)" x="0" y="0"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 text-center border-t border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800">
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base">Last updated: <span class="font-medium text-gray-700 dark:text-gray-200">2023-10-27 14:35 PST</span></p>
    </div>
  </div>
</div>

Composant de curseur de carrousel monospace

Un composant de curseur de carrousel simple, propre, inspiré du monospace, pour l’affichage de blogs/contenus, conçu avec une palette de couleurs analogue et une réactivité totale, y compris le mode sombre.

Ouvrir Aperçu

                <div class="relative w-full max-w-4xl mx-auto py-8 font-mono text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
  <h2 class="text-2xl font-bold text-center mb-6 px-4 text-emerald-700 dark:text-emerald-300">[CODE] Latest Articles [/]</h2>

  <!-- Carousel Wrapper -->
  <div class="flex overflow-x-scroll snap-x snap-mandatory scrollbar-hide space-x-4 px-4 pb-4 md:scroll-auto md:overflow-x-hidden md:flex-wrap md:justify-center">
    <!-- Slice 1 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=1" alt="Article Image 1">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] WebDev [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// From Dev to Deploy: A Journey</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Exploring the intricate pipeline from writing the first line of code to seeing it live in production...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 2 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=2" alt="Article Image 2">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] AI & ML [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// The Rise of Generative Models</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Delving into the exciting world of AI's generative capabilities and their impact on creativity and industry...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 3 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=3" alt="Article Image 3">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] Cybersecurity [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// Securing Your Digital Fortress</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Best practices and essential tools for protecting your data and privacy in an increasingly connected world...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 4 (hidden on smaller screens, appears on md and up) -->
    <div class="hidden md:flex flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=4" alt="Article Image 4">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] Cloud Computing [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// Serverless Architectures Explored</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">A deep dive into the benefits and challenges of building applications without managing servers...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>
  </div>

  <!-- Scroll Indicator for mobile (optional visual flair) -->
  <div class="block md:hidden text-center text-xs text-gray-500 dark:text-gray-400 mt-4 px-4">
    &lt; SCROLL FOR MORE &gt;
  </div>

  <!-- Tailwind Typography plugin classes are used for line-clamp. If you don't have this plugin installed, 
       replace line-clamp-3 with fixed height and hidden overflow, e.g., 'h-16 overflow-hidden' -->

  <!-- To make the scrollbar-hide work, you need to install the Tailwind CSS Scrollbar Hiding Plugin: -->
  <!-- npm install tailwindcss-scrollbar-hide -->
  <!-- Then add it to your tailwind.config.js: -->
  <!-- plugins: [require('tailwindcss-scrollbar-hide')] -->
</div>

Composant de pied de page cyberpunk

Un composant de pied de page simple et réactif avec une esthétique cyberpunk futuriste utilisant des tons violets/violets, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-black text-gray-300 py-8 px-4 sm:px-6 lg:px-8 shadow-inner shadow-purple-900/50 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto flex flex-col items-center justify-between md:flex-row">
    
    <!-- Logo/Brand Name (Left/Top) -->
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <a href="#" class="text-2xl font-extrabold tracking-tight text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out glow-text">
        SYNAPTIC.AI
      </a>
      <p class="text-xs text-purple-600 mt-1 dark:text-purple-500">Unlocking Future Potential</p>
    </div>

    <!-- Navigation Links (Center) -->
    <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 mb-4 md:mb-0">
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Products
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Solutions
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Pricing
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
    </nav>

    <!-- Copyright (Right/Bottom) -->
    <div class="text-center md:text-right">
      <p class="text-xs text-purple-700 dark:text-purple-600">&copy; 2077 SYNAPTIC.AI. All rights reserved.</p>
    </div>
  </div>
</footer>

<style>
  /* This style block is for demonstration and not part of the standard Tailwind CSS utility approach.
     It's meant to achieve a 'neon glow' effect which is typically done with custom CSS 
     or by extending Tailwind's config with plugins. For pure utility classes, 
     consider alternatives like shadow-lg with a colored shadow.
     For this specific request, a minimal custom CSS for the 'glow' is used. */
  .glow-text {
    text-shadow: 0 0 5px rgba(192, 132, 252, 0.7),
                 0 0 10px rgba(192, 132, 252, 0.5),
                 0 0 15px rgba(192, 132, 252, 0.3);
  }
  .dark .glow-text {
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.8),
                 0 0 10px rgba(168, 85, 247, 0.6),
                 0 0 15px rgba(168, 85, 247, 0.4);
  }
</style>

Composant de réinitialisation de mot de passe - Glassmorphism Grayscale

Un composant de réinitialisation de mot de passe sur le thème du glassmorphism avec une palette de couleurs en niveaux de gris, avec des champs de saisie et des boutons translucides semblables à du verre dépoli. Conçu pour la réactivité et inclut la prise en charge du mode sombre. Bien que le but soit la météo/le climat, le formulaire de réinitialisation du mot de passe lui-même est générique.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 duration-300">
  <div class="w-full max-w-md p-8 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 border-opacity-30 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-3xl">
    <h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Reset Password</h2>
    <p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto drop-shadow-sm">Enter your email address below and we'll send you a link to reset your password.</p>

    <form class="space-y-6">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-5 py-3 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-gray-300 border-opacity-50 dark:border-gray-600 dark:border-opacity-50 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm"
          placeholder="[email protected]">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gray-700 bg-opacity-80 dark:bg-gray-600 dark:bg-opacity-80 hover:bg-gray-800 hover:bg-opacity-90 dark:hover:bg-gray-700 dark:hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        Remember your password?
        <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:rounded-sm">
          Log in
        </a>
      </p>
    </div>
  </div>
</div>

Industrial_Success_Message

Un composant de message de réussite simple, de style industriel, avec des neutres chauds, conçu pour les outils CRM/Business, avec une esthétique de matière première et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 font-sans">
  <div class="max-w-md mx-auto border-2 border-stone-300 dark:border-stone-600 rounded-md shadow-lg overflow-hidden bg-stone-50 dark:bg-stone-900 transition-colors duration-300">
    <div class="flex items-center p-4 bg-stone-200 dark:bg-stone-700 border-b border-stone-300 dark:border-stone-600">
      <svg class="w-8 h-8 text-green-600 dark:text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h2 class="text-lg sm:text-xl font-semibold text-stone-900 dark:text-stone-100">Success!</h2>
    </div>
    <div class="p-4 sm:p-5">
      <p class="text-sm sm:text-base mb-4 leading-relaxed">
        Your action has been processed successfully. The data has been securely saved and is now available in your records.
      </p>
      <div class="text-xs text-stone-600 dark:text-stone-400 border-t border-stone-200 dark:border-stone-700 pt-3 flex justify-between items-center">
        <span>Transaction ID: <span class="font-mono">#CRM78901</span></span>
        <time datetime="2023-10-27T10:30:00Z" class="block mt-1 sm:mt-0">Oct 27, 2023, 10:30 AM</time>
      </div>
    </div>
  </div>
</div>

Composant de navigation en pied de page

Composant de navigation de pied de page inspiré de l’agriculture et de la nature pour une place de marché, avec des lignes fluides, une palette de couleurs analogues, plusieurs sections et un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-950 dark:to-emerald-950 text-gray-800 dark:text-gray-200 py-12 md:py-16 overflow-hidden relative">
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
    <svg class="w-full h-full" viewBox="0 0 1000 300" preserveAspectRatio="xMidYMid slice">
      <path fill="currentColor" d="M0,100 C150,200 350,0 500,100 S850,200 1000,100 L1000,300 L0,300 Z" />
    </svg>
  </div>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
      <div class="flex flex-col items-start lg:col-span-2">
        <a href="#" class="text-3xl font-bold text-teal-600 dark:text-emerald-400 mb-4 tracking-tight font-serif">
          NatureNest
        </a>
        <p class="text-sm leading-relaxed mb-6 max-w-sm">
          Discover unique treasures and artisan crafts from around the globe, with a focus on sustainable and handmade products.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056 8.96 0 10.154.044 10.154.044s.927-.005 3.71-.161c2.83-.15 4.093-1.077 4.093-1.077s.9-.785 1.554-2.585c.654-1.8.654-2.33 1.134-4.885.48-2.555.444-4.07 0-5.59-1.2-4.032-4.757-5.504-4.757-5.504s-.897-.978-2.066-1.554c-1.169-.576-2.504-.576-2.617-.576-2.065 0-3.328.086-4.524.195-.081-.005-2.06-.017-3.715-.056C7.575-2.006 7.227-1.993 4.797-1.993c-2.43 0-2.784-.013-3.715-.056C-7.868-2.006-8.243-2.006-8.243-2.006s-.927.005-3.71.161c-2.83.15-4.093 1.077-4.093 1.077s-.9.785-1.554 2.585c-.654 1.8-.654 2.33-1.134 4.885-.48 2.555-.444 4.07 0 5.59 1.2 4.032 4.757 5.504 4.757 5.504s-.897.978-2.066 1.554c-1.169.576-2.504.576-2.617.576-2.065 0-3.328-.086-4.524-.195-.081.005-2.06.017-3.715.056C-.415 2.006.014 1.993 2.444 1.993c2.43 0 2.784.013 3.715.056C12.315 2 12.315 2 12.315 2z" />
            </svg>
          </a>
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.31c-.1.08-.22.1-.34.1-.12 0-.25-.02-.37-.08a.98.98 0 01-.7-.7-.99.99 0 010-.7c.07-.12.18-.22.3-.28.1-.06.21-.09.32-.09.11 0 .22.03.32.09.12.06.22.15.29.28.08.1.1.22.1.34 0 .12-.02.25-.08.37a.9.9 0 01-.28.3c-.07.06-.18.1-.3.1zM5 12h14v-2H5v2zm0-4h14V6H5v2zm0 8h14v-2H5v2z" />
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.23 2.636 7.85 6.305 9.245-.583-.243-1.077-.492-1.52-.772A.99.99 0 016 20.89c0-.447.18-.86.495-1.155.074-.069 1.157-1.18 1.157-1.18a.99.99 0 01.707-.293h.001c.266 0 .52.105.707.293l1.165 1.164a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365a.99.99 0 01.152.365l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707a.99.99 0 010 1.414c-.39.39-1.023.39-1.414 0a.99.99 0 010-1.414l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c.195.195.512.195.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707zM12 21a9 9 0 100-18 9 9 0 000 18z" clip-rule="evenodd"/>
            </svg>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Shop</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Handmade Crafts</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Organic Produce</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Garden & Home</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Wellness & Beauty</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Seasonal Collections</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Sell</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Start Selling</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shop Setup</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Vendor Tools</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Community Guidelines</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Partner Program</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Help</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">FAQs</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shipping & Returns</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Terms of Service</a></li>
        </ul>
      </div>

      <div class="lg:col-span-1">
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Join Our Community</h3>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4">Subscribe to our newsletter for exclusive offers and updates.</p>
        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-white dark:bg-gray-800 border border-teal-200 dark:border-emerald-700 focus:ring-2 focus:ring-teal-400 dark:focus:ring-emerald-500 outline-none text-gray-800 dark:text-gray-200 text-sm">
          <button type="submit" class="bg-teal-600 hover:bg-teal-700 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-lg shadow-md transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-emerald-500 dark:focus:ring-offset-gray-950">
            Subscribe
          </button>
        </form>
        <div class="mt-8">
          <h4 class="text-md font-semibold text-teal-700 dark:text-emerald-300 mb-3">Latest from our blog</h4>
          <a href="#" class="flex items-center space-x-3 group">
            <img src="https://picsum.photos/60/60?random=1" alt="Blog post thumbnail" class="w-12 h-12 rounded-lg object-cover border-2 border-teal-300 dark:border-emerald-600 group-hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-teal-600 dark:group-hover:text-emerald-400 transition-colors duration-200">Crafting Sustainability: A Guide for Artisans</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">Oct 26, 2023</span>
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="border-t border-teal-200 dark:border-emerald-800 pt-8 mt-12 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; 2023 NatureNest. All rights reserved. Made with <span class="text-red-500" aria-label="Love">&#x2764;</span> for a better world.
      </p>
    </div>
  </div>
</footer>

Composant Messages d’erreur - Alimentation/Restaurant

Un composant de message d’erreur triadique complexe, inspiré du papier/de l’impression, pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et une réactivité totale. Comporte plusieurs éléments interactifs simulant une impression physique.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-gray-950 dark:to-gray-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-4xl w-full rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] dark:shadow-2xl dark:shadow-rose-950/50 bg-yellow-50 dark:bg-gray-800 text-gray-800 dark:text-gray-100 border border-gray-200 dark:border-gray-700 relative">
    <!-- Paper textured background with torn edges effect -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-20 dark:opacity-5
    before:absolute before:inset-x-0 before:top-0 before:h-4 before:bg-gradient-to-b before:from-yellow-50 before:to-transparent before:dark:from-gray-800 before:dark:to-transparent
    after:absolute after:inset-x-0 after:bottom-0 after:h-4 after:bg-gradient-to-t after:from-yellow-50 after:to-transparent after:dark:from-gray-800 after:dark:to-transparent
    "></div>

    <!-- Header Section - simulating a ripped-off piece of paper -->
    <div class="relative bg-red-600 dark:bg-rose-900 text-white p-4 sm:p-5 text-center shadow-md border-b border-red-700 dark:border-rose-950 overflow-hidden
                before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-[calc(100%+40px)] before:bg-gradient-to-r before:from-red-700 before:to-transparent before:rotate-45 before:scale-y-150
                after:content-[''] after:absolute after:-right-2 after:top-1/2 after:-translate-y-1/2 after:w-4 after:h-[calc(100%+40px)] after:bg-gradient-to-l after:from-red-700 after:to-transparent after:-rotate-45 after:scale-y-150">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight uppercase drop-shadow-md">Order Interrupted!</h1>
      <p class="text-sm sm:text-base opacity-90 mt-1">Something went wrong while preparing your delicious meal.</p>
    </div>

    <!-- Main Content Area - mimicking a crumpled note -->
    <div class="relative p-6 sm:p-8 md:p-10 z-10">
      <div class="bg-yellow-100 dark:bg-gray-700 p-6 rounded-md shadow-inner border border-yellow-200 dark:border-gray-600 relative overflow-hidden transform rotate-1 transition-transform duration-500 group-hover:rotate-0">
        <!-- Crumpled paper texture overlay -->
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/skulls.png')] opacity-5 dark:opacity-10 pointer-events-none"></div>

        <p class="text-lg sm:text-xl font-semibold mb-4 text-red-700 dark:text-red-300 flex items-center">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 animate-pulse" 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 16zm-1-12a1 1 0 10-2 0v4a1 1 0 102 0V6zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg>
          Error: Payment Processing Failed
        </p>
        <p class="mb-6 leading-relaxed">
          It seems there was a hiccup while processing your payment. Your order <span class="font-mono text-sm bg-yellow-200 dark:bg-gray-600 px-2 py-1 rounded">#FDS-202300483X</span> could not be completed.
        </p>

        <h3 class="text-xl font-bold mb-3 text-emerald-700 dark:text-emerald-400 border-b-2 border-dashed border-emerald-300 dark:border-emerald-600 pb-2 flex items-center">
          <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
          </svg>
          What you can do:
        </h3>
        <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-200 ml-2">
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Check your payment details:</strong> Please verify your card number, expiry date, and CVV. Ensure funds are available.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Try a different payment method:</strong> We accept other major credit cards, PayPal, and local payment options.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Review your internet connection:</strong> A stable connection helps prevent payment disruptions.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Clear browser cache:</strong> Sometimes old data can interfere with new transactions.</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- Stack of "sticky notes" for common actions -->
    <div class="relative p-6 sm:p-8 pt-0 flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 z-10">
      <a href="#" class="relative bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform duration-200 transform -rotate-1 hover:rotate-0 hover:scale-105 active:scale-95 origin-bottom-left text-center overflow-hidden
                  before:absolute before:inset-0 before:bg-black before:opacity-10 before:mix-blend-multiply before:transition-all before:duration-300 before:scale-y-0 before:origin-top hover:before:scale-y-100
                  border border-emerald-600 dark:border-emerald-900
                  flex items-center justify-center">
        <span class="relative z-10">Retry Payment</span>
        <svg class="w-5 h-5 ml-2 relative z-10" 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 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.356-4H15v5m6 0h-5.356-2A8.001 8.001 0 0120 12v4m-4 0h-.582"></path>
        </svg>
      </a>

      <a href="#" class="relative bg-red-500 hover:bg-red-600 dark:bg-rose-700 dark:hover:bg-rose-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform duration-200 transform rotate-2 hover:rotate-0 hover:scale-105 active:scale-95 origin-bottom-right text-center overflow-hidden
                  before:absolute before:inset-0 before:bg-black before:opacity-10 before:mix-blend-multiply before:transition-all before:duration-300 before:scale-y-0 before:origin-top hover:before:scale-y-100
                  border border-red-600 dark:border-rose-900
                  flex items-center justify-center">
        <span class="relative z-10">Go to Homepage</span>
        <svg class="w-5 h-5 ml-2 relative z-10" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
      </a>
    </div>

    <!-- Tear-off portion (bottom) with support info, like a receipt -->
    <div class="relative bg-yellow-200 dark:bg-gray-900 text-gray-700 dark:text-gray-300 p-4 sm:p-5 text-center text-sm border-t border-dashed border-yellow-300 dark:border-gray-700 overflow-hidden
                before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-[calc(100%+40px)] before:bg-gradient-to-r before:from-yellow-300 before:to-transparent before:-rotate-45 before:scale-y-150
                after:content-[''] after:absolute after:-right-2 after:top-1/2 after:-translate-y-1/2 after:w-4 after:h-[calc(100%+40px)] after:bg-gradient-to-l after:from-yellow-300 after:to-transparent after:rotate-45 after:scale-y-150">
      <p class="mb-2">If the problem persists, please <a href="#" class="text-red-600 dark:text-red-400 hover:underline font-semibold">contact our support team</a> with your order number.</p>
      <p class="text-xs opacity-80">Support Hotline: +1 (555) 123-4567 | Email: [email protected]</p>
    </div>
  </div>
</div>

Volet Forum communautaire - Retro Ocean Blue

Un composant de forum communautaire simple et réactif avec une ambiance rétro des années 80/90, conçu pour les plateformes d’emploi et de carrière. Dispose d’une palette de couleurs bleu océan et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-gradient-to-br from-blue-300 to-sky-500 min-h-screen p-4 font-mono text-gray-800 dark:from-sky-900 dark:to-blue-950 dark:text-gray-200">
  <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden transform perspective-100 rotate-x-3 transition-transform duration-500 ease-in-out hover:rotate-x-0 dark:bg-gray-800">
    <div class="border-b-4 border-blue-600 px-6 py-4 flex items-center justify-between bg-blue-700 text-white dark:bg-blue-900 dark:border-blue-700">
      <h2 class="text-2xl font-bold tracking-wide uppercase drop-shadow-lg">\/\/ Career HQ Forum \/\/</h2>
      <span class="text-sm italic">established 1992</span>
    </div>
    <div class="px-6 py-4 border-b border-blue-200 dark:border-blue-700">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-blue-400 object-cover shadow-md dark:border-blue-600">
        <div class="flex-1">
          <p class="text-blue-700 text-lg font-semibold dark:text-blue-300">New Post:</p>
          <input type="text" placeholder="Enter your topic title here..." class="w-full p-2 mt-1 border-2 border-blue-400 rounded-md bg-blue-50 text-blue-800 focus:outline-none focus:border-blue-600 dark:bg-blue-900 dark:border-blue-600 dark:text-blue-100">
        </div>
        <button class="px-5 py-2 bg-blue-600 text-white font-bold rounded-lg shadow-lg hover:bg-blue-700 transition-colors duration-200 transform hover:-translate-y-1 active:translate-y-0 active:shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
          POST <span class="hidden sm:inline">TOPIC</span>
        </button>
      </div>
    </div>
    <div class="p-6 space-y-6">
      <!-- Forum Thread 1 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">JaneDoe87</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/26/23 14:35 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Seeking Advice: Transitioning from Marketing to Tech Sales!</h3>
        <p class="text-gray-700 dark:text-gray-300">Hey folks, I'm looking to pivot my career into tech sales. Any tips on resumes, interviews, or entry-level roles? What skills should I highlight?</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 12</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>

      <!-- Forum Thread 2 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">CodeMaestro</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/26/23 11:01 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Frontend Devs: Best Practices for Responsive Design?</h3>
        <p class="text-gray-700 dark:text-gray-300">What are your go-to strategies for ensuring truly responsive designs? Any specific frameworks or CSS methodologies you prefer?</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 28</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>

      <!-- Forum Thread 3 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">ResumeGuru</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/25/23 09:10 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Tips for Acing Your Next Video Interview</h3>
        <p class="text-gray-700 dark:text-gray-300">With more remote roles, video interviews are standard. Share your best advice for setup, lighting, virtual backgrounds, and common pitfalls!</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 9</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>
    </div>
    <div class="border-t-4 border-blue-600 px-6 py-4 flex items-center justify-between text-xs text-gray-600 bg-blue-700 text-white dark:bg-blue-900 dark:border-blue-700 dark:text-gray-300">
      <p>&copy; 2023 CareerHQ - All Rights Reserved</p>
      <p>Forum Version 4.2 Beta</p>
    </div>
  </div>
</div>

Alerte de délai d’expiration de session Art Déco

Un composant d’alerte de délai d’expiration de session élégant et réactif avec un design inspiré de l’Art déco, avec des motifs géométriques, des neutres chauds et la prise en charge du mode sombre, adapté aux plateformes de divertissement.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-70 dark:bg-black dark:bg-opacity-80 font-serif">
  <div class="relative w-full max-w-md mx-auto overflow-hidden text-center bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-900 dark:to-stone-800 rounded-lg shadow-xl border-4 border-amber-300 dark:border-amber-700 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <!-- Art Deco Top Border Pattern -->
    <div class="absolute top-0 left-0 right-0 h-6 bg-gradient-to-r from-amber-400 to-yellow-500 dark:from-stone-700 dark:to-stone-600 flex items-center justify-center overflow-hidden">
      <div class="flex w-full justify-around">
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
      </div>
    </div>

    <div class="p-8 pb-6 pt-12 relative">
      <h2 class="text-3xl sm:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-200 tracking-wide leading-tight drop-shadow-md">
        Session Expiring Soon!
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 leading-relaxed">
        Your session will end in <strong class="text-amber-800 dark:text-amber-400">2:00</strong>.
        Do you want to continue watching?
      </p>

      <!-- Geometric Separator -->
      <div class="w-full h-px bg-amber-300 dark:bg-stone-700 my-6 relative">
        <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-amber-400 dark:bg-stone-600 transform rotate-45 border border-amber-500 dark:border-stone-500"></div>
      </div>

      <div class="flex flex-col sm:flex-row justify-center gap-4">
        <button class="px-8 py-3 rounded-full bg-amber-500 hover:bg-amber-600 text-white font-semibold text-lg shadow-lg 
                       transition duration-300 ease-in-out transform hover:scale-105 
                       dark:bg-amber-600 dark:hover:bg-amber-700 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
          Continue Session
        </button>
        <button class="px-8 py-3 rounded-full border-2 border-amber-500 hover:border-amber-600 text-amber-700 font-semibold text-lg shadow-lg 
                       transition duration-300 ease-in-out transform hover:scale-105 
                       dark:border-stone-500 dark:text-stone-200 dark:hover:border-stone-400 dark:hover:text-stone-100 dark:bg-transparent focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
          Log Out
        </button>
      </div>
    </div>

    <!-- Art Deco Bottom Border Pattern -->
    <div class="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-r from-yellow-500 to-amber-400 dark:from-stone-600 dark:to-stone-700 flex items-center justify-center overflow-hidden">
      <div class="flex w-full justify-around">
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
      </div>
    </div>
  </div>
</div>

Memphis_Gaming_Notification_Simple_Forest_Green

Un composant de notification de jeu simple et réactif avec une influence du design de Memphis utilisant une palette de couleurs vert forêt, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md bg-gradient-to-br from-emerald-100 to-green-200 dark:from-emerald-900 dark:to-green-950 p-6 rounded-2xl shadow-xl overflow-hidden border-4 border-green-700 dark:border-emerald-600">

    <!-- Decorative Memphis Shapes -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-green-500 dark:bg-emerald-700 transform rotate-45 rounded-lg opacity-70"></div>
    <div class="absolute -bottom-10 -right-10 w-28 h-28 bg-emerald-500 dark:bg-green-700 rounded-full opacity-60"></div>
    <div class="absolute top-1/4 -right-6 w-16 h-4 bg-green-600 dark:bg-emerald-600 transform -rotate-12"></div>
    <div class="absolute bottom-1/3 -left-4 w-12 h-12 bg-emerald-600 dark:bg-green-600 rounded-lg transform rotate-25 opacity-80"></div>

    <div class="relative z-10">
      <div class="flex items-center mb-4">
        <div class="flex-shrink-0 relative">
          <img class="h-12 w-12 rounded-full ring-4 ring-green-600 dark:ring-emerald-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-red-500 ring-2 ring-emerald-100 dark:ring-emerald-900"></span>
        </div>
        <div class="ml-4">
          <p class="text-lg font-bold text-green-900 dark:text-emerald-100">New Activity!</p>
          <p class="text-sm text-green-700 dark:text-emerald-200">Yesterday at 5:30 PM</p>
        </div>
      </div>

      <p class="text-green-800 dark:text-emerald-200 text-base mb-6 leading-relaxed">
        <span class="font-semibold text-green-900 dark:text-emerald-50">PlayerOne</span> just achieved "Dragon Slayer" achievement! 🎉
      </p>

      <div class="flex justify-end">
        <button class="px-5 py-2 bg-green-700 hover:bg-green-800 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold rounded-xl shadow-lg transform transition-transform duration-200 ease-in-out active:scale-95 border-2 border-green-800 dark:border-emerald-900">
          View Details
        </button>
      </div>
    </div>
  </div>
</div>

1 ... 74 75 76 77 78 ... 335

Rechercher des composants

Catégories

Tous les composants