Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Galerie

Un composant de galerie d’images simple et réactif conçu pour les sites Web d’entreprise, avec une palette de couleurs triadique inspirée des principes de conception matérielle. Il comprend un thème sombre pour les préférences de l’utilisateur et utilise une mise en page basée sur une grille.

Ouvrir Aperçu

                <div class="bg-blue-50 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Composant de la liste de souhaits

Un composant de liste de souhaits réactif avec des éléments 3D et des couleurs pastel, prenant en charge le thème sombre. Il comprend de multiples éléments interactifs adaptés au commerce électronique. Pas de JavaScript, seulement du HTML et du CSS Tailwind.

Ouvrir Aperçu

                <div class="p-8 font-sans bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen">
  <h1 class="text-4xl font-extrabold mb-8 text-center text-gray-800 dark:text-white relative">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-300 dark:to-pink-300">My Wishlist</span>
    <div class="absolute inset-0 flex items-center justify-center transform -rotate-3 scale-105 z-[-1] opacity-20">
      <img src="https://picsum.photos/seed/wishlist/800/400" alt="3D background element" class="rounded-3xl shadow-2xl">
    </div>
  </h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Wishlist Item 1 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-purple-200 dark:border-purple-600">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product1/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-purple-100 dark:border-purple-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Pastel Dream Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Experience serene sound with these beautifully designed pastel headphones. Perfect for relaxation.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-purple-600 dark:text-purple-300">$129.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-pink-300 dark:border-pink-500 transform rotate-6">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-pink-100 dark:bg-pink-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-purple-400 to-pink-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-purple-500 hover:to-pink-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-blue-200 dark:border-blue-600">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-green-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product2/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-blue-100 dark:border-blue-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Cloud-Nine Comfort Slippers</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Walk on air with these incredibly soft and stylish pastel slippers.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-blue-600 dark:text-blue-300">$49.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-green-300 dark:border-green-500 transform -rotate-6">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-100 dark:bg-green-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-blue-400 to-green-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-blue-500 hover:to-green-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-pink-200 dark:border-pink-600">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product3/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-pink-100 dark:border-pink-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Sunset Hues Scarf</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Wrap yourself in the warm, gentle colors of a sunset with this exquisite scarf.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-pink-600 dark:text-pink-300">$79.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-purple-300 dark:border-purple-500 transform rotate-3">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-100 dark:bg-purple-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-pink-400 to-purple-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-pink-500 hover:to-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

  </div>

</div>

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs simple et réactif pour le commerce électronique, avec un design skeuomorphique, une palette de couleurs triadique et une 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-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 p-8 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 border-4 border-gray-500 dark:border-gray-600">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-lg">2FA Required</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Please enter the verification code to proceed.</p>
    </div>

    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-red-500 dark:focus:border-red-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-green-500 dark:focus:border-green-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
    </div>

    <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-600 text-white rounded-lg shadow-lg font-bold text-lg hover:from-blue-600 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transform transition-all duration-200 active:scale-95 border-b-4 border-blue-700 dark:border-blue-900">
      Verify Code
    </button>

    <p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
      Didn't receive a code? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend</a>
    </p>
  </div>
</div>

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

Un composant d’alerte de délai d’expiration de session complexe et réactif avec un design minimaliste en niveaux de gris, adapté aux sites Web d’entreprise et incluant la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full divide-y divide-gray-200 dark:divide-gray-700">
    <div class="p-6">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4" id="modal-title">Your Session Will Expire Soon</h3>
      <p class="text-gray-700 dark:text-gray-300 text-lg mb-6">For your security, your session is about to expire due to inactivity. Please choose an option below to continue or log out.</p>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center mb-6">
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Time Remaining</p>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">01:45</p>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Last Activity</p>
          <p class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-1">5 minutes ago</p>
        </div>
      </div>

      <div class="space-y-4">
        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="flex items-center">
            <svg class="h-6 w-6 text-gray-500 dark:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
            <span class="text-gray-800 dark:text-gray-200 font-medium">Auto-renew session?</span>
          </div>
          <label for="toggle-auto-renew" class="flex items-center cursor-pointer">
            <div class="relative">
              <input type="checkbox" id="toggle-auto-renew" class="sr-only">
              <div class="block bg-gray-300 dark:bg-gray-600 w-10 h-6 rounded-full"></div>
              <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition dark:bg-gray-400"></div>
            </div>
          </label>
          <style>
            input:checked ~ .dot {
              transform: translateX(100%);
              background-color: #4CAF50; /* A touch of green for

Composant de l’infobulle du brutalisme

Composant d’infobulle de style brutalisme pour les médias sociaux, avec un schéma de couleurs en niveaux de gris et des éléments interactifs complexes. Il est réactif et prend en charge le mode sombre en utilisant Tailwind CSS, sans JavaScript.

Ouvrir Aperçu

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="group relative flex flex-col items-center">
    <!-- User Avatar (Trigger for Tooltip) -->
    <img class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 cursor-pointer object-cover" src="https://api.randomuser.me/portraits/men/32.jpg" alt="User Avatar">
    
    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-6 w-80 p-6 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 border-4 border-gray-700 dark:border-gray-300 transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:-translate-y-0 transition-all duration-300 ease-in-out pointer-events-none group-hover:pointer-events-auto shadow-[8px_8px_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_rgba(255,255,255,0.4)]">
      <h3 class="text-xl font-bold uppercase mb-2">User Profile</h3>
      <p class="text-sm border-b-2 border-gray-700 dark:border-gray-300 pb-2 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
      <div class="flex justify-between items-center text-sm mb-2">
        <span class="font-semibold">Followers:</span>
        <span>1.2M</span>
      </div>
      <div class="flex justify-between items-center text-sm mb-4">
        <span class="font-semibold">Following:</span>
        <span>345</span>
      </div>

      <div class="grid grid-cols-3 gap-2 mb-4">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social1/100/100" alt="Post 1">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social2/100/100" alt="Post 2">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social3/100/100" alt="Post 3">
      </div>

      <a href="#" class="block w-full py-2 text-center uppercase font-bold bg-gray-700 dark:bg-gray-300 text-gray-100 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-600 dark:hover:bg-gray-400 transition-colors duration-200">
        View Profile
      </a>
      
      <!-- Brutalist Arrow -->
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%-8px)] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[20px] border-t-gray-900 dark:border-t-gray-100 group-hover:translate-y-[calc(100%-12px)] transition-transform duration-300"></div>
    </div>
  </div>
