Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Colonnes

Composant Columns réactif conçu pour les blogs ou la consommation de contenu. Il présente un design plat minimaliste avec une palette de couleurs analogue et un support de thème sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">Latest Articles</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 1</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 2</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 3</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=4" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 4</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=5" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 5</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=6" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 6</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
  </div>
</div>

Composants de navigation

Un composant de navigation réactif suivant les principes de Material Design avec une palette de couleurs triadique, destiné aux interfaces de médias sociaux, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-gray-100 dark:bg-gray-800 shadow-lg p-4 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Social Media</h1>
        </div>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Profile</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Messages</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Settings</a></li>
        </ul>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8">
            <div class="absolute right-0 w-2 h-2 bg-green-500 rounded-full ring-2 ring-white dark:ring-gray-800"></div>
        </div>
    </div>
</nav>

<div class="container mx-auto mt-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Feed</h2>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/201" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/202" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
    </div>
</div>

Un composant de panier d’achat de style Neumorphic pour le commerce électronique, doté d’une palette de couleurs monochromatiques, d’éléments interactifs riches et d’une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
    <h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">1</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">2</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
    </div>
    <div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
      <span class="text-gray-800 dark:text-white font-bold">Total:</span>
      <span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
    </div>
    <div class="mt-4 flex justify-center">
      <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
        Checkout
      </button>
    </div>
  </div>
</div>

Composant de navigation du fil d’Ariane

Un composant de navigation responsive breadcrumb conçu avec un style plat minimaliste, adapté aux blogs et à la consommation de contenu. Il comprend des éléments interactifs pour une navigation facile et prend en charge le mode sombre.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <ol class="list-none flex space-x-4">
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/" class="hover:text-blue-600 dark:hover:text-blue-300">Home</a>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <span>/</span>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/category" class="hover:text-blue-600 dark:hover:text-blue-300">Category</a>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <span>/</span>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/category/post" class="hover:text-blue-600 dark:hover:text-blue-300">Post Title</a>
    </li>
  </ol>
</nav>

<div class="mt-4 space-y-2">
  <div class="flex items-center space-x-2">
    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
    <span class="text-gray-800 dark:text-gray-200">Author Name</span>
  </div>
  <p class="text-gray-600 dark:text-gray-400">
    This is a brief description meant for content consumption. It should be concise and engaging.
  </p>
</div>

<div class="flex items-center mt-4">
  <img class="h-32 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Blog Post Image">
</div>

Présentation du portefeuille

Il s’agit d’un composant de mise en page réactif simple pour un portefeuille axé sur les micro-interactions avec des couleurs complémentaires, la prise en charge du mode sombre et un minimum d’éléments.

Ouvrir Aperçu

                <div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black">

  <!-- Header with microinteraction -->
  <header class="w-full px-4 py-3 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-between items-center border-b border-white border-opacity-20 transition duration-300 ease-in-out transform hover:scale-105">
    <h1 class="text-xl font-bold text-white">My Portfolio</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Home</a></li>
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Projects</a></li>
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main content area -->
  <main class="flex-grow container mx-auto px-4 py-8 text-white">
    <section class="text-center mb-12">
      <h2 class="text-4xl font-semibold mb-4">Welcome to my portfolio</h2>
      <p class="text-lg">Showcasing my work with a touch of interaction.</p>
    </section>

    <!-- Example Project Card with microinteraction -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project One</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project one.</p>
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project One" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
      <!-- Repeat for more project cards -->
        <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project Two</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project two.</p>
         <img src="https://picsum.photos/seed/project2/400/300" alt="Project Two" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
        <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project Three</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project three.</p>
         <img src="https://picsum.photos/seed/project3/400/300" alt="Project Three" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
    </div>

  </main>

  <!-- Footer -->
  <footer class="w-full px-4 py-6 text-center text-white text-opacity-80">
    <p>&copy; 2023 My Portfolio</p>
  </footer>

</div>

Composant Toast Notifications

Un composant Toast Notifications réactif avec un style Glassmorphism et une palette de couleurs vives, adapté aux applications de commerce électronique. Il prend en charge le thème sombre et possède une interface complexe avec plusieurs éléments interactifs.

Ouvrir Aperçu

                <div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
    <!-- Toast Notification -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="font-semibold text-vibrant-500 dark:text-vibrant-300">John Doe</p>
                <p class="text-gray-700 dark:text-gray-300">Your order has been shipped!</p>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
                &times;
            </button>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/400/200?random=1" alt="Product Image" class="w-full rounded-lg mb-2">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name</p>
            <p class="text-gray-600 dark:text-gray-400">Price: $29.99</p>
            <button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
                View Order
            </button>
        </div>
    </div>
