Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Volet Composantes sociales

Un composant de médias sociaux de style rétro/vintage doté d’une interface riche avec de multiples éléments interactifs, conçu avec des couleurs complémentaires et prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h1 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-300 mb-4">Retro Social Media</h1>
    <div class="bg-white dark:bg-gray-700 rounded-lg p-4">
        <div class="flex mb-4">
            <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-blue-700 dark:text-blue-200">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-800 dark:text-gray-200 mb-4">Feeling nostalgic about the good old days of the 80s and 90s. What’s your favorite memory?</p>
        <img class="w-full h-auto rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200">Like</button>
            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-200">Comment</button>
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-200">Share</button>
        </div>
    </div>
    <div class="margin-top: 8px flex justify-between items-center text-gray-600 dark:text-gray-300 text-sm">
        <span class="cursor-pointer hover:underline">12 Likes</span>
        <span class="cursor-pointer hover:underline">3 Comments</span>
    </div>
</div>

Composant de connexion/inscription

Composant complexe de connexion/inscription conçu avec un style skeuomorphe, utilisant un schéma de couleurs en niveaux de gris pour une interface de tableau de bord. Il comprend divers éléments interactifs et est réactif avec la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-white dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Login / Signup</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" class="mr-2 leading-tight" id="remember">
                    <label class="text-gray-600 dark:text-gray-300" for="remember">Remember me</label>
                </div>
                <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800" href="#">Forgot Password?</a>
            </div>
            <div class="flex flex-col">
                <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-4" type="submit">Login</button>
                <button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Signup</button>
            </div>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Or sign in with</p>
            <div class="flex justify-center space-x-4 mt-2">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic1/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic2/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic3/40/40" alt="Avatar">
            </div>
        </div>
    </div>
</div>

Composant Badges

Un composant de badges à thème rétro avec une palette de couleurs en niveaux de gris, adapté à un blog ou à un site de contenu. Il comporte plusieurs éléments interactifs et une réactivité totale, avec prise en charge du mode sombre. La conception évite JavaScript, s’appuyant uniquement sur HTML et Tailwind CSS.

Ouvrir Aperçu

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8 text-center">Featured Badges</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Badge 1: New Post -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-black text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            NEW POST
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Golden Age of Pixels</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore how pixel art defined an era and continues to inspire.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>2 days ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-12">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">RETRO</span>
        </div>
      </div>

      <!-- Badge 2: Editor's Pick -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-gray-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            EDITOR'S PICK
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Tech Revival</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Diving deep into the resurgence of classic gadgets.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>1 week ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-12">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">CLASSIC</span>
        </div>
      </div>

      <!-- Badge 3: Trending Topic -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-gray-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            TRENDING
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Future is Analog</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Why analog experiences are making a comeback in a digital world.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>3 days ago</span>
          </div>
        </div>
         <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-6">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">POPULAR</span>
        </div>
      </div>

      <!-- Badge 4: Deep Dive -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-blue-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            DEEP DIVE
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Lost Media Found</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Uncovering the mysteries of media long thought to be gone forever.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>1 month ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-8">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">ARCHIVE</span>
        </div>
      </div>

      <!-- Badge 5: Community Spotlight -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-purple-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            COMMUNITY
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Our Favorite Fan Theories</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Exploring the most imaginative theories from our dedicated readers.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>2 weeks ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-15">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">FAN</span>
        </div>
      </div>

      <!-- Badge 6: Retrospective -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-red-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            RETROSPECTIVE
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Gaming Consoles: A Look Back</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Tracing the evolution of gaming from 8-bit to beyond.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>3 weeks ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-9">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">OLD</span>
        </div>
      </div>

    </div>
  </div>
</div>

Composant Cartes thermiques

