Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de la table des matières

Un composant de table des matières réactif pour les interfaces de médias sociaux, conçu avec une interface utilisateur en mode sombre utilisant des tons de terre et une mise en page simple. Il prend en charge le thème sombre en utilisant Tailwind CSS et est uniquement HTML sans JavaScript.

Ouvrir Aperçu

                <nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
  <h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
    <li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
    <li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
    <li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
    <li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
    <li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
    <li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
    <li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
  </ul>
</nav>

RetroDashboardComponent

Composant de tableau de bord rétro/vintage avec prise en charge du schéma en niveaux de gris et du mode sombre. Ce composant complexe comporte plusieurs éléments interactifs, un design réactif et utilise Tailwind CSS pour le style. Il convient pour un tableau de bord ou un panneau de contrôle.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8 font-mono">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-bold mb-8 text-center uppercase tracking-widest">
      <span class="text-gray-600 dark:text-gray-400">RetroDASH</span>
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
      <!-- Card 1: Sales Overview -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Sales Overview</h2>
        <div class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">$12,450</div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Total Sales This Month</p>
        <div class="h-24 bg-gray-100 dark:bg-gray-700 rounded mt-4"></div>
      </div>

      <!-- Card 2: User Activity -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">User Activity</h2>
        <div class="flex items-center justify-between mb-2">
          <span class="text-3xl font-extrabold text-green-600 dark:text-green-400">2,345</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">Active Users</span>
        </div>
        <ul class="space-y-2 mt-4">
          <li class="flex items-center text-gray-700 dark:text-gray-300">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>John Doe logged in</span>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Jane Smith viewed report</span>
          </li>
        </ul>
      </div>

      <!-- Card 3: Traffic Sources -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Traffic Sources</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
          <li class="flex justify-between items-center">
            <span>Direct</span>
            <span class="font-bold">40%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Referral</span>
            <span class="font-bold">30%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Organic Search</span>
            <span class="font-bold">20%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Social Media</span>
            <span class="font-bold">10%</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Main Data Visualization Area -->
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-8">
      <h2 class="text-2xl font-bold mb-4 text-gray-700 dark:text-gray-300">Revenue Trends</h2>
      <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500 dark:text-gray-400">
        <p class="text-lg">Graph/Chart Placeholder</p>
      </div>
    </div>

    <!-- Tabbed Interface -->
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
      <div class="border-b border-gray-300 dark:border-gray-600 mb-4">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
            Overview
          </button>
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 dark:text-blue-400 focus:outline-none">
            Analytics
          </button>
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
            Settings
          </button>
        </nav>
      </div>
      <div class="text-gray-700 dark:text-gray-300">
        <p>Detailed analytics content goes here. This is a placeholder for a complex data table or more interactive charts.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
          <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
            <h3 class="font-bold mb-2">Detailed Metric 1</h3>
            <p>Value: <span class="font-semibold">1,234</span></p>
          </div>
          <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
            <h3 class="font-bold mb-2">Detailed Metric 2</h3>
            <p>Value: <span class="font-semibold">56.78%</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant de menu Hamburger rétro

