Tous les composants

Composant Filtres

Un composant de filtres minimaliste et réactif pour le commerce électronique, avec prise en charge du thème sombre. Il comprend des catégories, une gamme de prix et un filtre de couleur.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold mb-4">Filter Products</h3>
  
  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Categories</h4>
    <ul class="space-y-2 text-sm">
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Electronics</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Apparel</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Home Goods</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Books</a></li>
    </ul>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Price Range</h4>
    <input type="range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
    <div class="flex justify-between text-sm mt-1">
      <span>$0</span>
      <span>$1000+</span>
    </div>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Color</h4>
    <div class="flex space-x-2">
      <span class="block w-6 h-6 rounded-full bg-black cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
      <span class="block w-6 h-6 rounded-full bg-white cursor-pointer border-2 border-gray-400 dark:border-gray-500"></span>
      <span class="block w-6 h-6 rounded-full bg-gray-500 cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
    </div>
  </div>

  <button class="w-full bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-300">
    Apply Filters
  </button>
</div>

Composant de colonnes pour un tableau de bord, présentant un design 3D avec des couleurs complémentaires. Il comprend trois colonnes réactives avec une mise en page simple, la prise en charge du mode sombre et utilise Tailwind CSS pour le style. Aucun JavaScript n’est inclus.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid gap-8 md:grid-cols-3">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Sales Overview</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Visualize your sales performance with key metrics.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Customer Insights</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Understand your customer base and their behavior.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Graph Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Product Performance</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Monitor the performance of your products.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Data Placeholder</p>
        </div>
      </div>
    </div>

  </div>
</div>

Composant de mise en page du tableau de bord

Une mise en page de tableau de bord réactive avec l’esthétique de Material Design, y compris une barre latérale, un en-tête et une zone de contenu principal. Il prend en charge le mode sombre et utilise des couleurs complémentaires pour un look équilibré. La complexité est modérée avec des fonctionnalités de type interactif réalisées uniquement avec des classes CSS et Tailwind.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">

    <!-- Sidebar -->
    <div class="w-full md:w-64 bg-white dark:bg-gray-800 shadow-lg md:shadow-none p-4 space-y-4 flex flex-col items-center md:items-start">
        <div class="text-2xl font-bold text-indigo-600 dark:text-orange-400">Dashboard</div>
        <nav class="space-y-2 w-full">
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-home"></i><span>Home</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-chart-line"></i><span>Analytics</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-cog"></i><span>Settings</span></a>
        </nav>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col">

        <!-- Header -->
        <header class="w-full bg-white dark:bg-gray-800 shadow-md p-4 flex justify-between items-center">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Overview</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-600 dark:text-gray-300 focus:outline-none"><i class="fas fa-bell"></i></button>
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-500 dark:border-orange-400">
            </div>
        </header>

        <!-- Content Grid -->
        <main class="flex-1 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Total Sales</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">$12,345</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">New Users</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">2,145</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week</p>
            </div>

            <!-- Card 3 (Image Card) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 flex flex-col transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Data Visualization</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2 flex-grow">A quick look at the latest data trends and insights.</p>
                <button class="mt-4 self-end px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-300">View Details</button>
            </div>

            <!-- Card 4 (Chart Placeholder) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 col-span-1 md:col-span-2 transform transition duration-300 hover:scale-105">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Sales Performance</h2>
                <div class="mt-4 h-48 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
                    <p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
                </div>
            </div>

        </main>
    </div>

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Composant Messages de réussite

Un composant de message de réussite simple avec une palette de couleurs pastel, des animations subtiles pour les micro-interactions et un design réactif avec prise en charge du thème sombre. Il est conçu pour qu’un portefeuille reconnaisse les actions de l’utilisateur.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 max-w-sm w-full transform transition-all duration-300 hover:scale-105 ease-in-out">
    <div class="flex flex-col items-center justify-center space-y-4">
      <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-700 transform transition-transform duration-500 ease-in-out scale-0 animate-scaleIn">
        <svg class="w-10 h-10 text-green-500 dark:text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Success!</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
        Your action was completed successfully. We appreciate your patience.
      </p>
      <button class="px-6 py-2 rounded-full bg-purple-200 dark:bg-purple-600 text-purple-800 dark:text-white font-semibold hover:bg-purple-300 dark:hover:bg-purple-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
        Continue
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes scaleIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
  }
</style>

Composant d’intégration de média

Un composant d’intégration multimédia réactif pour le commerce électronique avec un design minimaliste, des couleurs vives et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl my-10 dark:bg-gray-800">
    <div class="md:flex">
        <div class="md:flex-shrink-0">
            <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Product Name</div>
            <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Amazing Product Title</a>
            <p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the product, highlighting its key features and benefits. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
                <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Composant de plan du site

Un composant de sitemap réactif avec des micro-interactions, une palette de couleurs pastel et une prise en charge du thème sombre, adapté aux sites Web de commerce électronique. Il comprend un en-tête, une barre de recherche et plusieurs catégories avec des liens.

