Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de navigation collante

Un composant de navigation autocollant réactif stylisé selon les principes de conception matérielle à l’aide de Tailwind CSS, avec un thème sombre et incluant des images et un avatar aléatoires.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-10">
    <div class="max-w-7xl mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">About</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Services</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="pt-16">
    <header class="bg-gray-100 dark:bg-gray-900 h-screen flex items-center justify-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to My Website</h2>
    </header>
    <section class="p-8">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Gallery</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded shadow-lg">
        </div>
    </section>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1f2937;
        }
    }
</style>

Composant Like/Reaction Buttons

Un composant Like/Reaction Buttons avec le style de conception Glassmorphism, avec des effets de verre givré, un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 bg-clip-padding backdrop-filter backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this post!</h2>
        <div class="flex space-x-4">
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-blue-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=1" alt="Like" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Like</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-green-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=2" alt="Love" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Love</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-yellow-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=3" alt="Haha" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Haha</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-red-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=4" alt="Wow" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Wow</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-purple-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=5" alt="Sad" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Sad</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-gray-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=6" alt="Angry" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Angry</span>
            </button>
        </div>
    </div>
</div>

Composante des composantes interactives

Un composant interactif 3D présentant des cartes avec des effets de profondeur, un design réactif et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-900 transition-all duration-300">
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 1</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card. It's an engaging component.</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 2</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card. Enjoy the depth effect!</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 3</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the third card. The 3D design enhances engagement.</p>
    </div>
</div>

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs conçu dans un design brutaliste à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-800">
    <div class="max-w-sm p-6 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 shadow-md rounded-lg flex flex-col">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">
            Please enter the authentication code sent to your email.
        </p>
        <div class="flex flex-col mb-4">
            <label class="text-gray-600 dark:text-gray-400 text-sm mb-2" for="auth-code">Authentication Code</label>
            <input type="text" id="auth-code" class="p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="Enter your code">
        </div>
        <button class="w-full p-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-200">Verify</button>
        <div class="mt-4 text-center">
            <img src="https://picsum.photos/50?random=1" alt="Placeholder" class="rounded-full mb-2">
            <span class="text-gray-600 dark:text-gray-400 text-sm">John Doe</span>
        </div>
    </div>
</div>

Composant du lecteur vidéo

Un composant de lecteur vidéo réactif stylisé avec Tailwind CSS axé sur les micro-interactions et la prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105 duration-200" role="video" aria-label="Video Player">
    <div class="relative">
        <img src="https://picsum.photos/800/450?random=1" alt="Video thumbnail" class="w-full h-48 object-cover">
        <button class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-3xl rounded-full opacity-0 transition-opacity duration-200 hover:opacity-100">
            ▶
        </button>
    </div>
    <div class="p-4">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <h2 class="text-lg font-semibold dark:text-white">Video Title</h2>
        </div>
        <p class="text-sm text-gray-700 dark:text-gray-300">Description of the video goes here. It should be engaging and concise.</p>
    </div>
</div>

Composant de connexion/inscription

Un composant de connexion/inscription réactif conçu dans un style skeuomorphique utilisant Tailwind CSS, avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Login / Signup</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="username" type="text" placeholder="Enter your username" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="email">Email</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="email" type="email" placeholder="Enter your email" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="password" type="password" placeholder="Enter your password" required>
      </div>
      <div class="flex items-center justify-between mb-4">
        <label class="flex items-center">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
          <span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
        </label>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300" href="#">
          Forgot Password?
        </a>
      </div>
      <div class="flex items-center justify-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
          Login / Signup
        </button>
      </div>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">or</p>
      <button class="flex items-center justify-center mt-2 border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-4 w-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2">
        Sign in with Google
      </button>
    </div>
  </div>
</div>

Composant Boutons OAuth

Composant Web comportant des boutons OAuth avec un style de conception 3D, des effets réactifs, la prise en charge du thème sombre et des images d’espace réservé.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
  <div class="flex space-x-4">
    <a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
      Google
    </a>
    <a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
      Facebook
    </a>
    <a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
      Twitter
    </a>
  </div>
</div>

Composante des composantes interactives

Un composant interactif de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-neumorph p-6 w-80 text-center">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-md mb-4">
        <div class="mb-2">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mx-auto shadow-md">
        </div>
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
        <button class="mt-4 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium py-2 px-4 rounded-lg shadow-neumorph transform transition-all hover:scale-105 hover:shadow-lg">Follow</button>
    </div>
</div>

<style>
    .shadow-neumorph {
        box-shadow:  8px 8px 15px rgba(0, 0, 0, 0.1), 
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
</style>

Composant Visionneuse à 360°

Un composant de visionneuse minimaliste à 360° construit avec Tailwind CSS, avec des effets réactifs et une prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 transition-all duration-300">
    <div class="relative w-full max-w-lg h-72 overflow-hidden rounded-lg shadow-lg">
        <img src="https://picsum.photos/800/600?random=1" alt="360° View" class="object-cover w-full h-full transition-transform duration-500 hover:scale-105">
    </div>
    <div class="mt-4 text-center">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">360° Viewer Component</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Experience immersive views with our 360° viewer.</p>
    </div>
    <div class="mt-4 flex space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
    </div>
</div>

Composant Visionneuse à 360°

Un composant de visualisation à 360° minimaliste et réactif utilisant Tailwind CSS avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden p-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/700/400?random=1" alt="360° View" class="rounded-lg transition-transform duration-500 ease-in-out hover:scale-105">
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-2">Experience the object in 360° view. Hover to zoom in.</p>
    <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Learn more about this view</a>
</div>

1 ... 233 234 235 236 237 ... 242

Catégories

Tous les composants