Composant de menu complexe de hamburger rétro / vintage avec une palette de couleurs analogue, un design réactif et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-gradient-to-br from-purple-800 via-pink-700 to-red-600 font-mono min-h-screen p-8">

  <!-- Retro Header -->
  <header class="flex justify-between items-center mb-12">
    <div class="text-white text-4xl font-bold tracking-wider">BYTE BLVD</div>
    <div class="md:hidden">
      <input type="checkbox" id="menu-toggle" class="hidden">
      <label for="menu-toggle" class="block cursor-pointer group">
        <div class="w-8 h-1 bg-white mb-1 transition-all duration-300 group-hover:bg-yellow-400"></div>
        <div class="w-8 h-1 bg-white mb-1 transition-all duration-300 group-hover:bg-yellow-400"></div>
        <div class="w-8 h-1 bg-white transition-all duration-300 group-hover:bg-yellow-400"></div>
      </label>
      
      <!-- Mobile Menu Overlay -->
      <div class="fixed inset-0 bg-black bg-opacity-75 z-50 transform -translate-x-full transition-transform duration-300 ease-in-out" id="mobile-menu">
        <div class="flex justify-end p-4">
          <label for="menu-toggle" class="text-white text-4xl cursor-pointer">&times;</label>
        </div>
        <nav class="flex flex-col items-center justify-center h-full space-y-8">
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Home</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Articles</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">About</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Contact</a>
        </nav>
      </div>
    </div>
    
    <!-- Desktop Navigation -->
    <nav class="hidden md:block">
      <ul class="flex space-x-8">
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Home</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Articles</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">About</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content Area -->
  <main class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Featured Article Card -->
    <div class="md:col-span-2 bg-purple-700 dark:bg-purple-900 rounded-lg shadow-lg overflow-hidden border-4 border-yellow-400 transform transition-transform duration-300 hover:scale-105">
      <img src="https://picsum.photos/800/400?random=1" alt="Featured Article" class="w-full h-64 object-cover">
      <div class="p-6">
        <h2 class="text-yellow-400 text-3xl font-bold mb-3">The Pixelated Past: A Dive into 8-bit Gaming</h2>
        <p class="text-white text-lg leading-relaxed">Explore the golden age of video games, from classic consoles to arcade masterpieces. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="mt-5 inline-block bg-yellow-400 text-purple-900 font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition-colors duration-300">Read More</a>
      </div>
    </div>

    <!-- Sidebar / Recent Posts -->
    <aside class="bg-pink-600 dark:bg-pink-800 rounded-lg shadow-lg p-6 border-4 border-yellow-400">
      <h3 class="text-yellow-400 text-2xl font-bold mb-6">Recent Transmissions</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Decoding Early Web Design</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">The Rise of Synthwave Music</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Vintage Tech Gadgets Revisited</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Analog Photography Revival</a></li>
      </ul>

      <div class="mt-8">
        <h3 class="text-yellow-400 text-2xl font-bold mb-4">Retro Subscribers</h3>
        <div class="flex -space-x-2 overflow-hidden">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/men/82.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/women/62.jpg" alt="retro avatar">
        </div>
      </div>
    </aside>
  </main>

  <!-- Footer -->
  <footer class="mt-12 text-center text-white text-opacity-80">
    <p>&copy; 2023 BYTE BLVD. All rights reserved. Relive the glory days!</p>
  </footer>

  <style>
    /* Custom CSS for Hamburger Menu Animation */
    #menu-toggle:checked + label div:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
    }
    #menu-toggle:checked + label div:nth-child(2) {
      opacity: 0;
    }
    #menu-toggle:checked + label div:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
    }
    #menu-toggle:checked ~ #mobile-menu {
      transform: translateX(0%);
    }
  </style>
</div>

Composant de connexion sociale

Un composant de social login de style Glassmorphism en niveaux de gris, avec prise en charge du mode sombre, adapté aux sites e-commerce. Le design est réactif et comprend des effets de verre dépoli et de flou. Aucun JavaScript n’est inclus.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-8 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-5xl border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 mx-4">
    <div class="absolute inset-0 rounded-2xl pointer-events-none" style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8">Sign in to unlock exclusive shopping features.</p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google icon" class="h-6 w-6 mr-3">
          Sign in with Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png" alt="Facebook icon" class="h-6 w-6 mr-3">
          Sign in with Facebook
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.png" alt="Twitter icon" class="h-6 w-6 mr-3">
          Sign in with Twitter
        </button>
      </div>

      <div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-gray-800 dark:text-white font-medium hover:underline">Sign up</a></p>
      </div>
    </div>
  </div>
</div>

Composant Boutons de partage social

Un composant simple, réactif, en 3D en niveaux de gris pour les tableaux de bord avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
    <!-- Facebook -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
    </a>
    
    <!-- Twitter -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
    </a>
    
    <!-- LinkedIn -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
    </a>
    
    <!-- Instagram -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
    </a>
  </div>
</div>

Composant d’intégration multimédia - Tons de terre minimalistes

Un composant multimédia minimaliste pour les tableaux de bord, avec un design réactif et une prise en charge du thème sombre, en utilisant des tons de terre. Il affiche un lecteur vidéo, un titre, une description et des informations sur la chaîne.

Ouvrir Aperçu

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="aspect-w-16 aspect-h-9 mb-4">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="rounded-lg"></iframe>
  </div>
  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Engaging Data Visualization Techniques</h3>
  <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore innovative ways to present complex data for better insights and decision-making.</p>
  <div class="flex items-center">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Channel Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-green-500">
    <span class="text-gray-700 dark:text-gray-300 text-sm">Data Insights Pro</span>
  </div>
</div>

Composant Cartes de produits

Un composant de carte produit réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, adapté à un tableau de bord. La conception comprend des espaces réservés pour les images et les détails du produit.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8">
    Retro Product Dashboard
  </h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Synthwave Mixer</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A classic piece of audio equipment, perfect for capturing that 80s vibe.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$299.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=2" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Neon Arcade Joystick</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the glory days of arcade gaming with this vibrant joystick.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$49.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=3" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Classic Cassette Player</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Enjoy your favorite mixtapes with this retro-inspired portable player.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=4" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Gaming Console</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blast from the past, featuring iconic games and a nostalgic design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$149.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=5" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Retro Boombox Speaker</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Powerful sound with a retro aesthetic, perfect for any party.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$129.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=6" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Pixel Art Smartwatch</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blend of modern tech and retro pixel art design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Cartes thermiques

