Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Mentions de l’utilisateur

Composant avec prise en charge du mode sombre, avec des effets réactifs et la prise en charge du thème sombre. Utilise des images d’espace réservé aléatoires de picsum.photos pour les images et randomuser.me pour les avatars.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-4 rounded-lg">
  <h2 class="text-xl font-bold mb-4">User Mentions</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">John Doe</p>
        <p class="text-gray-400 text-sm">Mentioned you in a comment</p>
      </div>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">Jane Smith</p>
        <p class="text-gray-400 text-sm">Mentioned you in a post</p>
      </div>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">Peter Jones</p>
        <p class="text-gray-400 text-sm">Mentioned you in a message</p>
      </div>
    </div>
  </div>
</div>

Composant Onglets en mode sombre

Un composant d’onglets réactifs conçu pour le mode sombre, utilisant Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white rounded-lg p-4">
  <div class="flex space-x-2">
    <button class="tab-button active bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 1</button>
    <button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 2</button>
    <button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 3</button>
  </div>
  <div class="tab-content mt-4">
    <div class="content active">
      <h2 class="text-lg font-semibold">Content for Tab 1</h2>
      <img src="https://picsum.photos/400/200?random=1" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">This is the content for the first tab. Here you can add more information, images, etc.</p>
    </div>
    <div class="content hidden">
      <h2 class="text-lg font-semibold">Content for Tab 2</h2>
      <img src="https://picsum.photos/400/200?random=2" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">This is the content for the second tab. More details can be added here.</p>
    </div>
    <div class="content hidden">
      <h2 class="text-lg font-semibold">Content for Tab 3</h2>
      <img src="https://picsum.photos/400/200?random=3" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">Here is the content for the third tab, where additional insights can be included.</p>
    </div>
  </div>
</div>
<style>
  .tab-button.active {
    background-color: #1f2937;
    border: 1px solid #4b5563;
  }
  .tab-button:hover {
    background-color: #374151;
  }
  .content.hidden {
    display: none;
  }
  .content.active {
    display: block;
  }
</style>

Composant Boutons

Un composant de boutons de style rétro/vintage qui présente des effets réactifs et une prise en charge du thème sombre, conçu pour évoquer la nostalgie de l’esthétique des années 80 et 90.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Retro/Vintage Buttons</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <button class="bg-pink-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
            Retro Pink Button
        </button>
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            Vintage Blue Button
        </button>
        <button class="bg-green-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
            Nostalgic Green Button
        </button>
        <button class="bg-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500">
            Retro Purple Button
        </button>
    </div>
    <div class="mt-8">
        <img class="w-32 h-32 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://picsum.photos/200/200" alt="Random Placeholder" />
        <p class="text-center text-gray-600 dark:text-gray-300">Nostalgic Image</p>
    </div>
    <div class="mt-4">
        <img class="w-16 h-16 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Random User Avatar" />
        <p class="text-center text-gray-600 dark:text-gray-300">User Avatar</p>
    </div>
</div>

Composant de zone de recherche

Composant de zone de recherche en mode sombre avec conception réactive et prise en charge du thème sombre. Aucun JavaScript n’est utilisé. Les images sont des images de substitution.

Ouvrir Aperçu

                <form class="flex items-center w-full max-w-md mx-auto mt-10">
  <label for="simple-search" class="sr-only">Search</label>
  <div class="relative w-full">
    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
  </div>
  <button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
    <svg class="w-5 h-5" 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>
    <span class="sr-only">Search</span>
  </button>
</form>

Composant Messages d’erreur

Composant de message d’erreur au design skeuomorphe, doté d’une icône d’alerte réaliste et d’une bordure ombrée. Il prend en charge les mises en page réactives et comprend des styles distincts pour le mode sombre, garantissant une lisibilité et une apparence visuellement appropriée dans différents thèmes.

Ouvrir Aperçu

                <div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
    <div class="flex items-center space-x-4">
        <div class="flex-shrink-0">
            <!-- Skeuomorphic Error Icon -->
            <svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.306 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
        </div>
        <div>
            <h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
                Error Occurred
            </h3>
            <p class="mt-2 text-sm text-red-100 dark:text-red-200">
                An unexpected error has occurred. Please try again later.
            </p>
        </div>
    </div>
</div>

Composant Mentions de l’utilisateur

Composant mettant en œuvre le style Glassmorphism avec un design réactif et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
  <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-grow">
    <p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
    <p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
  </div>
  <button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
    Follow
  </button>
</div>

Composant de navigation rétro

Un composant de navigation de style rétro avec une esthétique vintage des années 80/90, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-lg p-6 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="text-xl font-bold text-gray-800 dark:text-white">Retro Nav</span>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark: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 12h16m-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Home</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">About</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Services</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Contact</a>
        </div>
    </div>
</nav>

Ajouter au panier Bouton

Un composant de bouton skeuomorphique 'Ajouter au panier' 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 items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
        <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        </div>
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
            Add to Cart
        </button>
    </div>
</div>

Composant Tableaux de données

Un composant de tables de données réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec la prise en charge des thèmes sombres et des images d’espace réservé aléatoires.

Ouvrir Aperçu

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 transition ease-in-out duration-300">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User Data Table</h2>
        <table class="min-w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg">
            <thead>
                <tr class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">
                    <th class="py-3 px-4 text-left">#</th>
                    <th class="py-3 px-4 text-left">Avatar</th>
                    <th class="py-3 px-4 text-left">Name</th>
                    <th class="py-3 px-4 text-left">Email</th>
                    <th class="py-3 px-4 text-left">Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">1</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">John Doe</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(123) 456-7890</td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">2</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">Jane Smith</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(321) 654-0987</td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">3</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">Mike Johnson</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(456) 789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Composant de navigation de pied de page de conception 3D

Un composant de navigation de pied de page de style 3D avec un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-gray-100 dark:bg-gray-900 relative">
  <div class="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <div class="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Marketing</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Analytics</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Commerce</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Insights</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Pricing</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Documentation</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Guides</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">API Status</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">About</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Blog</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Jobs</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Press</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Partners</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Claim</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Privacy</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Terms</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-gray-300 dark:border-gray-700 pt-8 md:flex md:items-center md:justify-between">
      <p class="text-base text-gray-500 dark:text-gray-400">&copy; 2023 Your Company, Inc. All rights reserved.</p>
    </div>
  </div>
  <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
    <div class="absolute bottom-0 right-0 transform translate-x-1/2 translate-y-1/2 w-64 h-64 rounded-full bg-blue-500 dark:bg-blue-700 opacity-20 blur-3xl"></div>
    <div class="absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-purple-500 dark:bg-purple-700 opacity-20 blur-3xl"></div>
  </div>
</footer>

1 ... 290 291 292 293 294 ... 315

Rechercher des composants

Catégories

Tous les composants