Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Visionneuse de fichiers

Un composant de visionneuse de fichiers de conception minimaliste et plat adapté à la visualisation de données dans un tableau de bord avec une palette de couleurs monochromatiques et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
  <h2 class="text-xl text-gray-100 dark:text-gray-200 mb-4">File Viewer</h2>
  <div class="flex flex-col md:flex-row justify-between mb-4">
    <div class="w-full md:w-2/3">
      <img src="https://picsum.photos/600/400" alt="File Preview" class="rounded-lg">
    </div>
    <div class="w-full md:w-1/3 md:ml-4">
      <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow">
        <h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">File Details</h3>
        <p class="text-gray-300 dark:text-gray-400">Name: Example File.pdf</p>
        <p class="text-gray-300 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-300 dark:text-gray-400">Date: 2023-10-05</p>
        <div class="mt-4">
          <button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg">Download</button>
          <button class="bg-red-600 hover:bg-red-500 text-white font-semibold py-2 px-4 rounded-lg ml-2">Delete</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col"> 
    <h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">Comments</h3>
    <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <h4 class="text-gray-300 dark:text-gray-400">John Doe</h4>
          <p class="text-gray-400 dark:text-gray-500">Great file!</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <h4 class="text-gray-300 dark:text-gray-400">Jane Doe</h4>
          <p class="text-gray-400 dark:text-gray-500">Thanks for sharing!</p>
        </div>
      </div>
    </div>
    <div class="flex mb-2">
      <input type="text" placeholder="Add a comment..." class="flex-grow border border-gray-600 bg-gray-700 dark:bg-gray-800 text-gray-200 dark:text-gray-300 rounded-lg py-2 px-4 mr-2" />
      <button class="bg-green-500 hover:bg-green-400 text-white font-semibold py-2 px-4 rounded-lg">Post</button>
    </div>
  </div>
</div>

Composant de curseur de carrousel

Un composant de curseur de carrousel minimaliste conçu pour les blogs et la consommation de contenu, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="carousel w-full relative">
  <div class="carousel-inner relative w-full overflow-hidden">
    <!-- Slide 1 -->
    <div class="carousel-item active relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
      </div>
    </div>
    <!-- Slide 2 -->
    <div class="carousel-item relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. Praesent dapibus, neque id vestibulum.</p>
      </div>
    </div>
    <!-- Slide 3 -->
    <div class="carousel-item relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev absolute top-1/2 left-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Previous">
    <span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full"><</span>
  </a>
  <a class="carousel-control-next absolute top-1/2 right-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Next">
    <span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full">></span>
  </a>
</div>

Composant Colonnes

Colonnes en niveaux de gris réactives de style 3D pour une page de portfolio, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="py-10 dark:bg-gray-900">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 1</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project one, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 2</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project two, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 3</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project three, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
    </div>
  </div>
</section>

Lecteur vidéo monochromatique 3D

Un composant de lecteur vidéo réactif avec des éléments de conception 3D et une palette de couleurs monochromatiques, adapté à un tableau de bord.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">  <div class="relative w-full max-w-2xl rounded-lg shadow-xl overflow-hidden dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-500 hover:scale-105">    <div class="aspect-w-16 aspect-h-9">      <video controls class="w-full h-full object-cover">        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">        Your browser does not support the video tag.      </video>    </div>    <div class="p-6">      <h3 class="text-2xl font-semibold text-gray-800 dark:text-white mb-3">Video Title</h3>      <p class="text-gray-600 dark:text-gray-300">A brief description of the video content goes here. This is a sample video demonstrating the video player component with a 3D-like feel and monochromatic colors.</p>    </div>    <div class="absolute inset-0 pointer-events-none">      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-transparent to-gray-300 opacity-20 dark:from-gray-700 dark:to-gray-800 rounded-lg"></div>    </div>  </div></div>

Aller au composant de lien de contenu - Skeuomorphisme en niveaux de gris

Un lien simple et réactif « Skip to Content » avec un design skeuomorphique en niveaux de gris pour le contenu du blog. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>

<main id="main-content" class="p-4">
  <!-- Your main content goes here -->
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
  <p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>

Composant de la liste de souhaits

