Tous les composants

Composant Toast Notifications

Un composant Toast Notifications conçu avec le style Glassmorphism, avec des effets réactifs et la prise en charge des thèmes sombres. Il utilise Tailwind CSS pour le style, ainsi que des images de remplacement de picsum.photos pour les visuels et randomuser.me pour les avatars.

Ouvrir l’aperçu

                <div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

Composant Profils utilisateur

Composant de profils d’utilisateur avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex flex-wrap items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">

  <!-- User Profile Card -->
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 neumorphism-light dark:neumorphism-dark">
    <div class="flex justify-center">
      <img class="w-32 h-32 rounded-full shadow-md border-4 border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/women/79.jpg" alt="Profile Picture">
    </div>
    <div class="mt-5 text-center">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
      <p class="text-gray-600 dark:text-gray-400 mt-1">Software Engineer</p>
      <p class="text-gray-500 dark:text-gray-500 text-sm mt-2">Passionate about creating beautiful and functional web applications.</p>
    </div>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 mx-3">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="text-blue-700 hover:text-blue-900 dark:text-blue-600 dark:hover:text-blue-800 mx-3">
        <i class="fab fa-linkedin-in"></i>
      </a>
      <a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 mx-3">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>

  <!-- Another User Profile Card -->
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 neumorphism-light dark:neumorphism-dark">
    <div class="flex justify-center">
      <img class="w-32 h-32 rounded-full shadow-md border-4 border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/80.jpg" alt="Profile Picture">
    </div>
    <div class="mt-5 text-center">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Smith</h2>
      <p class="text-gray-600 dark:text-gray-400 mt-1">UX Designer</p>
      <p class="text-gray-500 dark:text-gray-500 text-sm mt-2">Focused on creating intuitive and enjoyable user experiences.</p>
    </div>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 mx-3">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="text-blue-700 hover:text-blue-900 dark:text-blue-600 dark:hover:text-blue-800 mx-3">
        <i class="fab fa-linkedin-in"></i>
      </a>
      <a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 mx-3">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>

  <!-- Add more profile cards as needed -->

</div>

<style>
.neumorphism-light {
  box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}

.dark .neumorphism-dark {
  box-shadow: 7px 7px 15px #1c1c1c, -7px -7px 15px #2e2e2e;
}
</style>

Composant de lecteur audio

Un composant de lecteur audio réactif conçu dans le style Glassmorphism, avec un aspect semblable à du verre dépoli et la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
        <img src="https://picsum.photos/200/100" alt="Album Art" class="rounded-lg mb-4">
        <div class="flex flex-col items-center">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
        </div>
        <div class="w-full my-4">
            <input type="range" class="w-full h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50">
        </div>
        <div class="flex justify-between">
            <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Play</button>
            <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Stop</button>
        </div>
    </div>
</div>

Composant Cartes

Un composant de cartes réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
    <div class="max-w-6xl w-full mx-auto sm:px-6 lg:px-8">
        <div class="mt-8 overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 items-center bg-white dark:bg-gray-800 overflow-hidden shadow transform transition-all duration-300 perspective-1000">
                <div class="p-6">
                    <div class="flex items-center">
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500 dark:text-gray-400"><path d="M12 12l-2 10l-4 -14l9 -4 4 10L20 12 12 12z"></path></svg>
                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="#" class="underline text-gray-900 dark:text-white">Interactive Map</a></div>
                    </div>

                    <div class="ml-12">
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            Explore locations with our interactive 3D map. Discover new places and get directions easily.
                        </div>
                    </div>
                </div>

                <div class="relative w-full h-64 md:h-auto" style="transform: translateZ(20px);">
                     <img src="https://picsum.photos/seed/map-placeholder/600/400" alt="Map Placeholder" class="absolute inset-0 w-full h-full object-cover">
                </div>
            </div>
        </div>
    </div>
</div>

Composant d’intégration de média

