Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Glassmorphism Tabs

Un composant d’onglets réactifs avec le style glassmorphism, conçu pour les interfaces de médias sociaux. Il présente un effet de verre dépoli utilisant Tailwind CSS avec une palette de couleurs en niveaux de gris. La conception prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800">
    <div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-lg shadow-lg p-5 w-full max-w-md">
        <h2 class="text-white text-2xl font-semibold mb-4 text-center">Social Media Tabs</h2>
        <div class="flex justify-around mb-4">
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab1">Tab 1</button>
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab2">Tab 2</button>
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab3">Tab 3</button>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div id="content-tab1" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 1 Content</h3>
                <p>Welcome to Tab 1! This is where content for the first tab goes.</p>
                <img src="https://picsum.photos/200?random=1" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 1</span>
                </div>
            </div>
            <div id="content-tab2" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 2 Content</h3>
                <p>Welcome to Tab 2! This is where content for the second tab goes.</p>
                <img src="https://picsum.photos/200?random=2" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 2</span>
                </div>
            </div>
            <div id="content-tab3" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 3 Content</h3>
                <p>Welcome to Tab 3! This is where content for the third tab goes.</p>
                <img src="https://picsum.photos/200?random=3" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 3</span>
                </div>
            </div>
        </div>
    </div>
</div>

SkeuomorphismSuccessMessage

Message de réussite du skeuomorphisme pour le tableau de bord, complexe avec couleurs complémentaires et mode sombre

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-2xl w-full max-w-md border border-gray-200 dark:border-gray-700 relative overflow-hidden">
    <!-- Skeuomorphic header - subtle gradient and border -->
    <div class="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-green-400 to-green-500 dark:from-green-600 dark:to-green-700 rounded-t-lg border-b border-green-600 dark:border-green-800"></div>
    
    <!-- Content Area with subtle inner shadow -->
    <div class="relative z-10 pt-4">
      <div class="text-center mb-8">
        <!-- Skeuomorphic Icon - Embossed look -->
        <div class="mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-inner mb-4">
          <svg class="w-10 h-10 text-green-500 dark:text-green-300" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Success!</h2>
        <p class="text-gray-600 dark:text-gray-400">Your operation was completed successfully.</p>
      </div>

      <!-- Detail Section - Elevated and Grouped -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 shadow-md border border-gray-100 dark:border-gray-600">
        <div class="flex justify-between items-center mb-4">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Transaction ID:</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">#XYZ123456789</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Status:</span>
          <span class="text-sm text-green-600 dark:text-green-400 font-semibold">Completed</span>
        </div>
      </div>

      <!-- Action Buttons - Bevel effect -->
      <div class="flex flex-col space-y-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 ease-in-out border-b-4 border-blue-700 dark:border-blue-800 hover:translate-y-1 hover:shadow-xl">
          View Details
        </button>
        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 ease-in-out border-b-4 border-gray-500 dark:border-gray-600 hover:translate-y-1 hover:shadow-xl dark:bg-gray-600 dark:text-gray-200">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Mise en page RetroBlog

Une mise en page de blog simple et réactive avec une esthétique rétro/vintage, la prise en charge du mode sombre et une palette de couleurs complémentaire, construite avec Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-200 font-sans text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <header class="bg-blue-600 py-4 shadow-md dark:bg-blue-800">
    <div class="container mx-auto px-4">
      <h1 class="text-center text-3xl font-bold text-white">RetroBlog</h1>
    </div>
  </header>

  <main class="container mx-auto p-4">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
      <!-- Main Content Area -->
      <section class="md:col-span-2">
        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Blog Post Title</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 27, 2023</p>
          <img src="https://picsum.photos/seed/retro1/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </article>

        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Another Blog Post</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 26, 2023</p>
          <img src="https://picsum.photos/seed/retro2/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </article>
      </section>

      <!-- Sidebar -->
      <aside>
        <div class="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">About</h3>
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="mb-4 w-16 h-16 rounded-full mx-auto">
          <p class="text-gray-700 text-center dark:text-gray-300">A passionate writer sharing thoughts and ideas on various topics.</p>
        </div>

        <div class="mt-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">Categories</h3>
          <ul>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Technology</a></li>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Lifestyle</a></li>
            <li><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Travel</a></li>
          </ul>
        </div>
      </aside>
    </div>
  </main>

  <footer class="bg-gray-700 py-4 text-center text-white dark:bg-gray-900">
    <p>&copy; 2023 RetroBlog. All rights reserved.</p>
  </footer>
</div>

Formulaire de connexion minimaliste