</div>

Composant Colonnes

Un composant de colonne simple et réactif avec un thème monochrome sombre, adapté à la présentation de portfolios.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum1/400/300" alt="Project 1">
      <h3 class="text-xl font-semibold mb-2">Project One</h3>
      <p class="text-gray-400 text-sm">A brief description of project one, highlighting its key features and technologies used.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum2/400/300" alt="Project 2">
      <h3 class="text-xl font-semibold mb-2">Project Two</h3>
      <p class="text-gray-400 text-sm">Another project description, focusing on the impact and results of the work.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum3/400/300" alt="Project 3">
      <h3 class="text-xl font-semibold mb-2">Project Three</h3>
      <p class="text-gray-400 text-sm">Description for the third project, detailing the creative process and solutions.</p>
    </div>
  </div>
</div>

Volet Forum communautaire

Un composant de forum communautaire de style Neumorphism pour un portfolio, avec une palette de couleurs pastel et un design complexe et réactif avec prise en charge du thème sombre. Il comprend une liste de forums, l’activité récente et les profils d’utilisateurs, tous mis en œuvre à l’aide de Tailwind CSS sans JavaScript.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar: Forum Categories/List -->
    <div class="lg:col-span-1 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Forum Categories</h2>
      <ul>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-blue-400 mr-3"></span> General Discussion
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-green-400 mr-3"></span> Project Feedback
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-purple-400 mr-3"></span> Tech Talk
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-red-400 mr-3"></span> Off-Topic
          </a>
        </li>
      </ul>
    </div>

    <!-- Main Content: Forum Threads -->
    <div class="lg:col-span-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Recent Threads</h2>

      <!-- Thread Card 1 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-blue-300 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Help needed with Neumorphism shadows</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-blue-500 dark:text-blue-400">John Doe</span></span>
            <span>2 hours ago</span>
             <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                15
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 2 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-pink-300 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Ideas for a portfolio redesign?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-pink-500 dark:text-pink-400">Jane Smith</span></span>
            <span>5 hours ago</span>
            <span class="ml-auto flex items-center">
                 <svg class="w-4 h-4 mr-1 text-green-500" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                27
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 3 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-green-300 dark:border-green-500" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Best practices for responsive typography?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-green-500 dark:text-green-400">Alice Johnson</span></span>
            <span>Yesterday</span>
            <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                12
            </span>
          </div>
        </div>
      </div>

      <button class="w-full py-3 mt-4 rounded-lg bg-blue-400 dark:bg-blue-600 text-white font-semibold shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark transition duration-300">
        Load More Threads
      </button>
    </div>

  </div>
</div>

