Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Barre de progression triadique minimaliste

Une barre de progression minimaliste et réactive avec une palette de couleurs triadique et une prise en charge du thème sombre, adaptée aux applications de médias sociaux.

Ouvrir Aperçu

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

  <!-- Progress Bar Container -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
    <!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
    </div>
  </div>

  <!-- Another Progress Bar Example -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
    <div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
    </div>
  </div>

</div>

Composant Composants de mise en page

Un composant de mise en page inspiré du brutalisme pour la consommation de contenu avec une palette de couleurs pastel et une complexité modérée, avec un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-pink-100 p-8 dark:bg-gray-900">
  <header class="mb-8 border-b-4 border-black pb-4 dark:border-white">
    <h1 class="text-5xl font-bold text-black drop-shadow-[6px_6px_0_rgba(0,0,0,1)] dark:text-white dark:drop-shadow-[6px_6px_0_rgba(255,255,255,1)]">
      Brutal Blog
    </h1>
  </header>

  <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
    <!-- Main Content Area -->
    <main class="border-4 border-black bg-purple-200 p-6 dark:border-white dark:bg-gray-800 md:col-span-2">
      <article class="mb-8">
        <h2 class="text-3xl font-bold text-black dark:text-white">The Raw Truth of Web Design</h2>
        <p class="mb-4 text-sm text-gray-700 dark:text-gray-300">Posted on October 26, 2023</p>
        <img src="https://picsum.photos/seed/brutalism/800/400" alt="Abstract brutalist architecture" class="mb-4 w-full border-4 border-black dark:border-white" />
        <p class="mb-4 text-black dark:text-white">
          In the realm of web design, Brutalism stands as a defiant counterpoint to sleek interfaces and polished user experiences. It's a style that embraces rawness, exposes underlying structures, and often challenges conventional notions of beauty.
        </p>
        <p class="text-black dark:text-white">
          Characterized by stark typography, high-contrast colors, and a deliberate disregard for typical aesthetic norms, Brutalism can be jarring yet incredibly impactful. It screams authenticity and unfiltered expression, often using simple, unadorned HTML elements to convey its message.
        </p>
      </article>

      <article>
        <h2 class="text-3xl font-bold text-black dark:text-white">Pastel Brutalism: An Oxymoron?</h2>
        <p class="mb-4 text-sm text-gray-700 dark:text-gray-300">Posted on October 25, 2023</p>
        <img src="https://picsum.photos/seed/pastel/800/400" alt="Pastel color blocks" class="mb-4 w-full border-4 border-black dark:border-white" />
        <p class="mb-4 text-black dark:text-white">
          Combining the unyielding nature of Brutalism with the softness of pastel colors creates an intriguing paradox. The gentle hues temper the harshness, yet the underlying structural honesty remains. This approach offers a unique visual language, capable of conveying both strength and delicate nuance.
        </p>
        <p class="text-black dark:text-white">
          It's an exploration of contrasts, where the raw edges meet the subtle fades, inviting viewers to reconsider their perceptions of digital aesthetics. The goal is not to prettify, but to present an unvarnished truth, albeit one wrapped in a surprisingly gentle palette.
        </p>
      </article>
    </main>

    <!-- Sidebar / Related Content -->
    <aside class="border-4 border-black bg-green-200 p-6 dark:border-white dark:bg-gray-800">
      <h3 class="mb-4 text-2xl font-bold text-black dark:text-white">Related Reads</h3>
      <ul class="space-y-4">
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">The Art of Deliberate Imperfection</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">Explore why imperfections can enhance design.</p>
        </li>
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">High Contrast & Readability</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">A deep dive into accessible brutalist design.</p>
        </li>
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">Embracing the Unconventional Grid</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">Breaking free from traditional layouts.</p>
        </li>
      </ul>

      <h3 class="mb-4 mt-8 text-2xl font-bold text-black dark:text-white">About the Author</h3>
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="h-16 w-16 border-4 border-black dark:border-white" />
        <div>
          <p class="font-bold text-black dark:text-white">Maximus Code</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Digital Architect & Brutalism Enthusiast.</p>
        </div>
      </div>
    </aside>
  </div>

  <footer class="mt-8 border-t-4 border-black pt-4 text-center text-black dark:border-white dark:text-white">
    <p>&copy; 2023 Brutal Blog. All rights reserved, roughly.</p>
  </footer>
