Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant du menu Hamburger

Un composant de menu hamburger complexe, réactif et dynamique avec des micro-interactions pour le commerce électronique, avec une navigation coulissante, des liens de catégorie, une barre de recherche et des icônes de médias sociaux. Il prend en charge le mode sombre et utilise Lorem Picsum pour les images.

Ouvrir Aperçu

                <div class="relative">
  <input type="checkbox" id="menu-toggle" class="hidden peer" />
  <label for="menu-toggle" class="block cursor-pointer p-4 md:hidden focus:outline-none">
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:rotate-45 peer-checked:translate-y-2"></div>
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:opacity-0"></div>
    <div class="w-6 h-1 bg-fuchsia-500 transition-all duration-300 peer-checked:-rotate-45 peer-checked:-translate-y-2"></div>
  </label>

  <div class="fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-fuchsia-600 to-purple-700 text-white p-5 shadow-lg overflow-auto z-50 transform -translate-x-full peer-checked:translate-x-0 transition-transform duration-300 ease-in-out dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 md:relative md:w-auto md:h-auto md:bg-none md:shadow-none md:translate-x-0 md:flex md:flex-col md:overflow-visible">
    <div class="mb-8 md:hidden">
      <img src="https://www.picsum.photos/100/100" alt="Store Logo" class="rounded-full mx-auto mb-3" />
      <p class="text-center text-lg font-bold">E-Shop</p>
    </div>

    <nav class="md:flex md:flex-col md:space-y-2">
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Shop All</a>
      <div class="relative group">
        <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Categories</a>
        <div class="ml-5 text-sm absolute left-full top-0 w-48 bg-fuchsia-800 p-3 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-300 invisible group-hover:visible dark:bg-gray-700">
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Electronics</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Apparel</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Home Goods</a>
        </div>
      </div>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Deals</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Contact</a>
    </nav>

    <div class="mt-8 md:mt-4">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-fuchsia-700 bg-opacity-70 text-white placeholder-fuchsia-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-300 dark:bg-gray-700 dark:placeholder-gray-400" />
    </div>

    <div class="mt-8 pt-8 border-t border-fuchsia-500 border-opacity-50 text-center md:mt-4 md:pt-4 md:border-none">
      <p class="text-sm mb-4">Follow Us</p>
      <div class="flex justify-center space-x-4">
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</div>

360DegreeViewerComposant

Un composant simple de visionneuse à 360 degrés avec un design brutaliste, des couleurs complémentaires et une prise en charge du mode sombre. Utilise uniquement HTML et Tailwind CSS.