Un composant de carte thermique réactif pour les médias sociaux avec un design Skeuomorphism, des couleurs complémentaires et la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="p-4 md:p-8 dark:bg-gray-900 min-h-screen">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border-4 border-gray-200 dark:border-gray-700 p-6 md:p-8">
    <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center drop-shadow-md">
      Social Media Engagement Heat Map
    </h2>
    <div class="grid grid-cols-7 gap-2 md:gap-4 mb-4 text-sm font-semibold text-gray-600 dark:text-gray-300 text-center">
      <div>Mon</div>
      <div>Tue</div>
      <div>Wed</div>
      <div>Thu</div>
      <div>Fri</div>
      <div>Sat</div>
      <div>Sun</div>
    </div>
    <div class="grid grid-cols-7 gap-2 md:gap-4">
      <!-- Example Heat Map Cells (adjust as needed) -->
      
      <!-- Week 1 -->
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-green-300 to-green-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-green-600 dark:to-green-800 border-2 border-green-600 dark:border-green-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">15</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-yellow-600 dark:to-yellow-800 border-2 border-yellow-600 dark:border-yellow-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">25</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-orange-300 to-orange-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-orange-600 dark:to-orange-800 border-2 border-orange-600 dark:border-orange-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">35</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-red-300 to-red-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-red-600 dark:to-red-800 border-2 border-red-600 dark:border-red-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">45</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-purple-600 dark:to-purple-800 border-2 border-purple-600 dark:border-purple-300 " style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">55</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-blue-300 to-blue-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-blue-600 dark:to-blue-800 border-2 border-blue-600 dark:border-blue-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">65</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-indigo-600 dark:to-indigo-800 border-2 border-indigo-600 dark:border-indigo-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">75</span>
      </div>

      <!-- Week 2 - More cells as needed -->
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-green-300 to-green-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-green-600 dark:to-green-800 border-2 border-green-600 dark:border-green-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">20</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-blue-300 to-blue-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-blue-600 dark:to-blue-800 border-2 border-blue-600 dark:border-blue-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">30</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-red-300 to-red-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-red-600 dark:to-red-800 border-2 border-red-600 dark:border-red-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">50</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-yellow-600 dark:to-yellow-800 border-2 border-yellow-600 dark:border-yellow-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">40</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-indigo-600 dark:to-indigo-800 border-2 border-indigo-600 dark:border-indigo-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">60</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-orange-300 to-orange-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-orange-600 dark:to-orange-800 border-2 border-orange-600 dark:border-orange-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">70</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-purple-600 dark:to-purple-800 border-2 border-purple-600 dark:border-purple-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">80</span>
      </div>
    </div>
    
    <div class="mt-8 text-center">
      <p class="text-gray-700 dark:text-gray-300 text-sm md:text-base">Engagement levels tend to be higher on <span class="font-bold text-red-500 dark:text-red-400">Thursdays</span> and <span class="font-bold text-blue-500 dark:text-blue-400">Sundays</span>.</p>
    </div>

  </div>
</div>

Composant de réinitialisation de mot de passe

Un composant simple de réinitialisation de mot de passe conçu à l’aide des principes de conception matérielle avec un jeu de couleurs en niveaux de gris. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Password</h2>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400">Enter your email address and we will send you a link to reset your password.</p>
        <form class="mt-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 appearance-none rounded-md border border-gray-300 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="[email protected]" />
            </div>
            <button type="submit" class="mt-6 w-full py-2 px-4 bg-gray-800 text-white font-semibold rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Back to Login</a>
        </div>
    </div>
</div>

Composant Filtres

Un composant de filtre de médias sociaux à thème rétro/vintage avec des tons de terre, une mise en page simple, un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="container mx-auto p-4 md:p-8 font-serif">

  <!-- Retro/Vintage Filters Section -->
  <div class="bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg p-6 mb-8 border-4 border-amber-800 dark:border-amber-200 transform -rotate-2">
    <h2 class="text-2xl md:text-3xl font-bold text-amber-800 dark:text-amber-200 mb-4 text-center uppercase tracking-wide">Vintage Filters</h2>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
      <!-- Filter 1 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage1/200/200" alt="Vintage Filter 1" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Sepia</p>
      </div>

      <!-- Filter 2 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage2/200/200" alt="Vintage Filter 2" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Grayscale</p>
      </div>

      <!-- Filter 3 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage3/200/200" alt="Vintage Filter 3" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Lomo</p>
      </div>

      <!-- Filter 4 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage4/200/200" alt="Vintage Filter 4" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Noir</p>
      </div>

      <!-- Filter 5 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage5/200/200" alt="Vintage Filter 5" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Retro</p>
      </div>
    </div>
  </div>

  <!-- Simple Adjustments Section -->
  <div class="bg-lime-100 dark:bg-lime-900 rounded-lg shadow-lg p-6 border-4 border-lime-800 dark:border-lime-200 transform rotate-1">
    <h2 class="text-2xl md:text-3xl font-bold text-lime-800 dark:text-lime-200 mb-4 text-center uppercase tracking-wide">Basic Adjustments</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <!-- Adjustment 1 -->
      <div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
        <label for="brightness" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Brightness:</label>
        <input type="range" id="brightness" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
      </div>

      <!-- Adjustment 2 -->
      <div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
        <label for="contrast" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Contrast:</label>
        <input type="range" id="contrast" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
      </div>
    </div>
  </div>