</div>

Composant d’intégration de média

Glassmorphism Media Embed Component avec Earth Tones pour les sites Web d’entreprise/d’entreprise. Mise en page simple, réactif et prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="relative bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-stone-200 dark:border-stone-700 overflow-hidden">
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-stone-300/40 via-stone-200/20 to-stone-100/10 dark:from-stone-700/40 dark:via-stone-800/20 dark:to-stone-900/10 rounded-xl"></div>
    
    <div class="relative z-10 space-y-4">
      <!-- Video/Media Placeholder -->
      <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-stone-300 dark:bg-stone-700 flex items-center justify-center">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full object-cover"></iframe>
      </div>
      
      <!-- Title -->
      <div class="text-xl font-semibold text-stone-800 dark:text-stone-100">
        Business Insights: Q3 Performance
      </div>
      
      <!-- Description -->
      <p class="text-stone-600 dark:text-stone-300 text-sm">
        A concise overview of our key achievements and strategic initiatives for the third quarter, highlighting growth and future outlook.
      </p>
      
      <!-- Action Button (Optional) -->
      <button class="w-full bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 ease-in-out">
        Learn More
      </button>
      
      <!-- Metadata/Source (Optional) -->
      <div class="flex items-center text-stone-500 dark:text-stone-400 text-xs mt-2">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span>Published: October 26, 2023</span>
      </div>
    </div>
  </div>
</div>

Composant de menu déroulant

Un composant de menu déroulant simple, de style glassmorphism, pour le commerce électronique, avec un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white/30 text-sm font-medium text-gray-700 hover:bg-white/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800/30 dark:text-gray-200 dark:hover:bg-gray-700/40 dark:border-gray-700 backdrop-filter backdrop-blur-lg" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <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>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white/30 ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-0">Category 1</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-1">Category 2</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-2">Category 3</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-3">View All</button>
      </form>
    </div>
  </div>
</div>

Composant de navigation dans les médias sociaux

Un composant de navigation simple et réactif pour les applications de médias sociaux, avec un thème sombre et une palette de couleurs complémentaires inspirée de Material Design. Il comprend un logo, des liens de navigation et un avatar utilisateur.

Ouvrir Aperçu

                <nav class="bg-blue-500 dark:bg-blue-900 p-4 shadow-md">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="text-white text-2xl font-bold">SocialLink</a>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Home</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Notifications</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Messages</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Profile</a>
    </div>

    <!-- User Avatar -->
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">

      <!-- Mobile Menu Button (Hamburger) -->
      <button class="md:hidden text-white focus:outline-none">
        <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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation (Hidden by default) -->
  <div class="md:hidden mt-4 space-y-2">
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Home</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Notifications</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Messages</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Profile</a>
  </div>
</nav>

Composante de navigation collante brutaliste

Barre de navigation autocollante brutaliste en niveaux de gris pour un blog avec prise en charge du mode sombre

Ouvrir Aperçu

                <nav class="bg-gray-900 border-b-4 border-gray-100 sticky top-0 z-50 font-mono">
  <div class="container mx-auto px-4 py-6 flex flex-wrap justify-between items-center">
    <div class="text-gray-100 text-4xl font-extrabold uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-400 transition duration-300 ease-in-out">THE BLOG</a>
    </div>
    <div class="block lg:hidden">
      <button class="text-gray-100 focus:outline-none focus:text-gray-400">
        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
    <div class="w-full lg:w-auto lg:flex flex-grow lg:flex-grow-0 hidden lg:block mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8 text-xl font-bold uppercase">
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Home</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Articles</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="bg-gray-800 border-t-4 border-gray-100 py-3">
    <div class="container mx-auto px-4 flex flex-wrap justify-center lg:justify-between items-center text-gray-300 text-sm">
      <div class="tracking-wide mb-2 lg:mb-0">
        FEATURED TOPICS: <span class="font-bold">TECHNOLOGY / DESIGN / ART / CULTURE</span>
      </div>
      <div class="flex space-x-4">
        <input type="text" placeholder="SEARCH THE VOID..." class="px-3 py-1 bg-gray-700 text-gray-100 placeholder-gray-400 border-2 border-gray-100 focus:outline-none focus:border-gray-400 text-sm">
        <button class="bg-gray-600 text-gray-100 px-4 py-1 border-2 border-gray-100 hover:bg-gray-400 hover:text-gray-900 transition duration-300 ease-in-out">GO</button>
      </div>
    </div>
  </div>
