Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Carte de conception matérielle

Composant de carte de style Material Design avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Caractéristiques repères visuels d’élévation et d’ondulation.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
    <img class="object-cover object-center w-full h-56" src="https://picsum.photos/seed/material/400/300" alt="Card image">
    <div class="px-6 py-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante non diam consequat consectetur at et metus.</p>
    </div>
    <div class="px-6 py-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 1</button>
      <button class="px-4 py-2 ml-4 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 2</button>
    </div>
  </div>
</div>

Composant de menu déroulant

Un menu déroulant réactif avec un design Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre et présentant des effets d’arrière-plan flous.

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-transparent shadow-sm px-4 py-2 bg-opacity-30 bg-white dark:bg-opacity-30 dark:bg-gray-800 hover:bg-opacity-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="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 dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Profile</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Settings</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Logout</a>
    </div>
  </div>
</div>

<style>
  .bg-opacity-30 {
    background-color: rgba(255, 255, 255, 0.3) !important;
  }
  .dark .bg-opacity-30 {
    background-color: rgba(55, 65, 81, 0.3) !important;
  }
  .backdrop-blur {
    backdrop-filter: blur(10px);
  }
</style>

<div class="absolute inset-0 rounded-md bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-blur border border-gray-300 dark:border-gray-700">
    <img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/200/100" alt="Placeholder image">
    <div class="absolute inset-0 flex items-center justify-center">
      <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
</div>

Composant de plan du site

Un composant de plan de site réactif conçu en mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <ul class="space-y-3">
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Home</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>About Us</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Services</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Contact</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Privacy Policy</span>
            </a>
        </li>
    </ul>
    <div class="mt-5">
        <h3 class="text-xl font-semibold">Follow Us</h3>
        <ul class="flex space-x-4 mt-2">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
        </ul>
    </div>
</div>

Composant Boutons de partage social

Un composant réactif de boutons de partage social avec une conception 3D incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement. Il prend en charge les thèmes sombres avec CSS.

Ouvrir Aperçu

                <div class="flex justify-center space-x-4 p-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
            <i class="fab fa-facebook-f"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
            <i class="fab fa-twitter"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
            <i class="fab fa-linkedin-in"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
            <i class="fab fa-instagram"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Galerie de produits Composant - Material Design

Un composant de galerie de produits inspiré de Material Design avec un design réactif, des effets de survol et la prise en charge du thème sombre. Utilise Tailwind CSS.

Ouvrir Aperçu

                <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="dark:bg-gray-800 dark:text-white">
    <div class="-m-1 flex flex-wrap md:-m-2">
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=1"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=2"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=3"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=4"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=5"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=6"
          />
        </div>
      </div>
    </div>
  </div>
</div>

Composant Visionneuse à 360°

Un composant de visionneuse à 360° avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise CSS pour les animations et les interactions pour une sensation de micro-interaction. Pas de JavaScript.

Ouvrir Aperçu

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="relative w-64 h-64">
    <div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 ease-in-out hover:rotate-180" style="background-image: url('https://picsum.photos/id/237/256/256');"></div>
    <div class="absolute inset-0 flex justify-center items-center opacity-0 hover:opacity-100 transition-opacity duration-300">
      <div class="text-white text-xl font-bold">View 360</div>
    </div>
  </div>
</div>

Composant de zone de recherche

Un composant de boîte de recherche conçu avec le style Brutalism à l’aide de Tailwind CSS. Dispose d’un design à contraste élevé, d’effets réactifs et prend en charge le thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg w-full max-w-md">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white text-center mb-4">Search</h2>
        <div class="flex items-center border-b border-gray-300 dark:border-gray-700 mb-4">
            <input type="text" placeholder="Type your search..." class="flex-1 bg-transparent text-gray-800 dark:text-white p-2 outline-none" />
            <button class="p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white rounded-r-lg">
                <span>🔍</span>
            </button>
        </div>
        <img src="https://picsum.photos/400/200" class="w-full rounded-lg shadow-md" alt="Random image" />
        <div class="flex justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-center mt-2">Explore and find information quickly.</p>
    </div>
</div>

Composant d’intégration de média

Un composant d’intégration multimédia réactif doté d’une esthétique rétro/vintage, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.

Ouvrir Aperçu

                <div class="max-w-lg mx-auto bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800">
    <div class="relative">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=1" alt="Retro Media">
        <div class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 p-4">
            <h2 class="text-white text-xl font-bold">Retro Media Title</h2>
            <p class="text-gray-300">This is a description of the retro media.</p>
        </div>
    </div>
    <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Posted by</h3>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</p>
            </div>
        </div>
    </div>
    <style>
        @media (prefers-color-scheme: dark) {
            .bg-white {background-color: #1a202c;}
            .text-gray-800 {color: #e2e8f0;}
            .text-gray-300 {color: #edf2f7;}
        }
        
        .bg-black { background-color: rgba(0, 0, 0, 0.8); }
        .rounded-lg { border-radius: 0.5rem; }
        .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }
        
        .text-xl { font-size: 1.25rem; }
        .text-lg { font-size: 1.125rem; }
        .text-sm { font-size: 0.875rem; }
        
        @media (max-width: 640px) {
            .h-48 { height: 12rem; }
        }
    </style>
</div>

Composant Boutons de partage social

Un composant réactif de boutons de partage social avec un style de conception skeuomorphe qui imite ses homologues du monde réel, avec la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
    <h2 class="text-lg font-bold">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
        </a>
    </div>
    <div class="text-sm text-gray-600 dark:text-gray-400">
        <p>Connect with us!</p>
    </div>
</div>

Composant d’en-tête

Un composant d’en-tête réactif avec prise en charge du mode sombre, avec un logo, des liens de navigation et un bouton d’appel à l’action. La conception utilise un fond sombre pour réduire la fatigue oculaire.

Ouvrir Aperçu

                <header class="bg-gray-900 text-gray-100">
  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
    <a class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
      </svg>
      <span class="ml-3 text-xl">DarkMode Header</span>
    </a>
    <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
      <a class="mr-5 hover:text-white">First Link</a>
      <a class="mr-5 hover:text-white">Second Link</a>
      <a class="mr-5 hover:text-white">Third Link</a>
      <a class="mr-5 hover:text-white">Fourth Link</a>
    </nav>
    <button class="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">Button
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
        <path d="M5 12h14M12 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</header>

1 ... 289 290 291 292 293 ... 315

Rechercher des composants

Catégories

Tous les composants