Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant des chargeurs

Un composant Loaders conçu dans le style Material Design avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center space-y-8 p-8 bg-gray-100 dark:bg-gray-800 min-h-screen">
    <!-- Circular Loader -->
    <div class="flex items-center justify-center">
        <div class="animate-spin rounded-full h-32 w-32 border-t-4 border-blue-500 border-solid dark:border-blue-300"></div>
    </div>

    <!-- Linear Loader -->
    <div class="w-full max-w-lg">
        <div class="h-2 bg-blue-500 rounded animate-pulse dark:bg-blue-300"></div>
    </div>

    <!-- Skeleton Loader -->
    <div class="flex space-x-4">
        <div class="h-12 w-12 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-4">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-4/5"></div>
        </div>
    </div>

    <!-- Image Loader -->
    <div class="w-64 h-48 bg-gray-200 dark:bg-gray-700 rounded shadow-md animate-pulse">
        <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-full object-cover rounded" />
    </div>

    <!-- Avatar Loader -->
    <div class="flex items-center space-x-4">
        <div class="h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4"></div>
        </div>
    </div>
</div>

Un composant de cartes thermiques réactives conçu avec une esthétique rétro/vintage, intégrant la prise en charge du thème sombre. Il comporte des sections pour un titre, un sous-titre et une carte avec des zones surlignées par la chaleur, avec des images aléatoires supplémentaires et des avatars pour un look nostalgique.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
    <h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
    <h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
    <div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
        <div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
                <ul class="mt-2 space-y-2">
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>

Composant de panier d’achat

Un composant de panier d’achat de style rétro vintage avec un design réactif et une prise en charge du mode sombre, utilisant Tailwind CSS et proposant des images et des avatars de remplacement.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold text-center text-black dark:text-white">Shopping Cart</h2>
    <ul class="mt-4">
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <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">$29.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <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">$49.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
    </ul>
    <div class="mt-4 flex justify-between">
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total:</p>
        <p class="text-lg font-bold text-gray-800 dark:text-gray-200">$99.97</p>
    </div>
    <button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md transition duration-300 ease-in-out">Checkout</button>
</div>

Composant de curseur de carrousel

Un composant de curseur de carrousel réactif conçu dans un style brutaliste à l’aide de Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles et la prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="relative w-full h-64 overflow-hidden bg-gray-800" data-theme="dark">
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="absolute w-full h-full bg-gray-800 transition duration-300 ease-in-out transform scale-110 opacity-75"></div>
        <div class="carousel-slide transition-all duration-500 ease-in-out transform space-x-4">
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1">
                <p class="text-white mt-2">Slide 1</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2">
                <p class="text-white mt-2">Slide 2</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3">
                <p class="text-white mt-2">Slide 3</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=4" alt="Carousel Image 4">
                <p class="text-white mt-2">Slide 4</p>
            </div>
        </div>
    </div>
    <button class="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❮
    </button>
    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❯
    </button>
</div>
<style>
    [data-theme="dark"] {
        background-color: #1a202c;
    }
</style>

Composant de mise en page de grille

Un composant de mise en page de grille minimaliste avec un design simple et épuré avec des effets réactifs et la prise en charge du thème sombre. Utilise des images de substitution et des avatars de picsum.photos et randomuser.me.

Ouvrir Aperçu

                <div class="container mx-auto p-4">
    <h2 class="text-center text-2xl font-bold mb-4">Minimalist Grid Layout</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 4</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 5</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 6</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
    </div>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-700 { color: #edf2f7; }
    }
</style>

Composant Like/Reaction Buttons

Un composant de boutons J’aime/Réaction conçu dans le style Brutalism avec Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">React to this!</h2>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-500 rounded-md">
            👍 Like
        </button>
        <button class="bg-red-500 text-white font-bold py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-500 rounded-md">
            ❤️ Love
        </button>
        <button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-yellow-500 rounded-md">
            😂 Haha
        </button>
        <button class="bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-500 rounded-md">
            😮 Wow
        </button>
    </div>
    <div class="flex space-x-4">
        <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
        <img src="https://picsum.photos/40/40?random=1" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
        <img src="https://picsum.photos/40/40?random=2" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Barre de navigation minimaliste

Un composant de barre de navigation réactif conçu dans un style minimaliste, prenant en charge le thème sombre et utilisant Tailwind CSS.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/40/40" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8">
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Home</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">About</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Services</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</nav>

<!-- Mobile menu button -->
<div class="md:hidden">
  <button class="flex items-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" aria-label="Toggle Navigation">
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
    </svg>
  </button>
</div>

<!-- Mobile Menu -->
<div class="md:hidden">
  <div class="bg-white dark:bg-gray-800 shadow-md px-4 py-2 space-y-2">
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Home</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">About</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Services</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
  </div>
</div>

Retour en haut de la page Composant du bouton

Un composant de bouton Retour en haut de style brutaliste utilisant Tailwind CSS. Ce composant a un design audacieux et contrasté et prend en charge les effets réactifs et le thème sombre.

Ouvrir Aperçu

                <div class="fixed bottom-5 right-5">
    <a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
        <span class="text-xl">⬆️</span>
    </a>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }

    /* General styles */
    body {
        font-family: 'Courier New', Courier, monospace;
        background-color: white;
        color: black;
        transition: background-color 0.5s, color 0.5s;
    }
</style>

Composant de zone de recherche

Un composant de champ de recherche réactif conçu selon les principes de Material Design, avec des styles CSS Tailwind et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 w-96">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Search</h2>
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 transition duration-150 ease-in-out" />
            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Search</button>
        </div>
        <div class="mt-4 text-center">
            <h3 class="text-gray-700 dark:text-gray-300">Looking for something specific?</h3>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Type and hit enter or click the search button.</p>
        </div>
    </div>
</div>

Composant de zone de recherche

Un composant de champ de recherche minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="flex justify-center items-center p-4">
  <div class="w-full max-w-md">
    <form class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
      <div class="relative">
        <input type="text" class="w-full py-2 pl-10 pr-4 border border-gray-300 rounded text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Search..." />
        <svg class="absolute left-3 top-2.5 w-5 h-5 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.5 17.5a7 7 0 100-15 7 7 0 000 15zm0 0l5 5m-5-5l-5-5"/>
        </svg>
      </div>
      <button type="submit" class="mt-4 w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">Search</button>
    </form>
  </div>
</div>

1 ... 261 262 263 264 265 ... 282

Catégories

Tous les composants

Composant des chargeurs

Composant Cartes thermiques

Composant de panier d’achat

Composant de curseur de carrousel

Composant de mise en page de grille

Composant Like/Reaction Buttons

Barre de navigation minimaliste

Retour en haut de la page Composant du bouton

Composant de zone de recherche

Composant de zone de recherche