</div>

Composant Composants de visualisation de données

Un composant de visualisation de données réactif avec plusieurs éléments interactifs, conçu pour un site Web de blog/contenu. Il présente un design minimaliste / plat, une palette de couleurs complémentaires et inclut la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">Data Visualization Dashboard</h1>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Views</p>
          <p class="text-3xl font-semibold text-indigo-600 dark:text-indigo-400">15, apt. 234</p>
        </div>
        <svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">New Users</p>
          <p class="text-3xl font-semibold text-green-600 dark:text-green-400">2, average. 100</p>
        </div>
        <svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12.55V14a2 2 0 100-4v-3a1 1 0 00-1-1H9V7c-.642 0-1.246.311-1.614.811L4.363 11a3.001 3.001 0 00-.309 3.016l1.248 1.942M18 17h-7l-1.5-1.5"></path></svg>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Bounce Rate</p>
          <p class="text-3xl font-semibold text-red-600 dark:text-red-400">32.5%</p>
        </div>
        <svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Avg. Session</p>
          <p class="text-3xl font-semibold text-yellow-600 dark:text-yellow-400">00:03:45</p>
        </div>
        <svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Page Views Over Time</h2>
        <!-- Placeholder for a line chart -->
        <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-500 dark:text-gray-400">Line Chart Placeholder</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">User Acquisition Channels</h2>
        <!-- Placeholder for a bar chart -->
        <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-500 dark:text-gray-400">Bar Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Engagement & User Info Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md lg:col-span-2">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Top Engaging Content</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">How to master Tailwind CSS</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">2,100 Views</span>
          </li>
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">Understanding JavaScript Async/Await</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">1,850 Views</span>
          </li>
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">A Guide to Modern Web Development</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">1,700 Views</span>
          </li>
        </ul>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Recent Activities</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">John Doe</span> commented on 'New Features'</p>
          </li>
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">Jane Smith</span> shared 'Blog Post Analysis'</p>
          </li>
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/77.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">Peter Jones</span> viewed 'Data Trends 2023'</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Composant d’alerte de délai d’expiration de session

Un composant d’alerte de délai d’expiration de session conçu pour les micro-interactions, utilisant un jeu de couleurs en niveaux de gris et un design réactif avec prise en charge du thème sombre. Idéal pour les plateformes de commerce électronique pour alerter les utilisateurs de l’expiration de la session.

Ouvrir Aperçu

                <div class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-white dark:bg-gray-800 flex-col sm:flex-row rounded-lg shadow-lg">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Session Timeout" class="w-12 h-12 rounded-full shadow-lg" />
        <div class="text-gray-900 dark:text-white">
            <h2 class="text-lg font-semibold">Session Timeout</h2>
            <p class="text-sm">Your session is about to expire. Please take action to continue shopping.</p>
        </div>
    </div>
    <div class="flex space-x-2 mt-4 sm:mt-0">
        <button class="px-4 py-2 font-semibold text-white bg-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Stay Logged In</button>
        <button class="px-4 py-2 font-semibold text-gray-900 border border-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:text-white dark:border-white dark:hover:bg-gray-700">Log Out</button>
    </div>
</div>

Composant Boutons

Un composant Buttons conçu avec des éléments 3D et des couleurs vives pour les interfaces de médias sociaux, prenant en charge le thème sombre et le responsive design.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Connect with Us!</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=1" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Follow
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=2" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Share
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=3" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Like
        </a>
    </div>
</div>

Ajouter au panier Composant du bouton

Un bouton complexe Ajouter au panier conçu avec une esthétique rétro/vintage et une palette de couleurs complémentaire, adapté à un site Web d’entreprise professionnel. Ce composant prend en charge le mode sombre et est réactif, utilisant Tailwind CSS pour le coiffage.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-5 bg-gradient-to-r from-pink-500 to-yellow-500 rounded-lg transition duration-300 ease-in-out hover:scale-105 dark:from-pink-800 dark:to-yellow-700">  <img src="https://picsum.photos/40/40" alt="Product Image" class="rounded">  <div class="ml-4">    <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">Product Title</h2>    <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product.</p>  </div>  <button class="ml-auto bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Add to Cart</button>  <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 h-10 w-10 rounded-full border-2 border-blue-500 dark:border-blue-700"> </div>

1 ... 100 101 102 103 104 ... 282

Catégories

Tous les composants