Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Social-Media-Glassmorphism-Navbar

Barre de navigation réactive Glassmorphism sur les réseaux sociaux avec mode sombre

                <nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg dark:from-gray-800 dark:via-gray-900 dark:to-black dark:bg-opacity-30 fixed w-full z-10">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">SocialApp</span>
    </a>
    <div class="flex md:order-2">
      <button type="button" data-collapse-toggle="navbar-search" aria-controls="navbar-search" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 me-1">
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
      </svg>
      <span class="sr-only">Search</span>
      </button>
      <div class="relative hidden md:block">
        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
          </svg>
          <span class="sr-only">Search icon</span>
        </div>
        <input type="text" id="search-navbar" class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-white bg-opacity-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search...">
      </div>
      <button data-collapse-toggle="navbar-search" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-search" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
        </svg>
    </button>
       <div class="flex items-center ml-4">
                <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            </div>
    </div>
    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-search">
      <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-white bg-opacity-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 dark:bg-opacity-30 md:dark:bg-transparent dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Profile</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Messages</a>
        </li>
           <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Notifications</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Composant CAPTCHA

Un composant CAPTCHA conçu selon les principes de Material Design et de Tailwind CSS, adapté aux sites Web de commerce électronique, avec prise en charge du thème sombre et conception réactive.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen py-6 bg-white dark:bg-gray-800">
    <div class="max-w-md w-full p-6 rounded-lg shadow-lg bg-gray-100 dark:bg-gray-900">
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">Verification</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Please complete the CAPTCHA to proceed.</p>
        <div class="grid grid-cols-2 gap-4 mt-6">
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
            <div class="flex items-center justify-center p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <img src="https://picsum.photos/100?random" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
            </div>
        </div>
        <div class="my-4">
            <label for="captcha-input" class="block text-gray-700 dark:text-gray-200">Type the characters you see</label>
            <input id="captcha-input" type="text" class="mt-2 block w-full p-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" />
        </div>
        <button class="w-full mt-4 text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 font-medium rounded-lg p-2 shadow transition duration-300">Verify</button>
    </div>
</div>

Composant de récipient Glassmorphism

Un composant de conteneur Glassmorphism réactif avec une palette de couleurs triadique, conçu pour les portefeuilles. Prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600">
  <div class="container mx-auto p-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Feature 1 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 1</h3>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Image 1" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>

      <!-- Feature 2 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 2</h3>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Image 2" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>

      <!-- Feature 3 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 3</h3>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Image 3" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>
      
      <!-- Add more features as needed -->

        <!-- Contact/Profile Section -->
        <div class="md:col-span-2 lg:col-span-3 backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg text-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-24 h-24 mx-auto mb-4">
            <h3 class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Your Name</h3>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Web Developer | Designer | Portfolio Owner</p>
            <div class="flex justify-center space-x-4">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-github"></i></a>
            </div>
        </div>

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

Un bouton de retour en haut minimaliste et plat qui s’intègre dans l’interface d’un tableau de bord. Le bouton est doté d’une palette de couleurs monochromatiques et comprend des effets de survol et de mise au point pour une meilleure interactivité. Il est également réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="fixed bottom-8 right-8">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-600 text-white shadow-lg transition-all ease-in-out duration-300 hover:bg-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700">
        <svg xmlns="http://www.w3.org/2000/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="M12 4v16m8-8H4" />
        </svg>
    </a>
</div>

Composant Galerie Rétro

Un composant de galerie réactif avec un style rétro/vintage, une palette de couleurs vives et une mise en page simple pour la consommation de blog/contenu, avec prise en charge du mode sombre. Utilise Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6">  <div class="container mx-auto">    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2>    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>    </div>  </div></div>

Composant de navigation 3D

Un composant de navigation 3D réactif conçu pour le commerce électronique, avec une palette de couleurs en niveaux de gris et la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-5 transition-transform transform hover:scale-105">
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <h1 class="text-gray-800 dark:text-white text-xl font-bold ml-3">Brand</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
    </div>
    <button class="md:hidden text-gray-800 dark:text-gray-200 p-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-600">
      <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 class="mt-4 md:hidden">
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
  </div>

  <div class="mt-5 flex">
    <input type="text" placeholder="Search..." class="flex-1 p-2 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 placeholder-gray-400 dark:placeholder-gray-500" />
    <button class="ml-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 p-2 rounded-lg shadow hover:shadow-lg transition duration-300">
      <img class="w-5 h-5" src="https://picsum.photos/seed/pic1/30/30" alt="Search Icon" />
    </button>
  </div>
