Tous les composants

Composant Composants de navigation

Une barre de navigation réactive avec prise en charge du mode sombre.

                <nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <img class="h-8 w-8" src="https://www.picsum.photos/id/237/200/300" alt="Workflow">
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
    </div>
  </div>
</nav>

Composant de la table des matières

Un composant de table des matières réactif stylisé avec Neumorphism à l’aide de Tailwind CSS, avec prise en charge du thème sombre et affichant des images et des avatars de remplacement.

Ouvrir l’aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-md space-y-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section1" class="text-lg text-gray-800 dark:text-gray-200">Section 1</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section2" class="text-lg text-gray-800 dark:text-gray-200">Section 2</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section3" class="text-lg text-gray-800 dark:text-gray-200">Section 3</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section4" class="text-lg text-gray-800 dark:text-gray-200">Section 4</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section5" class="text-lg text-gray-800 dark:text-gray-200">Section 5</a>
            </div>
        </li>
    </ul>
</div>

Composant Composants d’authentification

Un composant d’authentification réactif avec prise en charge du thème sombre, réalisé dans le style Skeuomorphism.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex flex-col justify-center">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-700 py-8 px-4 shadow-xl rounded-3xl sm:rounded-br-none sm:rounded-tl-none sm:px-10 border-t-4 border-b-4 border-gray-300 dark:border-gray-600">
      <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
        <svg class="mx-auto h-12 w-12 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
        </svg>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
          Sign in to your account
        </h2>
      </div>

      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Password">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:bg-gray-500 dark:border-gray-400">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring- offsetting-2 focus:ring-indigo-500 shadow-lg transform transition duration-300 ease-in-out hover:scale-105">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h1a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h1zm5-3a1 1 0 011 1v3a1 1 0 11-2 0V7a1 1 0 011-1z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign in
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Composant de comparaison de produits

Un composant réactif de comparaison de produits avec des éléments de conception de type 3D, la prise en charge du thème sombre et l’intégration d’images de remplacement pour la visualisation des produits et les avatars des utilisateurs à l’aide de picsum.photos et randomuser.me.

Ouvrir l’aperçu

                <div class="container mx-auto px-4 py-8">
  <div class="dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="flex flex-col md:flex-row">
      <!-- Product 1 -->
      <div class="flex-1 p-6 dark:border-gray-700 border-b md:border-b-0 md:border-r relative">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-20"></div>
        <div class="relative z-10">
          <h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product A</h3>
          <img src="https://picsum.photos/seed/producta/400/300" alt="Product A" class="mx-auto mb-6 rounded-md shadow-md">
          <ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
          </ul>
          <div class="mt-6 text-center">
            <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition duration-300">Learn More</button>
          </div>
        </div>
      </div>

      <!-- Product 2 -->
      <div class="flex-1 p-6 relative">
         <div class="absolute inset-0 bg-gradient-to-br from-green-500 to-teal-600 opacity-20"></div>
        <div class="relative z-10">
          <h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product B</h3>
          <img src="https://picsum.photos/seed/productb/400/300" alt="Product B" class="mx-auto mb-6 rounded-md shadow-md">
          <ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
            <li>Feature A</li>
            <li>Feature B</li>
            <li>Feature C</li>
          </ul>
           <div class="mt-6 text-center">
            <button class="bg-green-600 text-white px-6 py-2 rounded-full hover:bg-green-700 transition duration-300">Learn More</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Comparison Table (Optional addition for more detail) -->
     <div class="p-6 dark:bg-gray-700 bg-gray-100">
      <h4 class="text-lg font-semibold mb-4 dark:text-white text-gray-800">Detailed Comparison</h4>
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
        <thead>
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
          </tr>
        </thead>
        <tbody class="dark:bg-gray-800 bg-white divide-y divide-gray-200 dark:divide-gray-600">
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 1/A</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Maybe</td>
          </tr>
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 2/B</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Some</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
          </tr>
           <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 3/C</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">No</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
          </tr>
        </tbody>
      </table>
    </div>

     <!-- Avatars section -->
    <div class="p-6 flex justify-around items-center dark:bg-gray-700 bg-gray-100">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full shadow-md">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full shadow-md">
         <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full shadow-md">
    </div>

  </div>
</div>

Fiche produit e-commerce rétro

