Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composants fonctionnels - Style brutalisme

Un composant web fonctionnel conçu dans un style brutaliste à l’aide de Tailwind CSS. Le composant présente une mise en page audacieuse avec un contraste élevé, des effets réactifs et la prise en charge des thèmes sombres. Il comprend des images de remplacement et des avatars pour un attrait visuel.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen p-6 bg-white dark:bg-gray-800">
    <div class="container mx-auto w-full max-w-4xl p-6 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
        <h1 class="text-4xl font-bold text-black dark:text-white mb-4">Brutalist Functional Component</h1>
        <p class="text-lg text-gray-800 dark:text-gray-300 mb-6">
            This component showcases a raw and bold design aesthetic typical of brutalism. 
            It emphasizes usability and content over polished interfaces.
        </p>
        <div class="flex flex-wrap justify-between gap-4">
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/300" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 1</h2>
                <p class="text-gray-700 dark:text-gray-200">This section contains a brief description with a bold design that embraces simplicity.</p>
            </div>
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/301" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 2</h2>
                <p class="text-gray-700 dark:text-gray-200">Another section to demonstrate the design. High contrast provides a striking look.</p>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-500 dark:border-gray-400 pt-4">
            <h2 class="text-2xl font-bold text-black dark:text-white">User Information</h2>
            <div class="flex items-center gap-4 mt-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow">
                <div>
                    <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Cartes

Un composant Maps doté d’un design glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.

Ouvrir Aperçu

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Our Locations</h2>
    <div class="relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Map Image" class="rounded-lg" />
      <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location A</p>
      </div>
      <div class="absolute top-1/4 right-1/4 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location B</p>
      </div>
      <div class="absolute bottom-0 left-1/4 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location C</p>
      </div>
    </div>
    <div class="flex justify-between mt-4">
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">View More</button>
      <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Contact Us</button>
    </div>
  </div>
</div>

Lecteur audio rétro

Composant Implémentation d’un lecteur audio avec un design rétro/vintage, des effets réactifs et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div
  class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900"
>
  <div
    class="w-full max-w-md p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 transform transition-all duration-300 hover:scale-105"
  >
    <div class="flex items-center justify-between mb-6">
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-200">Now Playing</div>
      <button
        class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
          />
        </svg>
      </button>
    </div>
    <div class="flex items-center mb-6">
      <img
        class="w-16 h-16 rounded-md mr-4 object-cover"
        src="https://picsum.photos/id/1011/150/150"
        alt="Album Art"
      />
      <div>
        <div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Song Title</div>
        <div class="text-gray-600 dark:text-gray-400">Artist Name</div>
      </div>
    </div>
    <div class="mb-4">
      <div class="w-full h-2 bg-gray-300 rounded-full mb-2 overflow-hidden">
        <div class="h-full bg-blue-500" style="width: 50%"></div>
      </div>
      <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
        <span>2:30</span>
        <span>4:50</span>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button
        class="p-3 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
          />
        </svg>
      </button>
      <button
        class="p-4 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transform transition-transform duration-200 hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-8 w-8"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M14.752 11.168l-3.197 2.132A1 1 0 0110 13.803V9.197a1 1 0 011.555-.832l3.197 2.132a1 1 0 010 1.664z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </button>
      <button
        class="p-3 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 rotate-180"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
          />
        </svg>
      </button>
    </div>
  </div>
</div>

Ajouter au panier Composant du bouton

Un bouton d’ajout au panier réactif conçu pour le mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-10 bg-gray-900 min-h-screen">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <div class="flex items-center">
            <img src="https://picsum.photos/100" alt="Product Image" class="w-16 h-16 rounded-lg mr-4">
            <div class="text-white">
                <h2 class="text-lg font-semibold">Product Name</h2>
                <p class="text-gray-400">Product description goes here.</p>
                <p class="text-xl font-bold mt-2">$29.99</p>
            </div>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

Composant Tableaux de bord

Un composant de tableau de bord avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    </div>
  </div>
</div>

Composant Colonnes

Un composant de colonnes réactives conçu pour le mode sombre à l’aide de Tailwind CSS, avec des espaces réservés d’avatar et d’image.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-6">
    <h2 class="text-2xl font-bold mb-4">Columns Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Column 1 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User One</span>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
        </div>
        <!-- Column 2 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Two</span>
            </div>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>
        <!-- Column 3 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Three</span>
            </div>
            <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
        </div>
    </div>
</div>

Composant de pagination

Composant de pagination pour l’interface utilisateur du mode sombre avec effets réactifs et prise en charge du thème sombre.

Ouvrir Aperçu

                <nav aria-label="Pagination" class="flex items-center justify-between border-t border-gray-700 px-4 sm:px-0">
  <div class="-mt-px flex w-0 flex-1">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
      <svg class="mr-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z" clip-rule="evenodd" />
      </svg>
      Previous
    </a>
  </div>
  <div class="hidden md:-mt-px md:flex">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">1</a>
    <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
    <a href="#" class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600 dark:text-indigo-400" aria-current="page">2</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">3</a>
    <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400">...</span>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">8</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">9</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">10</a>
  </div>
  <div class="-mt-px flex w-0 flex-1 justify-end">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
      Next
      <svg class="ml-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

Composant Lightbox d’image

Un composant de lightbox d’image réactive conçu avec le style Glassmorphism à l’aide de Tailwind CSS. Le composant prend en charge un thème sombre avec des éléments translucides givrés ressemblant à du verre et des effets de flou.

Ouvrir Aperçu

                <div class="relative">
    <button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
        <img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
    </button>
    <div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
        <div class="flex items-center justify-center h-full">
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
                <img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
                <button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
    /* Lightbox toggle visibility */
    #lightbox:target {
        display: flex;
    }
</style>

Composant de la barre de navigation

Une barre de navigation réactive avec des micro-interactions et la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">
        <a href="#" class="hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out">My Website</a>
      </div>
      <div class="hidden md:block">
        <div class="flex items-center space-x-4">
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Home</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">About</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Services</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Contact</a>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-white focus:outline-none">
          <svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Composant de réinitialisation de mot de passe avec un design brutal

Composant de réinitialisation de mot de passe avec conception brutale, prise en charge du thème réactif et sombre

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-none shadow-none border-4 border-black dark:border-white max-w-md w-full">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center tracking-tighter">Reset Your Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-bold text-black dark:text-white mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-3 py-2 border-4 border-black dark:border-white rounded-none bg-gray-200 dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:border-black dark:focus:border-white" required>
      </div>
      <div class="mb-6">
        <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border-4 border-black dark:border-white rounded-none hover:bg-gray-800 dark:hover:bg-gray-200 transition duration-0 ease-linear">Send Reset Link</button>
      </div>
    </form>
    <div class="text-center">
      <p class="text-sm">
        <a href="#" class="text-black dark:text-white hover:underline font-bold">Remember your password?</a>
      </p>
    </div>
  </div>
</div>

1 ... 211 212 213 214 215 ... 242

Catégories

Tous les composants