Un composant de carte thermique 3D réactif avec des couleurs complémentaires, adapté à la consommation de blogs et de contenus, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Monthly Activity Heatmap</h2>
  <div class="grid grid-cols-7 gap-1 ">
    <!-- Days of the week -->
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sun</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Mon</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Tue</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Wed</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Thu</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Fri</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sat</div>

    <!-- Heatmap cells (example for 4 weeks) -->
    {[...Array(28)].map((_, i) => (
      `<div key={i} class="relative w-8 h-8 md:w-10 md:h-10 transform perspective-1000 -rotate-x-15 rotate-y-15 p-1">
        <div class="absolute inset-0 rounded-md shadow-lg transition-all duration-300 transform
          ${i % 7 === 0 ? "bg-red-500 dark:bg-red-700" : ""}
          ${i % 7 === 1 ? "bg-red-600 dark:bg-red-800" : ""}
          ${i % 7 === 2 ? "bg-orange-500 dark:bg-orange-700" : ""}
          ${i % 7 === 3 ? "bg-orange-600 dark:bg-orange-800" : ""}
          ${i % 7 === 4 ? "bg-red-700 dark:bg-red-900" : ""}
          ${i % 7 === 5 ? "bg-red-800 dark:bg-red-950" : ""}
          ${i % 7 === 6 ? "bg-orange-700 dark:bg-orange-900" : ""}
          hover:scale-110 hover:rotate-x-0 hover:rotate-y-0
          group-hover:opacity-75
          flex items-center justify-center
          text-white text-xs font-bold
          ">
          ${i + 1}
        </div>
      </div>`
    )).join("")}
  </div>
  <div class="mt-4 flex justify-between text-gray-600 dark:text-gray-400">
    <span>Less</span>
    <div class="flex space-x-1">
      <div class="w-4 h-4 bg-red-400 dark:bg-red-600 rounded"></div>
      <div class="w-4 h-4 bg-red-500 dark:bg-red-700 rounded"></div>
      <div class="w-4 h-4 bg-red-600 dark:bg-red-800 rounded"></div>
      <div class="w-4 h-4 bg-red-700 dark:bg-red-900 rounded"></div>
      <div class="w-4 h-4 bg-red-800 dark:bg-red-950 rounded"></div>
    </div>
    <span>More</span>
  </div>
</div>

Composant d’affichage des prix

Composant d’affichage des prix avec un design réactif, la prise en charge du mode sombre et une palette de couleurs vives.

Ouvrir Aperçu

                <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="px-6 py-8">
      <h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
      <div class="flex justify-center items-baseline mb-8">
        <span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
        <span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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>
          <span class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
        </li>
      </ul>
      <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
        Get Started
      </button>
    </div>
  </div>
</div>

Composant Nuage de balises (mode sombre, pastel)

Un composant de nuage de balises réactif avec prise en charge du mode sombre, utilisant des couleurs pastel. Convient pour un portefeuille.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center mb-8 dark:text-purple-200">Skills & Interests</h2>
    <div class="flex flex-wrap justify-center gap-4">
      <span class="bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition duration-300">
        Web Development
      </span>
      <span class="bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-pink-300 dark:hover:bg-pink-600 transition duration-300">
        UI/UX Design
      </span>
      <span class="bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-blue-300 dark:hover:bg-blue-600 transition duration-300">
        Data Science
      </span>
      <span class="bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-green-300 dark:hover:bg-green-600 transition duration-300">
        Machine Learning
      </span>
      <span class="bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-yellow-300 dark:hover:bg-yellow-600 transition duration-300">
        Photography
      </span>
      <span class="bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-indigo-300 dark:hover:bg-indigo-600 transition duration-300">
        Gardening
      </span>
      <span class="bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-red-300 dark:hover:bg-red-600 transition duration-300">
        Travel
      </span>
      <span class="bg-teal-200 text-teal-800 dark:bg-teal-700 dark:text-teal-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-teal-300 dark:hover:bg-teal-600 transition duration-300">
        Cooking
      </span>
      <span class="bg-orange-200 text-orange-800 dark:bg-orange-700 dark:text-orange-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-orange-300 dark:hover:bg-orange-600 transition duration-300">
        Reading
      </span>
    </div>
  </div>
</div>

1 ... 80 81 82 83 84 ... 282

Catégories

Tous les composants