Un composant d’intégration multimédia réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="relative isolate overflow-hidden bg-gradient-to-br from-gray-900 to-black py-16 sm:py-24 lg:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Interactive Media</h2>
      <p class="mt-6 text-lg leading-8 text-gray-300">Experience media in a new dimension with our captivating 3D design.</p>
    </div>
    <div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-14 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media1/500/300" alt="Placeholder image for media content 1" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
            <div class="flex items-center gap-x-4">
                <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
                <div class="text-sm leading-6">
                  <p class="font-semibold text-gray-300">
                    <a href="#">
                      <span class="absolute inset-0"></span>
                      John Doe
                    </a>
                  </p>
                  <p class="text-gray-400">Co-Founder / CTO</p>
                </div>
              </div>
          </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            Exploring the Depths
          </a>
        </h3>
      </article>

      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media2/500/300" alt="Placeholder image for media content 2" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
              <div class="flex items-center gap-x-4">
                  <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
                  <div class="text-sm leading-6">
                    <p class="font-semibold text-gray-300">
                      <a href="#">
                        <span class="absolute inset-0"></span>
                        Jane Smith
                      </a>
                    </p>
                    <p class="text-gray-400">Lead Designer</p>
                  </div>
                </div>
            </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            The Future of Interaction
          </a>
        </h3>
      </article>

      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media3/500/300" alt="Placeholder image for media content 3" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
              <div class="flex items-center gap-x-4">
                  <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
                  <div class="text-sm leading-6">
                    <p class="font-semibold text-gray-300">
                      <a href="#">
                        <span class="absolute inset-0"></span>
                        Peter Jones
                      </a>
                    </p>
                    <p class="text-gray-400">Marketing Manager</p>
                  </div>
                </div>
            </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            Bringing Ideas to Life
          </a>
        </h3>
      </article>
    </div>
  </div>
</div>

Composant d’affichage du contenu

Un composant d’affichage nostalgique au design rétro, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="max-w-xs mx-auto bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:border-gray-700">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Nostalgic Image">
    <div class="p-4">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
            <div class="ml-3">
                <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Retro Nostalgia</h2>
                <p class="text-gray-600 dark:text-gray-400">Explore the vibrant designs of the 80s and 90s that inspired our modern aesthetics.</p>
            </div>
        </div>
        <div class="mt-4">
            <h3 class="text-md font-semibold text-gray-700 dark:text-gray-300">Join the Movement</h3>
            <p class="text-gray-500 dark:text-gray-400">Be part of our journey as we explore retro designs, culture, and style.
            </p>
        </div>
        <div class="flex justify-between mt-4">
            <span class="text-gray-600 dark:text-gray-400">#Retro #Vintage</span>
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Learn More</button>
        </div>
    </div>
</div>

Composant de méga menu minimaliste

Composant de méga menu minimaliste avec effets réactifs et prise en charge du thème sombre, pas de JavaScript.

Ouvrir l’aperçu

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex justify-between items-center">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Logo</a>
      <div class="hidden lg:flex lg:items-center">
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Home</a>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Products</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 3</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Services</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 3</a>
          </div>
        </div>
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Contact</a>
      </div>
      <button class="lg:hidden text-gray-800 dark:text-white focus:outline-none">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
    <div class="lg:hidden mt-3">
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Home</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Products</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Services</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Contact</a>
    </div>
  </div>
</nav>

Composant d’authentification à deux facteurs

Composant d’authentification à deux facteurs rétro/vintage avec design réactif et prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-200 via-gray-400 to-gray-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
    <div class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-gray-500 rounded-lg pointer-events-none"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-6 font-mono">Authenticate</h2>
      <div class="space-y-6">
        <div>
          <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-mono">Enter 2FA Code</label>
          <div class="mt-1">
            <input type="text" name="code" id="code" class="block w-full px-4 py-3 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:focus:border-indigo-600 dark:focus:ring-indigo-600 font-mono tracking-widest" placeholder="••••••">
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:focus:ring-indigo-600 font-mono">
            Verify Code
          </button>
        </div>
      </div>
      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
          Need help? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Resend Code</a>
        </p>
      </div>
    </div>
  </div>
</div>

Visionneuse rétro à 360°

Composant de visionneuse rétro à 360 ° avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise des images de substitution de picsum.photos.

Ouvrir l’aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg">
  <div class="relative" style="padding-top: 56.25%;">
    <img src="https://picsum.photos/600/400" alt="360 degree view" class="absolute top-0 left-0 w-full h-full object-cover rounded-lg">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-2 px-4 rounded-full text-sm font-bold">
        Retro 360° Viewer
      </div>
    </div>
  </div>
  <div class="flex justify-center space-x-4 mt-4">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
      &lt; Previous
    </button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
      Next &gt;
    </button>
  </div>
</div>

Composants d’authentification

Un composant d’authentification minimaliste comprenant un formulaire de connexion et d’inscription avec prise en charge du thème sombre, un design réactif et des images de remplacement.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 w-full max-w-sm">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please login to your account</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-150">Login</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a></p>
    </div>
 </div>

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 w-full max-w-sm mt-8">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Create Account</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="username">Username</label>
                <input type="text" id="username" name="username" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-150">Sign Up</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login</a></p>
    </div>
</div>

Catégories