Un composant de liste de souhaits réactif conçu pour le mode sombre, adapté aux sites Web d’entreprise. Il comporte des éléments interactifs et une palette de couleurs complémentaire, construite à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-900 text-white p-5">
    <h1 class="text-2xl font-bold mb-5">Wishlist</h1>
    <div class="overflow-x-auto">
        <table class="min-w-full bg-gray-800 rounded-lg shadow-lg">
            <thead>
                <tr class="bg-gray-700 text-gray-200">
                    <th class="py-2 px-4">Item</th>
                    <th class="py-2 px-4">Description</th>
                    <th class="py-2 px-4">Price</th>
                    <th class="py-2 px-4">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b border-gray-600">
                    <td class="py-4 px-4 flex items-center">
                        <img src="https://picsum.photos/50/50" alt="Item 1" class="rounded mr-3">
                        Item 1
                    </td>
                    <td class="py-4 px-4">This is a description of item 1.</td>
                    <td class="py-4 px-4">$19.99</td>
                    <td class="py-4 px-4">
                        <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
                        <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
                    </td>
                </tr>
                <tr class="border-b border-gray-600">
                    <td class="py-4 px-4 flex items-center">
                        <img src="https://picsum.photos/50/51" alt="Item 2" class="rounded mr-3">
                        Item 2
                    </td>
                    <td class="py-4 px-4">This is a description of item 2.</td>
                    <td class="py-4 px-4">$29.99</td>
                    <td class="py-4 px-4">
                        <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
                        <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
                    </td>
                </tr>
                <tr class="border-b border-gray-600">
                    <td class="py-4 px-4 flex items-center">
                        <img src="https://picsum.photos/50/52" alt="Item 3" class="rounded mr-3">
                        Item 3
                    </td>
                    <td class="py-4 px-4">This is a description of item 3.</td>
                    <td class="py-4 px-4">$39.99</td>
                    <td class="py-4 px-4">
                        <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
                        <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="mt-5 flex justify-between">
        <button class="bg-green-600 text-white py-2 px-5 rounded hover:bg-green-500">Move All to Cart</button>
        <button class="bg-gray-600 text-white py-2 px-5 rounded hover:bg-gray-500">Clear Wishlist</button>
    </div>
</div>

Formulaire de connexion brutaliste

Un formulaire de connexion complexe et réactif conçu dans un style brutaliste avec des tons de terre, adapté aux applications de commerce électronique, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-300 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
            </div>
            <div class="mb-4">
                <label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
            </div>
            <div class="flex justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-sm text-gray-600 dark:text-gray-400">Remember Me</label>
                </div>
                <a href="#" class="text-sm text-green-600 hover:underline dark:text-green-400">Forgot Password?</a>
            </div>
            <button type="submit" class="w-full py-2 text-white bg-green-600 rounded-md hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 transition duration-150 ease-in-out">Login</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-green-600 hover:underline dark:text-green-400">Sign Up</a></p>
        </div>
        <div class="mt-8 text-center">
            <img src="https://picsum.photos/100" alt="Random" class="rounded-full mx-auto">
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">User Avatar Loaded Randomly</p>
        </div>
    </div>
</div>

Composant Visionneuse à 360°

Un composant de visionneuse à 360° conçu avec un style skeuomorphe, utilisant une palette de couleurs en niveaux de gris. Il dispose d’une interface de complexité moyenne adaptée aux applications de médias sociaux, prenant en charge les thèmes clairs et sombres.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">360° Viewer</h2>
    <div class="mt-4 w-full max-w-md h-64 border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden shadow-inner">
        <img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-full object-cover transition-transform hover:scale-105 duration-300" />
    </div>
    <div class="mt-4 flex items-center">
        <div class="flex-shrink-0">
            <img class="w-10 h-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
        </div>
        <div class="ml-3">
            <p class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 1 hour ago</p>
        </div>
    </div>
    <div class="mt-4">
        <button class="px-4 py-2 text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Interact</button>
    </div>
</div>

Composants d’authentification

Un composant d’authentification simple pour les sites Web d’entreprise et d’entreprise à l’aide du Material Design et une palette de couleurs complémentaire avec Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Login</h2>
        <form class="mt-4 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                <input type="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="[email protected]">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="********">
            </div>
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-md shadow hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300">Login</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
        </div>
    </div>
</div>

BrutalistesFiltres

Un composant de filtre simple et brutaliste pour les applications de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="flex flex-col md:flex-row items-start md:items-center justify-between border-2 border-black dark:border-white p-4">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4 md:mb-0">Filters</h2>
    <div class="flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-blue-500 text-white font-bold border-2 border-black dark:border-white hover:bg-blue-700 dark:bg-yellow-500 dark:text-black dark:hover:bg-yellow-700 transition duration-300">Latest</button>
      <button class="px-4 py-2 bg-red-500 text-white font-bold border-2 border-black dark:border-white hover:bg-red-700 dark:bg-green-500 dark:text-black dark:hover:bg-green-700 transition duration-300">Popular</button>
      <button class="px-4 py-2 bg-green-500 text-white font-bold border-2 border-black dark:border-white hover:bg-green-700 dark:bg-red-500 dark:text-black dark:hover:bg-red-700 transition duration-300">Friends</button>
      <button class="px-4 py-2 bg-yellow-500 text-white font-bold border-2 border-black dark:border-white hover:bg-yellow-700 dark:bg-blue-500 dark:text-black dark:hover:bg-blue-700 transition duration-300">Following</button>
    </div>
  </div>
</div>

1 ... 112 113 114 115 116 ... 262

Catégories

Tous les composants