</nav>

Composants d’amélioration de la navigation

Un composant d’amélioration de la navigation réactif pour un blog en mode sombre avec des couleurs vives et des fonctionnalités de complexité modérée.

Ouvrir Aperçu

                <nav class="bg-gray-900 text-white p-4 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-bold hover:text-blue-400">My Blog</a>
            <a href="#" class="hover:text-blue-400">Home</a>
            <a href="#" class="hover:text-blue-400">About</a>
            <a href="#" class="hover:text-blue-400">Contact</a>
        </div>
        <div class="relative">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white rounded-full pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
            <svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" 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="M21 21l-4.35-4.35"/>
                <circle cx="10.5" cy="10.5" r="6.5"/>
            </svg>
        </div>
    </div>
</nav>

<section class="bg-gray-800 text-white p-8 mt-4">
    <h2 class="text-2xl font-bold mb-4">Latest Articles</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=1" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 1</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=2" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 2</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=3" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 3</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
    </div>
</section>

<footer class="bg-gray-900 text-white p-4 mt-4">
    <div class="container mx-auto flex justify-between items-center">
        <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="user avatar" class="w-8 h-8 rounded-full" />
            <span class="text-sm">User Name</span>
        </div>
    </div>
</footer>

Composants d’amélioration de la navigation

Un composant de navigation conçu en 3D avec une palette de couleurs analogue, une complexité modérée, adapté à la visualisation des données de tableau de bord et aux panneaux de contrôle.

Ouvrir Aperçu

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
    <div class="container mx-auto flex items-center justify-between">
        <h1 class="text-white text-2xl font-bold">Dashboard</h1>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Home</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-300 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>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700 dark:border-gray-300 mr-3">
        <div class="text-white">
            <p class="text-sm">John Doe</p>
            <p class="text-xs text-gray-400">Admin</p>
        </div>
    </div>
    <div class="mt-4 bg-gray-700 dark:bg-gray-800 rounded-lg shadow-md p-4">
        <h2 class="text-white text-lg font-semibold">Quick Links</h2>
        <ul class="mt-2 space-y-2">
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Profile</a></li>
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Messages</a></li>
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Alerts</a></li>
        </ul>
    </div>
</nav>

Composant de navigation collante

Un composant de navigation autocollant de style brutaliste adapté aux interfaces de médias sociaux, doté d’un design audacieux et contrasté et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-blue-600 dark:bg-blue-900 fixed top-0 w-full z-30 p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <h1 class="text-white text-lg font-bold">Social Media</h1>
        </div>
        <ul class="flex space-x-8">
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Home</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Profile</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Messages</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Settings</a></li>
        </ul>
    </div>
</nav>

<header class="mt-16 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="container mx-auto">
        <h2 class="text-2xl text-gray-900 dark:text-white font-bold">Welcome to Our Network</h2>
        <p class="text-gray-700 dark:text-gray-300">Connect with friends and the world around you!</p>
    </div>
</header>

<main class="mt-4 p-4 container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a sample post content. It can be about anything interesting happening on the network.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Another sample post content with some engaging information for users.</p>
        </div>
    </div>
</main>

Fiche produit Skeuomorphic

Un composant de carte produit skeuomorphe pour un tableau de bord, stylisé en niveaux de gris, de complexité moyenne, réactif avec le mode sombre.

Ouvrir Aperçu

                <div class="max-w-xs mx-auto bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
  <div class="relative">
    <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product image">
    <div class="absolute top-0 right-0 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 m-2 rounded-md">New</div>
  </div>
  <div class="p-4">
    <h3 class="text-gray-900 dark:text-white font-bold text-xl mb-2">Product Name</h3>
    <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features and benefits.</p>
    <div class="flex items-center justify-between">
      <span class="text-gray-900 dark:text-white font-bold text-lg">$199.99</span>
      <button class="bg-gray-600 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-500 text-white dark:text-gray-900 font-bold py-2 px-4 rounded-md">Add to Cart</button>
    </div>
  </div>
</div>

1 ... 127 128 129 130 131 ... 242

Catégories

Tous les composants

Social-Media-Glassmorphism-Navbar

Composant CAPTCHA

Composant de récipient Glassmorphism

Retour en haut du bouton

Composant Galerie Rétro

Composant de navigation 3D

Composants d’amélioration de la navigation

Composants d’amélioration de la navigation

Composant de navigation collante

Fiche produit Skeuomorphic