</div>

<!-- Toast Notification (Alternate) -->
<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="font-semibold text-vibrant-500 dark:text-vibrant-300">Jane Smith</p>
                <p class="text-gray-700 dark:text-gray-300">You have a new message!</p>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
                &times;
            </button>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Check your inbox for more details.</p>
            <button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
                View Messages
            </button>
        </div>
    </div>
</div>

Composant de galerie de produits

Un composant de galerie de produits réactif conçu avec un style de neumorphisme et une palette de couleurs triadique, adapté à la présentation de travaux ou de produits, avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Product 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 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1012/300/200" alt="Product 1" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1013/300/200" alt="Product 2" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1014/300/200" alt="Product 3" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>    <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105">      <img src="https://picsum.photos/id/1015/300/200" alt="Product 4" class="rounded-lg mb-2">      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 4</h3>      <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p>      <div class="flex items-center mt-2">        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">        <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span>      </div>    </div>  </div></div>

Composant de fenêtre de chat

Un composant de fenêtre de chat simple conçu dans le style Material Design avec un thème sombre et une mise en page réactive adaptée aux interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="h-screen bg-gray-100 dark:bg-gray-800 flex flex-col justify-end">
    <div class="max-w-md w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4">
        <div class="flex flex-col space-y-4 overflow-y-scroll h-80">
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
                    Hello, how are you?
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-gray-300 text-gray-800 p-2 rounded-lg rounded-br-none">
                    I'm good, thanks! How about you?
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                <div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
                    I'm doing well! Ready for the weekend?
                </div>
            </div>
        </div>
        <div class="mt-4 flex">
            <input type="text" placeholder="Type your message..." class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-500">
            <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 focus:outline-none">Send</button>
        </div>
    </div>
</div>

Brutalisme Barre latérale Navigation

Un composant de navigation de barre latérale de style brutaliste avec des tons de terre, une complexité modérée, une réactivité et une prise en charge du mode sombre, conçu pour les sites de blogs/contenus utilisant Tailwind CSS.

Ouvrir Aperçu

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">
  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out">
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200">Navigation</h2>
      <!-- Mobile toggle (hidden on md and up) -->
      <button class="text-stone-800 dark:text-stone-200 md:hidden">
        <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 12h16M4 18h16"></path></svg>
      </button>
    </div>
    <nav class="text-stone-700 dark:text-stone-300">
      <ul class="space-y-4">
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Home</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Articles</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Categories</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">About</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Contact</a></li>
      </ul>
    </nav>
  </div>
  
  <!-- Content area -->
  <div class="flex-1 p-10 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-6">Main Content Area</h1>
    <p class="text-stone-700 dark:text-stone-300">
      This is the main content area. The sidebar is on the left.
    </p>
    <!-- Example content -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 1</h3>
        <img src="https://picsum.photos/seed/article1/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
       <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 2</h3>
         <img src="https://picsum.photos/seed/article2/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

Composant de conteneur neumorphe

Un composant de conteneur Neumorphic réactif pour présenter des travaux ou des produits, conçu avec une palette de couleurs triadique et la prise en charge du thème sombre, à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-gray-300 dark:bg-gray-900 shadow-neumorphic rounded-lg p-6 w-full max-w-md">
        <div class="flex flex-col items-center justify-center mb-4">
            <img src="https://picsum.photos/200/150" alt="Portfolio Item" class="rounded-lg mb-2 shadow-neumorphic">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Portfolio Item Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the portfolio item goes here. It showcases the work done and highlights key features.</p>
        </div>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-neumorphic">
            <span class="ml-2 text-gray-800 dark:text-gray-200">John Doe</span>
        </div>
        <div class="mt-4">
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline transition ease-in-out duration-200">View Details</a>
        </div>
    </div>
</div>

<style>
    .shadow-neumorphic {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3),
                    -8px -8px 15px rgba(255, 255, 255, 0.5);
    }
</style>

1 ... 126 127 128 129 130 ... 242

Catégories

Tous les composants

Composant Colonnes

Composants de navigation

Composant de panier d’achat

Composant de navigation du fil d’Ariane

Présentation du portefeuille

Composant Toast Notifications

Composant de galerie de produits

Composant de fenêtre de chat

Brutalisme Barre latérale Navigation

Composant de conteneur neumorphe