Tous les composants

Composant de conteneur 21

Un composant de conteneur réactif de style rétro/vintage avec prise en charge du thème sombre.

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Nostalgia</h2>
  <p class="text-gray-600 dark:text-gray-300 mb-4">Experience the charm of the 80s and 90s with our carefully curated content. Dive into the vintage vibes that bring back fond memories.</p>
  <img class="rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image" />
  <div class="flex items-center">
    <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
    <div class="ml-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-gray-500 dark:text-gray-400">Retro Enthusiast</p>
    </div>
  </div>
  <button class="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
    Explore More
  </button>
</div>

Menu déroulant Composant 20

Un composant de menu déroulant avec un style de conception brutaliste utilisant Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir l’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-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" 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.23 7.21a.75.75 0 011.06-.02L10 10.293l3.71-3.11a.75.75 0 111.01 1.11l-4.25 3.5a.75.75 0 01-1.01 0l-4.25-3.5a.75.75 0 01-.02-1.06z" 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 z-10" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=1" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Profile
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=2" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=3" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Notifications
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=4" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Log out
      </a>
    </div>
  </div>
</div>

<style>
  /* Brutalism styles for dark mode support */
  [class*='bg-'] {
    background-color: #ffffff;
  }
  [class*='text-'] {
    color: #000000;
  }
  .bg-gray-800 {
    background-color: #2d3748;
  }
  .dark .text-gray-300 {
    color: #edf2f7;
  }
  .dark .hover\:bg-gray-700:hover {
    background-color: #4a5568;
  }
</style>

Un composant de menu de hamburger squelettique conçu dans un style skeuomorphe, imitant des éléments du monde réel. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
  <div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
    <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
    <button class="focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-gray-200" 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>
  <div class="p-4 space-y-4">
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Home</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">About</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Services</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Contact</span>
    </div>
  </div>
  <div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
    <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
  </div>
</div>

Cartes thermiques Composante 18

Un composant de carte thermique réactif conçu dans un style brutalisme avec un contraste élevé, avec des images de remplacement et la prise en charge d’avatar pour le mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Heat Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="relative bg-red-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=1" alt="Heat Map 1" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region A</h3>
                <p>High Activity</p>
            </div>
        </div>
        <div class="relative bg-yellow-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=2" alt="Heat Map 2" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region B</h3>
                <p>Moderate Activity</p>
            </div>
        </div>
        <div class="relative bg-green-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=3" alt="Heat Map 3" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region C</h3>
                <p>Low Activity</p>
            </div>
        </div>
        <div class="relative bg-blue-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=4" alt="Heat Map 4" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region D</h3>
                <p>Very Low Activity</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-bold text-black dark:text-white mb-2">User Avatars</h2>
        <div class="flex flex-wrap gap-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar 5">
        </div>
    </div>
</div>

Messages de réussite Composante 17

Un composant de messages de réussite audacieux et bruts conçu avec Tailwind CSS avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full border-2 border-green-500 mr-3">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-400">Success!</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        Your operation was completed successfully. Check your account for the latest updates!
    </p>
    <div class="flex justify-end mt-4">
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Close
        </button>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #2D3748;
        }
        .text-gray-700 {
            color: #E2E8F0;
        }
    }
</style>

Barre de navigation Composant 16

Un composant de barre de navigation minimaliste au design plat avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Brand</a>
        </div>
        <div class="hidden md:flex md:space-x-8">
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="hidden md:flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-700"
        />
      </div>
      <div class="-mr-2 flex md:hidden">
        <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800"> 
          <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>
    </div>
  </div>
  <div class="md:hidden">
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Home</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">About</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Services</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Contact</a>
  </div>
</nav>

Mentions de l’utilisateur Composant 15

Composant Web qui affiche les mentions des utilisateurs dans un style Material Design, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition duration-300 ease-in-out">
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Mentioned Users</h3>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@janesmith</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@alicejohnson</span>
            </div>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md w-full h-auto">
    </div>
</div>

Composant d’intégration multimédia 14

Un composant d’intégration multimédia conçu dans un style skeuomorphe, avec des effets réactifs et une prise en charge des thèmes sombres. Il comprend une image, une description et un avatar de l’utilisateur.

Ouvrir l’aperçu

                <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8">  <div class="relative">    <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/>    <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2">      <span>Featured Media</span>    </div>  </div>  <div class="mt-4">    <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2>    <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p>  </div>  <div class="flex items-center mt-4">    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/>    <div class="ml-3">      <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>      <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p>    </div>  </div></div>

Composant de nuage de balises 13

Un composant Tag Cloud conçu avec le style Neumorphism. Il présente un style d’interface utilisateur doux avec des éléments semblant s’extruder de l’arrière-plan à l’aide d’ombres subtiles. Le composant prend en charge le responsive design et les thèmes sombres.

Ouvrir l’aperçu

                <div class="flex flex-wrap justify-center p-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 1
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 2
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 3
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 4
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 5
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 6
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 7
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 8
        </a>
    </div>
</div>

<style>
    .shadow-neumorphism {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
                    -10px -10px 20px rgba(255, 255, 255, 0.5);
    }
</style>

Composant de connexion/inscription 12

Un composant de connexion/inscription réactif conçu dans le style du mode sombre, utilisant Tailwind CSS pour le style.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-5">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-white text-center">Welcome</h2>
        <p class="text-gray-400 text-center mb-6">Please login or signup to continue</p>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="email">Email</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="email" id="email" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="password">Password</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="password" id="password" placeholder="Enter your password" required />
        </div>
        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">Login</button>
        <div class="flex items-center justify-between my-4">
            <hr class="w-1/4 border-gray-600">
            <span class="text-gray-400">or</span>
            <hr class="w-1/4 border-gray-600">
        </div>
        <button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500">Signup</button>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-400">Login</a></p>
        <p class="text-gray-400 text-center">Need an account? <a href="#" class="text-green-400">Signup</a></p>
    </div>
</div>

Catégories

Composant de conteneur 21

Menu déroulant Composant 20

Hamburger Menu Component 19

Cartes thermiques Composante 18

Messages de réussite Composante 17

Barre de navigation Composant 16

Mentions de l’utilisateur Composant 15

Composant d’intégration multimédia 14

Composant de nuage de balises 13

Composant de connexion/inscription 12