<style>
  /* Neumorphic Shadows - Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-flat-light {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-pressed-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphic Shadows - Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #4a4a4a, -8px -8px 15px #2c2c2c;
  }
  .dark .shadow-neumorphic-flat-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }

  /* Pastel Colors for Light Mode */
  .bg-gray-200 { background-color: #e0e5ec; } /* Light background */
  .bg-gray-300 { background-color: #dae0e8; } /* Slightly darker accent */
  .text-gray-700 { color: #5c6a7e; }
  .text-gray-600 { color: #7f8fa5; }
  .text-blue-400 { color: #87ceeb; } /* Sky Blue */
  .text-green-400 { color: #98fb98; } /* Pale Green */
  .text-purple-400 { color: #dda0dd; } /* Plum */
  .text-red-400 { color: #f08080; } /* Light Coral */
  .border-blue-300 { border-color: #a7d9f7; }
  .border-pink-300 { border-color: #f7a7d9; }
  .border-green-300 { border-color: #b3f7a7; }

  /* Pastel Colors for Dark Mode */
  .dark\:bg-gray-800 { background-color: #2c2c2c; }
  .dark\:bg-gray-700 { background-color: #3a3a3a; }
  .dark\:bg-gray-600 { background-color: #4a4a4a; }
  .dark\:text-gray-200 { color: #e0e0e0; }
  .dark\:text-gray-300 { color: #c0c0c0; }
  .dark\:text-gray-400 { color: #a0a0a0; }
  .dark\:text-gray-100 { color: #f0f0f0; }
  .dark\:text-blue-600 { color: #6495ed; } /* Cornflower Blue */
  .dark\:text-pink-600 { color: #ff69b4; } /* Hot Pink */
  .dark\:text-green-600 { color: #3cb371; } /* Medium Sea Green */
  .dark\:border-blue-500 { border-color: #4682b4; }
  .dark\:border-pink-500 { border-color: #c71585; }
  .dark\:border-green-500 { border-color: #2e8b57; }
  .dark\:focus\:ring-blue-500 { --tw-ring-color: #6495ed; }

</style>

<script>
  // You can toggle dark mode with a simple script if needed,
  // for example, by adding/removing the "dark" class to the root element.
  // This example assumes a mechanism for dark mode toggling is already in place or will be added externally.
</script>

Composant Cartes de produits

Fiches produits réactives avec effet verre dépoli Glassmorphism utilisant des couleurs pastel, avec prise en charge du mode sombre. Convient aux interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black items-center justify-center p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Product Card 1 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=1" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Pastel Dreams</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Embrace the soft hues and gentle vibes with this serene collection.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">John Doe</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-purple-700 dark:text-purple-300">$29.99</span>
        <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Whispering Lilacs</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Delicate and enchanting, perfect for a touch of elegance in your feed.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">Jane Smith</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-pink-700 dark:text-pink-300">$35.50</span>
        <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=3" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Misty Mornings</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Soft and inviting, ideal for sharing peaceful moments with your followers.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">Peter Jones</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-green-700 dark:text-green-300">$22.00</span>
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>
  </div>
</div>

Volet Forum communautaire

Un composant de forum communautaire minimaliste avec prise en charge du mode sombre. Ce composant est conçu pour les portfolios et présente une mise en page simple avec des couleurs de terre.

Ouvrir Aperçu

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-4 flex flex-col items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-200 mb-6 text-center">Community Forum</h1>

    <!-- New Post Section -->
    <div class="mb-6">
      <textarea class="w-full p-3 rounded-md bg-stone-50 dark:bg-stone-700 text-stone-700 dark:text-stone-300 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400" rows="3" placeholder="Write a new post..."></textarea>
      <div class="flex justify-end mt-2">
        <button class="px-4 py-2 bg-stone-600 text-white rounded-md hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500">Post</button>
      </div>
    </div>

    <!-- Forum Posts -->
    <div class="space-y-4">
      <!-- Post 1 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">2 hours ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">This is a great community! I just wanted to share my latest project. Feedback is welcome!</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>5 Likes</span>
          <span>3 Comments</span>
        </div>
      </div>

      <!-- Post 2 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Jane Smith</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">Yesterday</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Looking for collaborators on an exciting new open-source project. Anyone interested in web development?</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>12 Likes</span>
          <span>7 Comments</span>
        </div>
      </div>

      <!-- Post 3 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Peter Jones</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">3 days ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Just launched my new portfolio! Check it out and let me know what you think. [Link to portfolio]</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>8 Likes</span>
          <span>2 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs simple avec l’esthétique de Material Design, une palette de couleurs analogue et une prise en charge réactive du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div
      class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"
    ></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Two-Factor Authentication</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>Please enter the 6-digit code sent to your device.</p>
            <div class="relative">
              <input
                autocomplete="off"
                id="code"
                name="code"
                type="text"
                class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:outline-none focus:borer-rose-600"
                placeholder="XXXXXX"
                maxlength="6"
              />
              <label
                for="code"
                class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all"
                >Verification Code</label
              >
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400">Can't find your code? Check your spam folder.</p>
          </div>
          <div class="pt-6 text-base leading-6 space-y-4 sm:text-lg sm:leading-7">
            <button
              class="bg-cyan-500 dark:bg-cyan-600 text-white rounded-md px-6 py-2 hover:bg-cyan-600 dark:hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
            >
              Verify
            </button>
            <a href="#" class="ml-4 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
              >Resend Code</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 83 84 85 86 87 ... 282

Catégories

Tous les composants