Ouvrir l’aperçu

                
<div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 min-h-screen p-8">
  <div class="container mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-300 hover:scale-[1.01]">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-white mb-8 text-center">Site Map</h1>

    <!-- Search Bar -->
    <div class="mb-8 relative">
      <input type="text" placeholder="Search sitemap..." class="w-full p-4 pl-12 rounded-full bg-purple-50 dark:bg-gray-700 text-gray-700 dark:text-white focus:outline-none focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-700 transition duration-300">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Category 1 -->
      <div class="bg-purple-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-purple-800 dark:text-purple-300 mb-4">Shop</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">All Products</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">New Arrivals</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">Best Sellers</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">On Sale</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">Gift Cards</a></li>
        </ul>
      </div>

      <!-- Category 2 -->
      <div class="bg-pink-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-pink-800 dark:text-pink-300 mb-4">My Account</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Dashboard</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Order History</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Wishlist</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Addresses</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Payment Methods</a></li>
        </ul>
      </div>

      <!-- Category 3 -->
      <div class="bg-blue-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-blue-800 dark:text-blue-300 mb-4">Customer Service</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Contact Us</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">FAQs</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Shipping & Returns</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Terms of Service</a></li>
        </ul>
      </div>

      <!-- Category 4 -->
      <div class="bg-green-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-green-800 dark:text-green-300 mb-4">About Us</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Our Story</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Careers</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Blog</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Press</a></li>
        </ul>
      </div>

      <!-- Category 5 -->
      <div class="bg-yellow-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-yellow-800 dark:text-yellow-300 mb-4">Connect</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Facebook</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Instagram</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Twitter</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Pinterest</a></li>
        </ul>
      </div>

      <!-- Category 6 - Example of more links if needed -->
      <div class="bg-red-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-red-800 dark:text-red-300 mb-4">Collaborations</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Partnerships</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Affiliate Program</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Wholesale Inquiries</a></li>
        </ul>
      </div>

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

Composant du menu Hamburger

Un composant réactif du menu Hamburger conçu dans le style brutalisme avec une palette de couleurs pastel. Convient pour un portfolio présentant des travaux ou des produits.

Ouvrir l’aperçu

                <nav class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <!-- Hamburger Icon -->
                <button id="menu-toggle" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-white" aria-expanded="false" aria-label="Main menu">
                    <span class="sr-only">Open main menu</span>
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
            <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
                </div>
                <div class="hidden sm:block">
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                        <a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Portfolio</a>
                        <a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
                        <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- Menu Items -->
<div id="menu" class="hidden sm:hidden bg-white dark:bg-gray-800">
    <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
        <a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Portfolio</a>
        <a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
        <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
</div>

<main class="p-6">
    <h1 class="text-center text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/200" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 1</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 1.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/201" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 2</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 2.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/202" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 3</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 3.</p>
            </div>
        </div>
    </div>
</main>

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs minimaliste conçu pour un portefeuille avec une palette de couleurs triadique. Il dispose d’une interface propre et interactive prenant en charge le mode sombre, construite à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 space-y-4">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-400">To enhance the security of your account, please enter the verification code sent to your email.</p>
        <div class="flex flex-col space-y-4">
            <input type="text" placeholder="Verification Code" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" />
            <div class="flex items-center justify-between">
                <button class="w-full bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-400 dark:hover:bg-yellow-500 text-white font-semibold rounded-md p-2 transition duration-200">Verify</button>
            </div>
            <div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
                <a href="#" class="hover:underline">Resend Code</a>
                <a href="#" class="hover:underline">Need Help?</a>
            </div>
        </div>
        <div class="flex flex-col items-center space-y-2">
            <img src="https://picsum.photos/50/50" alt="Random User" class="rounded-full border-2 border-gray-200 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-gray-300">Username: johndoe</span>
        </div>
    </div>
</div>

Composant de nuage de balises

Composant de nuage de balises complexe et réactif avec des micro-interactions, conçu pour un tableau de bord, à l’aide d’un schéma de couleurs en niveaux de gris. Prend en charge le mode sombre.

Ouvrir l’aperçu

                <div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-xl">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Tag Cloud</h2>
  <div class="flex flex-wrap gap-3">
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Technology</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Finance</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Healthcare</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Education</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Sports</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Science</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Art</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Travel</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Food</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
  </div>
</div>

Composant Visionneuse de fichiers

Un composant de visualisation de fichiers rétro/vintage conçu pour les applications de commerce électronique. Il dispose d’une palette de couleurs monochromatiques, d’un design réactif et de la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-2xl font-bold text-center mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Name</h3>
            <p class="text-gray-300 dark:text-gray-400">example_file.pdf</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Uploaded By</h3>
            <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">
                <p class="text-gray-300 dark:text-gray-400">John Doe</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Preview</h3>
            <img src="https://picsum.photos/200/100" alt="File Preview" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Actions</h3>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Download</button>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Delete</button>
        </div>
    </div>
</div>

Catégories

Composant Filtres

Composant Colonnes

Composant de mise en page du tableau de bord

Composant Messages de réussite

Composant d’intégration de média

Composant de plan du site

Composant du menu Hamburger

Composant d’authentification à deux facteurs

Composant de nuage de balises

Composant Visionneuse de fichiers