Un formulaire de connexion minimaliste pour les sites e-commerce, avec prise en charge du responsive design et du mode sombre. Utilise un schéma de couleurs analogue. Pas de JavaScript.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-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">Login</h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none cursor-text focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none cursor-text focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600">
      </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 dark:text-indigo-500 dark:border-gray-600 dark:bg-gray-700 focus:ring-indigo-500">
          <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-500 dark:hover:text-indigo-400">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group 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-600">
          Sign in
        </button>
      </div>
    </form>
    <div class="text-sm text-center">
      <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Sign up</a></p>
    </div>
  </div>
</div>

Authentification à deux facteurs

Composant d’authentification à deux facteurs avec un design brutaliste, une palette de couleurs complémentaire et une complexité modérée pour les médias sociaux, réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-yellow-200 dark:bg-purple-800 p-6">
  <div class="bg-white dark:bg-gray-900 border-4 border-black dark:border-yellow-400 shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#darpurple-400] p-8 rounded-none max-w-sm w-full">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center font-mono">Verify Your Identity</h2>
    <p class="text-black dark:text-gray-300 mb-6 text-center font-sans">and enter the verification code sent to your phone number.</p>
    <div class="flex justify-center space-x-4 mb-6">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
      <input type="text" class="w-12 h-12 text-center text-xl border-4 border-black dark:border-yellow-400 bg-yellow-100 dark:bg-purple-700 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">
    </div>
    <button class="w-full bg-purple-500 dark:bg-yellow-400 text-white dark:text-black font-bold py-3 border-4 border-black dark:border-yellow-400 shadow-[5px_5px_0_0_#000] dark:shadow-[5px_5px_0_0_#darpurple-400] hover:bg-purple-600 dark:hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-yellow-300 font-mono">Verify</button>
    <p class="mt-4 text-center text-black dark:text-gray-300 font-sans">
      Didn't receive a code? <a href="#" class="text-purple-600 dark:text-yellow-400 hover:underline font-mono">Resend Code</a>
    </p>
  </div>
</div>

Composant de zone de recherche

Un composant de champ de recherche complexe conçu dans un style brutaliste avec une palette de couleurs pastel, adapté aux interfaces de médias sociaux. Le composant comprend des éléments interactifs tels que la saisie de recherche, des filtres et un bouton d’envoi, tous prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">Search</h2>
    <form class="flex flex-col space-y-4">
        <input type="text" placeholder="Search..." class="p-4 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition duration-200" />
        <div class="flex flex-wrap justify-between">  
            <select class="w-full md:w-auto p-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 focus:outline-none dark:bg-gray-700 dark:text-white">
                <option value="all">All</option>
                <option value="images">Images</option>
                <option value="videos">Videos</option>
                <option value="users">Users</option>
            </select>
            <button class="flex items-center justify-center w-full md:w-auto p-3 bg-pink-500 dark:bg-pink-700 text-white rounded-lg shadow hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-200">
                <svg class="w-5 h-5 mr-2" 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="M21 21l-6-6m2-4a9 9 0 10-6 0 9 9 0 006 0z" />
                </svg>
                Search
            </button>
        </div>
    </form>
    <div class="mt-6 bg-gray-100 dark:bg-gray-900 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
        <h3 class="text-gray-700 dark:text-white mb-2">Featured Users</h3>
        <div class="flex items-center space-x-3">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User1</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User2</span>
        </div>
        <div class="flex items-center space-x-3 mt-2">
            <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-gray-300 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-white">User3</span>
        </div>
    </div>
</div>

Composant de connexion sociale