Une fiche produit e-commerce rétro/vintage avec un design réactif et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-800">
  <img class="w-full" src="https://picsum.photos/seed/retro1/400/300" alt="Retro product image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-900 dark:text-white">Retro Collectible</div>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      A truly unique retro item that brings back memories of a bygone era. Perfect for collectors and enthusiasts.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">#retro</span>
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">#vintage</span>
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">#collectible</span>
  </div>
  <div class="px-6 py-4 flex items-center justify-between">
    <span class="font-bold text-xl text-gray-900 dark:text-white">$19.99</span>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-600">
      Add to Cart
    </button>
  </div>
</div>

Barre de progression du neumorphisme

Composant de barre de progression avec conception Neumorphism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS

Ouvrir l’aperçu

                <!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
    </div>
  </div>
</div>

<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
  <div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
    </div>
  </div>
</div>

Composant de navigation

Un composant de navigation réactif conçu pour l’interface utilisateur en mode sombre, avec des liens, des listes déroulantes et un logo, le tout stylisé avec Tailwind CSS.

Ouvrir l’aperçu

                <nav class="bg-gray-800 p-4 fixed w-full">
    <div class="flex justify-between items-center">
        <div class="text-white text-lg font-bold">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/40" alt="Logo" class="mr-2 rounded-full">
                MyApp
            </a>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">About</a>
            <div class="relative">
                <button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded flex items-center">Services
                    <svg class="w-4 h-4 ml-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="M5 15l7-7 7 7"/>
                    </svg>
                </button>
                <div class="absolute left-0 hidden bg-gray-800 text-white mt-1 rounded shadow-md w-40">
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">Web Design</a>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">SEO</a>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">Marketing</a>
                </div>
            </div>
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded focus:outline-none">
                <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
</nav>

<div class="mt-16 p-4">
    <h1 class="text-3xl text-white">Welcome to MyApp</h1>
    <p class="text-gray-300">This is an example of a dark mode navigation component using Tailwind CSS.</p>
</div>

<style>
    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>

Composant de connexion sociale

Composant de connexion sociale avec conception de micro-interactions, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’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-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white">Sign in to your account</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512319/github-142.svg" alt="GitHub" class="w-5 h-5">
        <span>GitHub</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512100/google-177.svg" alt="Google" class="w-5 h-5">
        <span>Google</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512099/facebook-176.svg" alt="Facebook" class="w-5 h-5">
        <span>Facebook</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512107/twitter-153.svg" alt="Twitter" class="w-5 h-5">
        <span>Twitter</span>
      </button>
    </div>
    <div class="relative">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="bg-white px-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400">Or continue with</span>
      </div>
    </div>
    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500">
        </div>
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <div class="mt-1">
          <input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500">
        </div>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:checked:bg-indigo-600">
          <label for="remember-me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

Aller au composant de lien de contenu

Un composant Web qui fournit un lien « Passer au contenu » de style 3D avec des effets réactifs et la prise en charge du thème sombre, à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="relative group">
    <a href="#main-content" class="inline-block px-4 py-2 text-white bg-blue-500 rounded-full shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-2xl dark:bg-blue-700 dark:shadow-lg dark:hover:scale-110">
        Skip to Content
    </a>
    <div class="absolute left-0 translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
        <div class="bg-gray-800 dark:bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg">
            Skip past navigation and other elements to main content.
        </div>
    </div>
</div>

<div id="main-content" class="mt-10 bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is where the main content goes. You can add your text and images here.</p>
    <img src="https://picsum.photos/600/400" alt="Random placeholder" class="mt-4 rounded-lg shadow-md">
    <p class="mt-4 text-gray-700 dark:text-gray-300">You can use this space to illustrate the content being referred to by the 'Skip to Content' link.</p>
</div>

Composant Cartes

Un composant de cartes réactives de style neumorphisme, prenant en charge le thème sombre et présentant des images de remplacement.

Ouvrir l’aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Component</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-xl w-full md:w-96">
        <img src="https://picsum.photos/400/300" alt="Placeholder Map" class="rounded-lg w-full h-auto" />
    </div>
    <div class="flex mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-white dark:border-gray-800 shadow-md" />
        <div class="ml-3">
            <p class="text-sm text-gray-700 dark:text-gray-300">User Name</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Location</p>
        </div>
    </div>
</div>

Catégories