</nav>

Volet Composantes sociales

Une section de composants sociaux simple et réactive pour un tableau de bord, avec une palette de couleurs monochromatique et un design inspiré du Skeuomorphisme.

Ouvrir Aperçu

                <div class="p-4 bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Social Feed</h2>
  <div class="space-y-4">
    <!-- Post 1 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Exploring the new dashboard features! Really intuitive and clean design. #dashboard #UIUX</p>
      <img src="https://picsum.photos/400/200?random=1" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 23 Likes</span>
        <span>💬 5 Comments</span>
      </div>
    </div>

    <!-- Post 2 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Yesterday</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Just launched my new project! Check it out in the updated dashboard. Let me know your thoughts! #projectlaunch #dashboard</p>
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 45 Likes</span>
        <span>💬 12 Comments</span>
      </div>
    </div>

    <!-- Post 3 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Peter Jones</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">The new analytics module in the dashboard is a game-changer! So much data presented clearly. Highly recommend! #analytics #datadriven</p>
      <img src="https://picsum.photos/400/200?random=2" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 60 Likes</span>
        <span>💬 8 Comments</span>
      </div>
    </div>
  </div>
</div>

Composant de panier d’achat

Il s’agit d’un composant de panier d’achat simple pour le commerce électronique, avec un aspect Material Design réactif, une palette de couleurs complémentaire et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Shopping Cart</h2>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
      <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
    </div>

    <button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
      Proceed to Checkout
    </button>
  </div>
</div>

Modal triadique 3D d’entreprise

Un composant modal réactif, conçu en 3D avec une palette de couleurs triadique, adapté aux sites Web d’entreprise et d’entreprise, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center dark:bg-gray-900 dark:bg-opacity-70">
  <div class="relative p-8 bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-3xl shadow-2xl transform transition-all duration-300 ease-in-out scale-100 opacity-100 rotate-x-0 group-hover:scale-105 group-hover:opacity-95 group-hover:rotate-x-3d-effect" style="transform-style: preserve-3d; transition: transform 0.6s ease; perspective: 1000px;">
    <!-- 3D depth effect for modal container -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700 opacity-20 rounded-3xl" style="transform: translateZ(-20px);"></div>
    
    <div class="relative z-10">
      <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-wide">
        <span class="inline-block" style="transform: translateZ(20px);">Welcome</span> 
        <span class="inline-block" style="transform: translateZ(10px);">to</span> 
        <span class="inline-block" style="transform: translateZ(0px);">Our Business</span>
      </h3>
      <div class="flex flex-col items-center mb-6">
        <img class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-600 mb-4 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="transform: translateZ(15px);">
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed text-center" style="transform: translateZ(5px);">
          Thank you for visiting. Explore our services and discover how we can help your business grow.
        </p>
      </div>
      <div class="grid grid-cols-2 gap-4 mb-6" style="transform: translateZ(10px);">
        <div class="text-center p-3 bg-blue-100 dark:bg-blue-900 rounded-lg shadow-md">
          <p class="text-blue-700 dark:text-blue-300 font-semibold text-lg">Solutions</p>
        </div>
        <div class="text-center p-3 bg-purple-100 dark:bg-purple-900 rounded-lg shadow-md">
          <p class="text-purple-700 dark:text-purple-300 font-semibold text-lg">Innovation</p>
        </div>
        <div class="col-span-2 text-center p-3 bg-pink-100 dark:bg-pink-900 rounded-lg shadow-md">
          <p class="text-pink-700 dark:text-pink-300 font-semibold text-lg">Growth</p>
        </div>
      </div>
      <div class="flex justify-end space-x-4">
        <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white dark:from-blue-700 dark:to-purple-700 dark:text-gray-100 py-3 px-6 rounded-full font-bold shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(10px);">
          Learn More
        </button>
        <button class="bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 py-3 px-6 rounded-full font-semibold shadow-md transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(5px);">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Composant de menu déroulant

Composant de menu déroulant pour le commerce électronique avec Material Design, schéma de couleurs analogue et interactions complexes à l’aide de Tailwind CSS. Il est réactif et prend en charge le thème sombre sans JavaScript.

Ouvrir Aperçu

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <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>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" 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 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

1 ... 71 72 73 74 75 ... 282

Catégories

Tous les composants