Ouvrir Aperçu

                <div class="dark:bg-stone-900 bg-amber-50 relative h-screen flex flex-col items-center justify-center font-mono">
  
  <!-- Brutalist Border -->
  <div class="absolute inset-0 border-8 border-stone-950 dark:border-amber-50"></div>

  <div class="relative z-10 p-8 md:p-12 lg:p-16 bg-fuchsia-700 dark:bg-teal-700 text-amber-50 dark:text-stone-900 
                      border-4 border-stone-950 dark:border-amber-50 
                      shadow-[8px_8px_0_0_#1c1917] dark:shadow-[8px_8px_0_0_#fcd34d]">
    
    <h1 class="text-4xl md:text-5xl lg:text-6xl 
               font-extrabold mb-6 
               uppercase 
               border-b-4 border-amber-50 dark:border-stone-900 
               pb-2">
      360° Viewer
    </h1>
    
    <div class="relative w-full aspect-video 
                bg-stone-950 dark:bg-amber-50 
                border-4 border-stone-950 dark:border-amber-50 
                overflow-hidden
                mb-6">
      <!-- Placeholder for 360 image - in a real scenario, this would be a JS-powered viewer -->
      <img src="https://picsum.photos/seed/360view/800/450" 
           alt="360 degree view placeholder" 
           class="w-full h-full object-cover opacity-70">
      <div class="absolute inset-0 flex items-center justify-center">
        <p class="text-amber-50 dark:text-stone-900 text-xl md:text-2xl lg:text-3xl font-bold detection-sm:hidden">
          Content Placeholder
        </p>
      </div>
    </div>
    
    <p class="text-lg md:text-xl leading-relaxed mb-6">
      Explore this object from every angle. 
      This brutalist design emphasizes raw functionality and stark contrasts. 
      A complementary color scheme of deep fuchsia and teal (or amber and dark stone in dark mode) enhances the visual tension.
    </p>
    
    <div class="flex justify-between items-center">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" 
             alt="Author Avatar" 
             class="w-12 h-12 md:w-16 md:h-16 rounded-full 
                    border-4 border-stone-950 dark:border-amber-50 
                    shadow-[4px_4px_0_0_#1c1917] dark:shadow-[4px_4px_0_0_#fcd34d]">
        <span class="text-xl font-bold">J. Doe</span>
      </div>
      <a href="#" class="inline-block px-6 py-3 
                           bg-stone-950 dark:bg-amber-50 
                           text-amber-50 dark:text-stone-900 
                           uppercase font-bold 
                           border-4 border-stone-950 dark:border-amber-50 
                           shadow-[6px_6px_0_0_#8B0000] dark:shadow-[6px_6px_0_0_#2F4F4F]
                           hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all duration-200">
        Learn More
      </a>
    </div>

  </div>
</div>

Composant de zone de recherche

Un composant de boîte de recherche complexe de style Glassmorphism avec une palette de couleurs analogue, adapté à un portfolio, avec un design réactif et une prise en charge du thème sombre utilisant uniquement HTML et Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="relative w-full max-w-2xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-2xl p-6 border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700"><div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-blue-500 dark:from-purple-700 dark:to-blue-900 opacity-20 rounded-2xl"></div><div class="relative z-10 flex items-center space-x-4"><svg class="h-8 w-8 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><input type="text" placeholder="Search your projects, skills, or articles..." class="flex-1 p-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-xl text-gray-900 dark:text-white placeholder-gray-700 dark:placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300 ease-in-out border border-gray-300 dark:border-gray-600"></div><div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Recent Searches</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#WebDesign</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#FrontEndDev</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#UIUX</span></div><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Popular Categories</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Development</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Design</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Marketing</span></div></div><div class="mt-6 text-center"><button class="px-6 py-3 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold rounded-full shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">Advanced Search</button></div></div></div>

Composant de panier d’achat

Un composant de panier d’achat simple et réactif avec prise en charge du thème sombre, stylisé à l’aide de Tailwind CSS suivant les principes de conception matérielle avec une palette de couleurs en niveaux de gris. Utilise picsum.photos pour les images de produits.

Ouvrir Aperçu

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

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
        <p class="text-gray-800 dark:text-white font-bold">$299.99</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 1
      </div>
    </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-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Books</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.50</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 2
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
      <span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
    </div>

    <div class="mt-6 flex justify-end">
      <button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
        Checkout
      </button>
    </div>
  </div>
</div>

Composant du système d’évaluation

Un composant complexe de système d’évaluation à thème rétro pour les médias sociaux, doté d’une palette de couleurs monochromatiques. Il est entièrement réactif et prend en charge un mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript.

Ouvrir Aperçu

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">

  <!-- Retro Rating System Component -->
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <div class="mb-6 text-center">
      <h2 class="text-3xl font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wider">Rate This Post</h2>
      <p class="text-gray-500 dark:text-gray-400 text-sm">Share your thoughts with the community!</p>
    </div>

    <!-- User Avatar and Post Info -->
    <div class="flex items-center mb-6">
      <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-100">Galactic Traveler</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
      </div>
    </div>

    <!-- Rating Stars -->
    <div class="flex justify-center items-center mb-6">
      <input type="radio" id="star5" name="rating" value="5" class="hidden" />
      <label for="star5" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star4" name="rating" value="4" class="hidden" />
      <label for="star4" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star3" name="rating" value="3" class="hidden" />
      <label for="star3" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star2" name="rating" value="2" class="hidden" />
      <label for="star2" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star1" name="rating" value="1" class="hidden" />
      <label for="star1" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
    </div>

    <!-- Textarea for comments -->
    <div class="mb-6">
      <textarea class="w-full p-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-all duration-200 resize-y" rows="4" placeholder="Leave your comment here..."></textarea>
    </div>

    <!-- Buttons -->
    <div class="flex justify-between space-x-4">
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-700 hover:bg-gray-800 text-white dark:bg-gray-600 dark:hover:bg-gray-700 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Submit Rating
      </button>
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-300 hover:bg-gray-400 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Cancel
      </button>
    </div>

    <!-- Popular Reviews Section (Responsive) -->
    <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4 text-center">Popular Reviews</h3>
      <div class="grid gap-4 md:grid-cols-2">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Pixel Pioneer</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★★</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Absolutely loved this! Brings back so many memories of old forums."</p>
        </div>
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Data Diver</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★☆</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Great design, very nostalgic. A bit slow on my old phone though."</p>
        </div>
      </div>
       <div class="mt-4 text-center">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:underline text-sm">View all reviews</a>
      </div>
    </div>

  </div>

</div>

Composant d’info-bulle

Un composant d’info-bulle de conception de matériaux réactif avec une palette de couleurs monochromatiques pour le commerce électronique, avec prise en charge du mode sombre. Pas de JavaScript, HTML et Tailwind CSS uniquement.

Ouvrir Aperçu

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

  <!-- Product Card (Example to show tooltip in context) -->
  <div class="group relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <div class="p-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Stylish Headphones</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Immerse yourself in rich, clear sound with these premium headphones.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-gray-50">$149.99</span>
        
        <!-- Tooltip Trigger (e.g., Add to Cart Button) -->
        <button class="relative bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-medium py-2 px-4 rounded-full transition-colors duration-300 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          Add to Cart

          <!-- Tooltip Content -->
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
            Add item to your shopping cart
            <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 0L0 10h20L10 0z"/>
            </svg>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Another Tooltip Example (e.g., Info Icon) -->
  <div class="group relative ml-12">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500 dark:text-gray-400 cursor-pointer transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-500" viewBox="0 0 20 20" fill="currentColor">
      <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 2h1a1 1 0 001-1V9a1 1 0 00-1-1H9zm6 3a1 1 0 100 2h2a1 1 0 100-2h-2z" clip-rule="evenodd" />
    </svg>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
      More information about the product
      <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0L0 10h20L10 0z"/>
      </svg>
    </div>
  </div>

</div>

VerremorphismeModalComposant

Un composant modal de style Glassmorphism avec une palette de couleurs analogue, une complexité modérée, adapté à l’affichage de blogs/contenus. Dispose d’un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center p-4 z-50 dark:bg-opacity-80"> <div class="relative bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-6 md:p-8 lg:p-10 max-w-2xl w-full m-4 border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 text-gray-900 dark:text-white transform transition-all scale-100 opacity-100"> <!-- Close Button --> <button class="absolute top-4 right-4 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition duration-300 ease-in-out 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="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Modal Header --> <div class="mb-6"> <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">The Wonders of Glassmorphism</h3> <p class="text-lg text-gray-800 dark:text-gray-200">Embrace the beauty of translucent design.</p> </div> <!-- Modal Content - Article Preview --> <div class="space-y-6 text-gray-800 dark:text-gray-200"> <img src="https://picsum.photos/600/350?random=1" alt="Abstract Glassmorphism Background" class="rounded-lg mb-4 shadow-md object-cover w-full h-auto"> <p class="leading-relaxed"> Glassmorphism is a design trend characterized by a frosted-glass effect, where backgrounds are blurred to create a sense of depth and translucency. This aesthetic often involves vibrant colors, light borders, and distinct layering, giving UI elements a sense of floating on the screen. It

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif avec un style glassmorphism, une palette de couleurs de terre et une prise en charge du thème sombre. Conçu pour les plateformes de médias sociaux, avec une mise en page simple et des éléments minimaux. Utilise Tailwind CSS pour le style et inclut des exemples d’espaces réservés d’image.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative p-8 rounded-lg shadow-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-stone-300 to-stone-500 opacity-30 dark:from-stone-700 dark:to-stone-900"></div>
    
    <h2 class="text-3xl font-bold text-center text-stone-800 dark:text-stone-100 mb-6">Register</h2>
    
    <form>
      <div class="mb-4">
        <label for="username" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-6">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <button type="submit" class="w-full bg-stone-600 dark:bg-stone-700 text-white p-3 rounded-lg font-semibold hover:bg-stone-700 dark:hover:bg-stone-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
        Register
      </button>
    </form>
    
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      Already have an account? <a href="#" class="text-stone-800 dark:text-stone-200 font-semibold hover:underline">Login here</a>
    </p>
  </div>
</div>

Volet Composantes sociales

Composant social Composant avec un design skeuomorphe, une palette de couleurs complémentaire et une complexité modérée. Il est conçu pour les sites Web d’entreprise, est réactif et prend en charge les thèmes sombres.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans"><div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full transform transition duration-500 hover:scale-105 group" style="box-shadow: 0 15px 30px rgba(0,0,0,0.2), inset 0 -5px 10px rgba(0,0,0,0.1), inset 0 5px 10px rgba(255,255,255,0.7);"> <div class="flex justify-center mb-6"><img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 group-hover:border-purple-500 transition duration-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="box-shadow: 0 0 15px rgba(0,0,0,0.2);"></div><h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-4 group-hover:text-purple-600 transition duration-500" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">John Doe</h2><p class="text-gray-600 dark:text-gray-300 text-center mb-8" style="text-shadow: 0.5px 0.5px 1px rgba(255,255,255,0.4);">Software Engineer at Acme Corp</p><div class="flex justify-around items-center mb-8"><div class="text-center"><p class="text-2xl font-bold text-blue-600 dark:text-blue-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">5.2K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Followers</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-green-600 dark:text-green-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">1.8K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Following</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-red-600 dark:text-red-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">250</p><p class="text-gray-500 dark:text-gray-400 text-sm">Posts</p></div></div><div class="flex flex-col space-y-4"><button class="bg-gradient-to-br from-purple-600 to-indigo-700 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-purple-700 hover:to-indigo-800 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Follow</button><button class="bg-gradient-to-br from-yellow-500 to-orange-600 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-yellow-600 hover:to-orange-700 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Message</button></div></div></div>

Composant de nuage de balises

Un composant de nuage de balises réactif avec des styles de conception matérielle, une palette de couleurs complémentaire et une complexité modérée à des fins de commerce électronique, avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-md max-w-4xl mx-auto">
  <h2 class="text-2xl font-semibold mb-4 dark:text-white text-gray-800">Popular Tags</h2>
  <div class="flex flex-wrap gap-3">
    <!-- Tag Item 1 -->
    <a href="#" class="dark:bg-purple-700 dark:text-purple-100 bg-indigo-500 text-indigo-50 px-4 py-2 rounded-full hover:bg-indigo-600 dark:hover:bg-purple-800 transition duration-300 shadow-md text-sm">
      Electronics
    </a>
    <!-- Tag Item 2 -->
    <a href="#" class="dark:bg-teal-700 dark:text-teal-100 bg-green-500 text-green-50 px-4 py-2 rounded-full hover:bg-green-600 dark:hover:bg-teal-800 transition duration-300 shadow-md text-sm">
      Apparel
    </a>
    <!-- Tag Item 3 -->
    <a href="#" class="dark:bg-orange-700 dark:text-orange-100 bg-red-500 text-red-50 px-4 py-2 rounded-full hover:bg-red-600 dark:hover:bg-orange-800 transition duration-300 shadow-md text-sm">
      Home Goods
    </a>
    <!-- Tag Item 4 -->
    <a href="#" class="dark:bg-blue-700 dark:text-blue-100 bg-blue-500 text-blue-50 px-4 py-2 rounded-full hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 shadow-md text-sm">
      Books
    </a>
    <!-- Tag Item 5 -->
    <a href="#" class="dark:bg-red-700 dark:text-red-100 bg-pink-500 text-pink-50 px-4 py-2 rounded-full hover:bg-pink-600 dark:hover:bg-red-800 transition duration-300 shadow-md text-sm">
      Sporting Goods
    </a>
    <!-- Tag Item 6 -->
    <a href="#" class="dark:bg-lime-700 dark:text-lime-100 bg-yellow-500 text-yellow-50 px-4 py-2 rounded-full hover:bg-yellow-600 dark:hover:bg-lime-800 transition duration-300 shadow-md text-sm">
      Outdoors
    </a>
    <!-- Tag Item 7 -->
    <a href="#" class="dark:bg-cyan-700 dark:text-cyan-100 bg-teal-500 text-teal-50 px-4 py-2 rounded-full hover:bg-teal-600 dark:hover:bg-cyan-800 transition duration-300 shadow-md text-sm">
      Kitchen
    </a>
    <!-- Tag Item 8 -->
    <a href="#" class="dark:bg-fuchsia-700 dark:text-fuchsia-100 bg-purple-500 text-purple-50 px-4 py-2 rounded-full hover:bg-purple-600 dark:hover:bg-fuchsia-800 transition duration-300 shadow-md text-sm">
      Toys
    </a>
    <!-- Tag Item 9 -->
    <a href="#" class="dark:bg-emerald-700 dark:text-emerald-100 bg-green-600 text-green-50 px-4 py-2 rounded-full hover:bg-green-700 dark:hover:bg-emerald-800 transition duration-300 shadow-md text-sm">
      Gaming
    </a>
    <!-- Tag Item 10 -->
    <a href="#" class="dark:bg-rose-700 dark:text-rose-100 bg-red-600 text-red-50 px-4 py-2 rounded-full hover:bg-red-700 dark:hover:bg-rose-800 transition duration-300 shadow-md text-sm">
      Automotive
    </a>
  </div>
</div>

1 ... 96 97 98 99 100 ... 282

Catégories

Tous les composants