Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de portefeuille interactif

Un composant de portefeuille réactif avec des micro-interactions et une palette de couleurs pastel, prenant en charge le mode sombre avec Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=4" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=5" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=6" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About Me</h3>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Your Name</h4>
                <p class="text-gray-600 dark:text-gray-400">A short bio or description about yourself and your work.</p>
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 transition duration-300 ease-in-out">Contact Me</button>
</div>

Composant de navigation skeuomorphe

Un composant de navigation conçu avec un style skeuomorphe, avec une palette de couleurs complémentaires, adapté à un tableau de bord avec visualisation de données et panneaux de contrôle. Il comprend des éléments interactifs pour l’engagement des utilisateurs.

Ouvrir Aperçu

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

En-tête de tableau de bord complexe

Un composant d’en-tête complexe et réactif avec des éléments de conception 3D, une palette de couleurs de terre, conçu pour les tableaux de bord. Inclut la prise en charge du thème sombre à l’aide de Tailwind CSS et utilise picsum.photos et randomuser.me pour les images de démonstration/avatars.

Ouvrir Aperçu

                <header class="bg-gradient-to-br from-gray-700 via-gray-800 to-gray-900 text-white dark:from-gray-900 dark:via-gray-950 dark:to-black shadow-2xl">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <svg class="h-10 w-10 text-green-500 dark:text-green-400" 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="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm9 9b2 0 002-2v-2a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2h2z"></path></svg>
        </div>
        <div class="ml-3">
          <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500 dark:from-green-300 dark:to-blue-400">Dashboard</h1>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Overview</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Reports</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Analytics</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Settings</a>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 dark:focus:ring-offset-gray-900 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <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" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Analytics</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Settings</a>
    </div>
  </div>
</header>

Composant de panier d’achat

Un composant de panier d’achat simple et réactif imitant le design du monde réel avec des couleurs vives, adapté au commerce électronique.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Shopping Cart</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
    </ul>
    <div class="mt-6">
        <button class="w-full py-3 text-lg font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
            Checkout
        </button>
    </div>
</div>

VibrantGlassmorphismChart

Un composant simple de graphique Glassmorphism avec des couleurs vives, adapté aux blogs et aux sites de contenu. Le composant est réactif et inclut la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
  <div class="relative h-40">
    <canvas id="myChart"></canvas>
  </div>
  <div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
    <div class="text-center">
      <p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
      <p>$5,200</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
      <p>$6,100</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
      <p>$5,500</p>
    </div>
  </div>
</div>

Composant Galerie 3D

Un composant de galerie 3D réactif complexe conçu pour le commerce électronique, avec un thème sombre et une palette de couleurs complémentaire.

Ouvrir Aperçu

                <div class="max-w-7xl mx-auto p-6">
    <h2 class="text-3xl font-bold text-center mb-6 text-gray-900 dark:text-white">3D Gallery Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-blue-600 text-white text-sm px-2 py-1 rounded">New</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
                <button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-green-600 text-white text-sm px-2 py-1 rounded">Sale</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$39.99</span>
                <button class="bg-green-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-red-600 text-white text-sm px-2 py-1 rounded">Featured</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
                <button class="bg-red-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-red-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-purple-600 text-white text-sm px-2 py-1 rounded">Exclusive</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$59.99</span>
                <button class="bg-purple-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-purple-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 5 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-orange-600 text-white text-sm px-2 py-1 rounded">Popular</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$19.99</span>
                <button class="bg-orange-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-orange-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 6 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-teal-600 text-white text-sm px-2 py-1 rounded">Limited</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-teal-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-teal-700">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Composant Flux d’activités

Un composant de flux d’activité de style rétro/vintage conçu pour présenter des travaux ou des produits avec des couleurs à haute saturation, des éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center text-violet-600 dark:text-violet-300 mb-6">Activity Feed</h2>
    <div class="space-y-4">
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-violet-600 dark:border-violet-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Added a new project: <span class="text-violet-600 dark:text-violet-300">Awesome Website</span></p>
                <p class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-600 dark:border-green-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new image.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">1 day ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-600 dark:border-blue-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Emily Carter</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">3 days ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-600 dark:border-red-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Sarah Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">4 days ago</p>
            </div>
        </div>
    </div>
    <button class="mt-6 w-full py-2 px-4 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg shadow focus:outline-none transition duration-200 dark:bg-violet-300 dark:hover:bg-violet-200">Load More</button>
</div>

Composant Mentions de l’utilisateur

Un composant réactif de mentions d’utilisateurs stylisé avec Neumorphism et Earth tones pour les interfaces de réseau social, avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto py-8">
    <!-- Title -->
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h2>

    <!-- Mentions List -->
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-5">
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Mike Taylor</p>
                <p class="text-gray-500 dark:text-gray-400">@mike_taylor</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

Lecteur vidéo minimaliste

Composant de lecteur vidéo codé en HTML avec Tailwind CSS. Il a un design minimaliste utilisant une palette de couleurs en niveaux de gris, destiné à une utilisation sur le tableau de bord. Il s’agit d’un composant complexe avec plusieurs éléments interactifs et est entièrement réactif avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <!-- Video Area -->
    <div class="relative" style="padding-top: 56.25%;">
      <video controls class="absolute top-0 left-0 w-full h-full object-cover">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>

    <!-- Controls and Info Area -->
    <div class="p-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Video Title Goes Here</h3>
        <div class="flex items-center space-x-4">
          <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
            <svg class="h-6 w-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          </button>
          <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
            <svg class="h-6 w-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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4">
        <div class="bg-gray-700 dark:bg-gray-300 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>

      <!-- Play/Pause Button (example - actual video controls are built-in) -->
      <div class="flex justify-center">
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 px-6 py-2 rounded-full focus:outline-none">
          Play
        </button>
      </div>

      <!-- Additional Info/Metadata -->
      <div class="mt-6 text-gray-600 dark:text-gray-400 text-sm">
        <p>Views: 1.2M | Uploaded: 3 days ago</p>
      </div>
    </div>
  </div>
</div>

SkeuomorphismChartsComponent

Composant de graphiques skeuomorphes pour les médias sociaux avec des couleurs complémentaires

Ouvrir Aperçu

                <div class="p-6 bg-gradient-to-br from-gray-200 to-gray-300 rounded-lg shadow-xl dark:from-gray-700 dark:to-gray-800">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Activity Chart</h2>
  <div class="relative h-48">
    <canvas id="myChart" class="w-full h-full"></canvas>
    </div>
    <div class="flex justify-around mt-4 text-gray-600 dark:text-gray-300 text-sm">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
    </div>
    </div>

1 ... 120 121 122 123 124 ... 242

Catégories

Tous les composants