Composant de connexion sociale réactif avec le style Glassmorphism, les couleurs vives et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative px-4 py-10 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg w-full max-w-md">
    <div class="mb-8 text-center">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300">Connect with your social media accounts</p>
    </div>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.846 17.01h-2.192v-5.535h2.192v5.535zm-1.098-6.814h-2.192V6.66h2.192v3.536zM12 2a10 10 0 0 1 10 10 9.93 9.93 0 0 1-.868 4.463l-4.406-4.406A2.99 2.99 0 0 0 12 8c-1.657 0-3 1.343-3 3v4H6V9h3V6h3v3h3v2h-3v6.01z"/>
        </svg>
        Sign in with Google
      </button>
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.675 0h-21.35C.595 0 0 .595 0 1.325v21.351C0 23.405.596 24 1.325 24h11.08C13.105 24 13.5 23.604 13.5 23.125V16.3h2.451l.368-2.848h-2.819l.001-1.404c0-.816.227-1.374 1.397-1.374h1.497V7.328c-.269-.036-1.13-.105-2.14-.105-2.114 0-3.564 1.29-3.564 3.659v1.998H8.39v2.848h2.407v6.822c-.7-.052-1.388-.181-2.045-.372H1.325C.595 22.675 0 22.08 0 21.35v-21.35C0 .595.596 0 1.325 0h21.35z"/>
        </svg>
        Sign in with Facebook
      </button>
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M23.954 4.569a8.005 8.005 0 0 1-2.277.623A4.006 4.006 0 0 0 23.622 2.34c-.843.5-1.786.879-2.775 1.08a4.006 4.006 0 0 0-6.81-.878 4.007 4.007 0 0 0-1.122 3.163A11.372 11.372 0 0 1 1.466 2.977a4.007 4.007 0 0 0 1.242 5.332 3.988 3.988 0 0 1-1.81-.5V9.22c0 1.958 1.395 3.598 3.243 3.97V13.42c-1.18.323-2.44.495-3.795.493-.542-.002-1.073-.032-1.594-.098S.945 13.785 0 13.89c1.832 1.16 4.002 1.855 6.33 1.84A11.372 11.372 0 0 1 0 14.55c1.923 2.196 4.551 3.702 7.588 3.814a11.372 11.372 0 0 1-6.29 1.84c-.405 0-.8-.025-1.194-.072C1.915 21.113 4.523 22 7.393 22 12.266 22 18 18.926 18 12.283c0-.1-.002-.198-.006-.296A8.006 8.006 0 0 0 23.954 4.57z"/>
        </svg>
        Sign in with Twitter
      </button>
    </div>
  </div>
</div>

Composant de zone de recherche

Un composant simple de champ de recherche de style rétro/vintage conçu pour un blog ou la consommation de contenu. Il utilise une palette de couleurs monochromatique et est réactif avec la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Search</h2>
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 border rounded-lg focus:outline-none focus:border-gray-500 dark:focus:border-gray-600" />
            <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                <button class="bg-blue-500 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3a8 8 0 11-8 8 8 8 0 018-8z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

Retro Vintage CAPTCHA pour les médias sociaux

Un composant CAPTCHA rétro-vintage pour les médias sociaux, avec des couleurs vives, une complexité modérée, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black p-6">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-xl max-w-sm w-full border-4 border-indigo-600 dark:border-indigo-400 transform rotate-1 skew-y-1">
    <h2 class="text-3xl font-bold mb-6 text-center text-gray-800 dark:text-white font-mono tracking-wider">Verify You Are Human</h2>
    
    <!-- CAPTCHA Image/Challenge Area -->
    <div class="relative mb-6">
      <img src="https://picsum.photos/400/150?random=1" alt="CAPTCHA Challenge" class="w-full h-40 object-cover rounded border-2 border-yellow-400 transform -rotate-2">
      <div class="absolute inset-0 bg-black opacity-25"></div>
      <div class="absolute inset-0 flex items-center justify-center text-white text-2xl font-bold font-mono">
        kS7p#aG9
      </div>
    </div>
    
    <!-- Input Field -->
    <div class="mb-6">
      <label for="captcha" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 font-mono">
        Enter the characters you see:
      </label>
      <input type="text" id="captcha" class="shadow appearance-none border-2 border-green-500 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-800 leading-tight focus:outline-none focus:ring-4 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-300 font-mono transform skew-x-2">
    </div>
    
    <!-- Reload and Audio Buttons -->
    <div class="flex justify-between mb-6">
      <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
        Reload
      </button>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
        Audio
      </button>
    </div>
    
    <!-- Submit Button -->
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded w-full focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 font-mono">
      Verify
    </button>
  </div>
</div>

Formulaire de connexion Skeuomorphic

Un formulaire de connexion réactif avec un design Skeuomorphism, une palette de couleurs monochromatique et une complexité modérée, conçu pour les plateformes de médias sociaux. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <form class="max-w-sm mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark">
  <div class="mb-6">
    <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
    <input type="email" id="email" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your email">
  </div>
  <div class="mb-6">
    <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
    <input type="password" id="password" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your password">
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transform transition duration-300 ease-in-out hover:scale-105" type="button">
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-500" href="#">
      Forgot Password?
    </a>
  </div>
  <div class="mt-6 text-center">
    <p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
    <div class="flex justify-center gap-4 mt-2">
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-google text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-facebook text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-twitter text-xl"></i>
      </button>
    </div>
  </div>
</form>

1 ... 109 110 111 112 113 ... 262

Catégories

Tous les composants