Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

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 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 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 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 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 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 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>

Composants d’affichage de contenu Composant 11

Un composant d’affichage de contenu de style rétro/vintage présentant des designs nostalgiques des années 80/90, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="flex flex-col md:flex-row items-center p-6">
        <img class="w-full md:w-1/3 h-auto rounded-lg mb-4 md:mb-0" src="https://picsum.photos/300/200?random=1" alt="Random retro image">
        <div class="md:ml-4">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Retro/Vintage Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mb-2">This is a nostalgic description that evokes the design style of the 80s and 90s, full of vibrant colors and retro aesthetics.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">Posted by <span class="font-bold">User Name</span></span>
            </div>
        </div>
    </div>
    <div class="p-6">
        <p class="text-gray-700 dark:text-gray-300">Here’s a bit more detail about the content. This section can be used to provide additional context or information.</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 text-right">
        <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Read More</button>
    </div>
</div>

Volet Indicateurs de progrès

Un composant d’indicateurs de progression inspiré de Material Design avec des effets réactifs et la prise en charge du thème sombre, construit à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="container mx-auto p-5">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Progress Indicators</h2>

    <div class="flex flex-col space-y-4">
        <!-- Linear Progress Bar -->
        <div class="w-full">
            <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-blue-600 h-2.5 rounded-full w-3/4" style="transition: width 0.5s;"></div>
            </div>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Loading... 75%</p>
        </div>

        <!-- Circular Progress Indicator -->
        <div class="flex items-center space-x-2">
            <div class="relative flex items-center justify-center w-12 h-12">
                <svg class="absolute animate-spin -ml-1 mr-3" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
                    <circle class="text-gray-200 dark:text-gray-700" cx="25" cy="25" r="20" stroke-width="5" fill="none"></circle>
                    <path class="text-blue-600" fill="none" stroke-width="5" stroke-linecap="round" d="M25 5a20 20 0 1 0 0 40A20 20 0 0 0 25 5z" style="stroke-dasharray: 125; stroke-dashoffset: 62.5;"></path>
                </svg>
                <span class="text-lg text-gray-800 dark:text-gray-200">Processing</span>
            </div>
        </div>

        <!-- Steps Progress Indicator -->
        <div class="relative">
            <div class="flex">
                <div class="flex items-center justify-center w-10 h-10 bg-blue-600 text-white rounded-full">1</div>
                <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
                <div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">2</div>
                <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
                <div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">3</div>
            </div>
            <div class="absolute top-[-1rem] left-[calc(50%_-_2.5rem)] bg-white dark:bg-gray-800 p-2 rounded shadow-md text-center text-sm text-gray-800 dark:text-gray-200">Step 1: Details</div>
        </div>

        <!-- Avatar Loading Indicator -->
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700" />
            <div class="flex-1">
                <div class="bg-gray-300 h-2 rounded w-3/4 dark:bg-gray-600"></div>
                <div class="text-gray-600 dark:text-gray-400 text-sm">User is online</div>
            </div>
        </div>

        <!-- Image Progress Indicator -->
        <div class="flex flex-col items-center space-y-1">
            <img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-md shadow-md w-full max-w-xs" />
            <div class="bg-blue-600 h-2 rounded w-2/3 dark:bg-blue-500"></div>
        </div>
    </div>
</div>

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

Forum communautaire Composante 9

Un composant du forum communautaire doté d’un design de morphisme en verre avec des éléments translucides semblables à du verre givré, des effets réactifs et la prise en charge du thème sombre.

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 backdrop-filter backdrop-blur-lg opacity-80 rounded-lg shadow-lg p-6 max-w-lg w-full">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h1>
        <div class="space-y-4">
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">John Doe</h2>
                    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">Jane Smith</h2>
                    <p class="text-gray-600 dark:text-gray-300">Vivamus laoreet dolor eget lectus tincidunt, et facilisis erat laoreet.</p>
                </div>
            </div>
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">Alex Johnson</h2>
                    <p class="text-gray-600 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
                </div>
            </div>
        </div>
        <div class="mt-4">
            <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" rows="4" placeholder="Write your message..."></textarea>
            <button class="mt-2 w-full bg-blue-500 dark:bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-700 transition">Post Message</button>
        </div>
    </div>
</div>

Composant Mentions de l’utilisateur

Un utilisateur réactif mentionne un composant conçu pour le mode sombre avec la prise en charge de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold mb-2">Mentions</h2>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">John Doe</p>
            <p class="text-gray-400 text-sm">@johndoe</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Jane Smith</p>
            <p class="text-gray-400 text-sm">@janesmith</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Mike Johnson</p>
            <p class="text-gray-400 text-sm">@mikejohnson</p>
        </div>
    </div>
    <a href="#" class="text-blue-400 hover:underline">View more mentions</a>
</div>
<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
        }
    }
</style>

1 ... 238 239 240 241 242

Catégories

Tous les composants