Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Aller au lien de contenu

Un composant de lien minimaliste pour le commerce électronique, avec des couleurs vives, un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-pink-500 focus:text-white focus:p-3 focus:rounded-lg focus:z-50 dark:focus:bg-purple-700 dark:focus:text-yellow-300">Skip to main content</a>

Composant Composants de navigation

Un composant de navigation rétro-vintage pour un tableau de bord, avec une mise en page complexe avec des couleurs complémentaires, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un logo, des liens de navigation, une barre de recherche et des informations de profil utilisateur.

Ouvrir Aperçu

                <nav class="bg-gradient-to-r from-purple-800 to-indigo-800 dark:from-gray-900 dark:to-gray-700 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="text-white text-3xl font-bold font-mono tracking-wider">RETRO-DASH</a>
      <div class="hidden md:flex space-x-6 ml-8">
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
      </div>
    </div>

    <div class="flex items-center space-x-6 mt-4 md:mt-0">
      <div class="relative">
        <input type="text" placeholder="Search..." class="bg-purple-700 dark:bg-gray-800 text-white placeholder-purple-300 dark:placeholder-gray-500 rounded-full py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-gray-600 transition duration-300 ease-in-out w-48 md:w-64">
        <svg class="w-5 h-5 text-purple-300 dark:text-gray-500 absolute right-3 top-2.5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>

      <div class="relative group">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-gray-600 cursor-pointer">
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 hidden group-hover:block transition duration-300 ease-in-out z-10">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Settings</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Logout</a>
        </div>
      </div>

      <button class="md:hidden text-white focus:outline-none">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <div class="w-full md:hidden mt-4">
      <div class="flex flex-col space-y-2">
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
      </div>
    </div>
  </div>
</nav>

Composant de flux d’activité

Composant de flux d’activité brutaliste pour les sites Web d’entreprise/d’entreprise avec une palette de couleurs analogue, une complexité modérée, une conception réactive et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#4a5568] p-6 space-y-6">
    <h1 class="text-3xl md:text-4xl font-extrabold text-black dark:text-gray-100 uppercase border-b-4 border-black dark:border-gray-700 pb-2 mb-6">
      Activity Feed
    </h1>

    <!-- Activity Item 1 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-yellow-100 dark:bg-yellow-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">John Doe</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">created a new <span class="text-red-700 dark:text-red-400 font-semibold">project proposal</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">2 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 2 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-pink-100 dark:bg-pink-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Jane Smith</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">updated <span class="text-blue-700 dark:text-blue-400 font-semibold">marketing strategy document</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">5 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 3 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-green-100 dark:bg-green-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Michael Brown</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">completed <span class="text-purple-700 dark:text-purple-400 font-semibold">Q3 financial report</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 day ago</p>
      </div>
    </div>

    <!-- Activity Item 4 - With an image -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-orange-100 dark:bg-orange-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Sarah Davis</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">uploaded new images to <span class="text-teal-700 dark:text-teal-400 font-semibold">product showcase</span>:</p>
        <div class="mt-2 grid grid-cols-2 gap-2">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/237/200/150" alt="Product Image 1">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/238/200/150" alt="Product Image 2">
        </div>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">3 days ago</p>
      </div>
    </div>

    <!-- Activity Item 5 - Complex with multiple actions -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-purple-100 dark:bg-purple-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">David Wilson</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">reviewed <span class="text-indigo-700 dark:text-indigo-400 font-semibold">client feedback report</span> and left 3 comments:</p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-400 text-sm mt-2 space-y-1">
          <li>"Consider revising section 3.1 for clarity."</li>
          <li>"Great work on the data analysis!"</li>
          <li>"Meeting scheduled to discuss next steps."</li>
        </ul>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 week ago</p>
      </div>
    </div>

  </div>
</div>

Composant Tableaux de données

Glassmorphism Data Tables Composant aux couleurs vives pour le portefeuille, réactif avec prise en charge du mode sombre. Pas besoin de JavaScript, seulement du HTML avec Tailwind CSS.

Ouvrir Aperçu

                <div class="H-screen w-full bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 p-8 dark:from-gray-900 dark:via-gray-800 dark:to-black">
  <div class="mx-auto max-w-4xl rounded-lg bg-white bg-opacity-10 p-8 shadow-lg backdrop-blur-lg dark:bg-gray-700 dark:bg-opacity-20">
    <h2 class="mb-6 text-center text-4xl font-bold text-white drop-shadow-lg dark:text-gray-200">My Projects</h2>
    <div class="overflow-x-auto">
      <table class="min-w-full rounded-lg bg-white bg-opacity-5 text-left text-sm text-white shadow-md backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-5">
        <thead>
          <tr class="bg-gray-700 bg-opacity-20 text-gray-200 dark:bg-gray-900 dark:bg-opacity-30">
            <th class="px-6 py-3">Project Name</th>
            <th class="px-6 py-3">Category</th>
            <th class="px-6 py-3">Status</th>
            <th class="px-6 py-3">Preview</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Vibrant Dash</td>
            <td class="px-6 py-4">Dashboard UI</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/vibrantdash/100/60" alt="Vibrant Dash Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">AquaFlow Landing</td>
            <td class="px-6 py-4">Website</td>
            <td class="px-6 py-4"><span class="rounded-full bg-yellow-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">In Progress</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/aquaflow/100/60" alt="AquaFlow Landing Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Neon Chatbot</td>
            <td class="px-6 py-4">Application</td>
            <td class="px-6 py-4"><span class="rounded-full bg-blue-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Planned</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/neonchatbot/100/60" alt="Neon Chatbot Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="hover:bg-gray-600 hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Retro Portfolio</td>
            <td class="px-6 py-4">Portfolio</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/retroportfolio/100/60" alt="Retro Portfolio Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Composant Cartes thermiques

Composant de carte thermique 3D avec une palette de couleurs analogue, adapté à un portfolio. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-8 dark:bg-gray-900 min-h-screen">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center">3D Heat Map Portfolio</h2>
    
    <!-- Responsive Grid for Heat Map Squares -->
    <div class="grid grid-cols-7 sm:grid-cols-14 md:grid-cols-21 lg:grid-cols-28 gap-1">
      {[...Array(98)].map((_, i) => (
        <div key={i} class="w-6 h-6 rounded-md shadow-md transform hover:scale-110 transition-transform duration-200"
             style={`background-color: hsl(${10 + i * 2}, 70%, ${50 + (i % 2) * 5}%); transform: rotateX(15deg) rotateY(15deg);`}></div>
      ))}
    </div>
    
    <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Project 1 -->
      <div class="bg-gradient-to-br from-green-300 to-teal-400 dark:from-green-700 dark:to-teal-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
        <h3 class="text-2xl font-semibold text-white mb-3">Project Alpha Insights</h3>
        <p class="text-white text-opacity-90 leading-relaxed">Showcasing data trends with a unique 3D heat map visualization. This interactive element provides deep insights into user engagement over time, making complex data easily digestible for stakeholders.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha" class="mt-4 rounded-lg shadow-md">
      </div>
      
      <!-- Project 2 -->
      <div class="bg-gradient-to-br from-blue-300 to-indigo-400 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
        <h3 class="text-2xl font-semibold text-white mb-3">User Flow Analytics</h3>
        <p class="text-white text-opacity-90 leading-relaxed">A detailed heat map demonstrating user navigation paths on a e-commerce platform. The 3D perspective highlights popular routes and potential bottlenecks, informing design optimizations.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta" class="mt-4 rounded-lg shadow-md">
      </div>
    </div>

    <div class="mt-12 text-center">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Meet the Creator</h3>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 shadow-lg">
      <p class="text-gray-700 dark:text-gray-300 text-lg">John Doe, Data Visualization Specialist</p>
      <p class="text-gray-600 dark:text-gray-400 text-md mt-2">"Passionate about transforming complex data into beautiful and intuitive visual stories."</p>
    </div>
  </div>
</div>

SkeuomorphicSocialMediaChart

Un composant graphique simple, inspiré du Skeuomorphic, pour les médias sociaux, avec des couleurs complémentaires et un design réactif.

Ouvrir Aperçu

                <div class="p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-xl border border-gray-300 dark:border-gray-700">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Engagement Over Time</h2>
  <div class="flex items-end justify-between h-40 mb-4">
    <!-- Bar 1 (e.g., Likes) -->
    <div class="flex-1 mx-1 bg-blue-500 dark:bg-blue-700 rounded-t-lg shadow-inner" style="height: 70%;"></div>
    <!-- Bar 2 (e.g., Comments) -->
    <div class="flex-1 mx-1 bg-red-500 dark:bg-red-700 rounded-t-lg shadow-inner" style="height: 90%;"></div>
    <!-- Bar 3 (e.g., Shares) -->
    <div class="flex-1 mx-1 bg-green-500 dark:bg-green-700 rounded-t-lg shadow-inner" style="height: 50%;"></div>
    <!-- Bar 4 (e.g., Views) -->
    <div class="flex-1 mx-1 bg-yellow-500 dark:bg-yellow-700 rounded-t-lg shadow-inner" style="height: 80%;"></div>
  </div>
  <div class="flex justify-between text-xs text-gray-600 dark:text-gray-400">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
  </div>
</div>

Composant du système d’évaluation

Composant du système d’évaluation rétro / vintage pour le commerce électronique avec palette de couleurs complémentaires. Pas besoin de JavaScript, seulement du HTML avec Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-8 min-h-screen flex items-center justify-center font-mono">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 max-w-md w-full border-4 border-purple-500 dark:border-yellow-400 transform rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-purple-700 dark:text-yellow-300 mb-2">Rate Our Product!</h2>
      <p class="text-gray-600 dark:text-gray-400">Share your thoughts on this awesome vintage item.</p>
    </div>

    <div class="flex justify-center items-center mb-6 space-x-2">
      <label for="rating" class="sr-only">Rating</label>
      <input type="range" id="rating" name="rating" min="1" max="5" value="4" class="slider w-full h-2 rounded-lg appearance-none cursor-pointer bg-gradient-to-r from-purple-400 to-red-400 dark:from-yellow-400 dark:to-green-400 thumb-retro" style="--slider-track-color: #d1d5db; --slider-thumb-color: #8b5cf6;">
      <span class="text-2xl font-bold text-purple-700 dark:text-yellow-300" id="rating-value">4</span>
    </div>

    <div class="grid grid-cols-5 gap-2 mb-6">
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Terrible</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Bad</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Okay</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Good</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Excellent</span>
      </button>
    </div>

    <div class="mb-6">
      <label for="feedback" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Feedback:</label>
      <textarea id="feedback" name="feedback" rows="4" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-yellow-300 bg-gray-100 dark:bg-gray-700 resize-none placeholder-gray-500 dark:placeholder-gray-400 font-mono" placeholder="Tell us more about your experience..."></textarea>
    </div>

    <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition-all duration-200 transform hover:scale-105 shadow-lg border-2 border-purple-800 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-gray-900 dark:border-yellow-700 w-full sm:w-auto">
        Submit Rating
      </button>
      <button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition-all duration-200 transform hover:scale-105 shadow-lg border-2 border-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-800 w-full sm:w-auto">
        Cancel
      </button>
    </div>
  </div>
</div>

<style>
  /* Retro slider thumb styles */
  .thumb-retro::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #8b5cf6; /* Purple */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #f9fafb; /* White */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4); /* Purple glow */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }

  .dark .thumb-retro::-webkit-slider-thumb {
    background: #fbbf24; /* Yellow */
    border-color: #111827; /* Dark gray */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4); /* Yellow glow */
  }

  .thumb-retro::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #8b5cf6; /* Purple */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #f9fafb; /* White */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4); /* Purple glow */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }

  .dark .thumb-retro::-moz-range-thumb {
    background: #fbbf24; /* Yellow */
    border-color: #111827; /* Dark gray */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4); /* Yellow glow */
  }

  /* Tooltip for stars */
  .group .tooltip {
    display: none;
  }

  .group:hover .tooltip {
    display: block;
  }

  /* Custom styles for star rating selection (active state - optional, can be done with JS) */
  .rating-star:hover .star-icon {
    animation: pulse-star 0.3s ease-in-out infinite alternate;
  }

  @keyframes pulse-star {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
  }

  /* Hide the default range input track */
  input[type="range"]::-webkit-slider-runnable-track {
    background: var(--slider-track-color);
    border-radius: 9999px;
  }

  input[type="range"]::-moz-range-track {
    background: var(--slider-track-color);
    border-radius: 9999px;
  }
</style>

Composant d’intégration de média

Un composant d’intégration multimédia réactif conçu avec Skeuomorphism, à l’aide d’un schéma de couleurs monochromatique. Il comprend un lecteur vidéo, une section de transcription et des boutons de partage social. La conception prend en charge le mode sombre et est construite avec Tailwind CSS.

Ouvrir Aperçu

                <div class="p-8 bg-gray-200 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-4xl transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.02] border border-gray-300 dark:border-gray-600">
    <div class="relative pb-[56.25%] h-0 mb-6 rounded-2xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700">
      <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="md:col-span-2">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-4 tracking-tight drop-shadow-sm">The Art of Skeuomorphism in UI Design</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Skeuomorphism, as a design principle, involves incorporating ornamental design cues from physical objects into digital interfaces. It aims to make new functions familiar and intuitive by mimicking real-world counterparts. This approach often uses textures, shadows, and highlights to give digital elements a tangible feel, enhancing user comprehension and engagement, especially in blog and content consumption platforms.
        </p>

        <div class="border-t border-b border-gray-400 dark:border-gray-600 py-4 mb-6 flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
          </div>
          <div class="flex space-x-3 text-gray-600 dark:text-gray-400">
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 11H9V9h2V7h2v2h2v2h-2v2h-2v-2z"/></svg>
            </a>
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </a>
          </div>
        </div>

        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Transcript</h3>
        <div class="bg-gray-300 dark:bg-gray-700 p-5 rounded-xl shadow-inner border border-gray-400 dark:border-gray-600 h-64 overflow-y-auto custom-scrollbar">
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:00]</span> Welcome to our deep dive into Skeuomorphism, a fascinating design trend that continues to influence digital interfaces.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:15]</span> Originally, skeuomorphism helped users transition from physical to digital tools by replicating familiar real-world cues.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:30]</span> Think about the early calculator apps that looked exactly like physical calculators, with their three-dimensional buttons and LCD displays.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:45]</span> This design philosophy provides a sense of tangibility and familiarity, making complex digital interactions feel more intuitive.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:00]</span> While minimalism has gained prominence, skeuomorphism still finds its place, especially in applications where a sense of realism or traditional aesthetics is key.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:15]</span> For content platforms and blogs, it can enhance readability by visually separating content blocks and interactive elements.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:30]</span> This component demonstrates how skeuomorphic principles, combined with a monochromatic palette, can create a rich, inviting, and highly functional media embed.
          </p>
          <p class="text-gray-800 dark:text-gray-200">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:45]</span> We hope this component inspires you to explore the depths of design.
          </p>
        </div>
      </div>

      <div class="md:col-span-1">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Related Content</h3>
        <div class="space-y-4">
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=1" alt="Related image 1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">The Revival of Vintage Design</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Explore how old-school aesthetics are making a comeback in modern design.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=2" alt="Related image 2">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Monochromatic Magic in UI</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Discover the power of single-color palettes in creating cohesive interfaces.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=3" alt="Related image 3">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Responsive Design Best Practices</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Learn how to build websites that look great on any device, anywhere.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 10px;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #ccc;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0aec0;
    border: 3px solid #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e0;
  }
</style>

Composant de connexion/inscription

Un composant de connexion/inscription réactif pour le commerce électronique avec des micro-interactions, une palette de couleurs analogue et une prise en charge du thème sombre, construit avec Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full relative overflow-hidden">
    
    <!-- Analogous Color Scheme Elements (example: blues and greens) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-blue-200 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
    <div class="absolute top-0 right-0 w-24 h-24 bg-green-200 dark:bg-green-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
    <div class="absolute -bottom-8 left-20 w-24 h-24 bg-teal-200 dark:bg-teal-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>

    <div class="relative z-10">
      <div class="flex justify-center mb-6">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white" id="form-title">Login</h2>
      </div>

      <!-- Login Form -->
      <form id="login-form">
        <div class="mb-4">
          <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="[email protected]">
        </div>
        <div class="mb-6">
          <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
          <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="********">
        </div>
        <div class="flex items-center justify-between mb-6">
          <input type="submit" value="Login" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-300 ease-in-out transform hover:scale-105 active:scale-95">
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
          Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600 font-bold transition duration-300 ease-in-out opacity-75 hover:opacity-100" id="signup-link">Sign up</a>
        </p>
      </form>

      <!-- Signup Form (hidden by default) -->
      <form id="signup-form" class="hidden">
        <div class="mb-4">
          <label for="signup-name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Name</label>
          <input type="text" id="signup-name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="John Doe">
        </div>
        <div class="mb-4">
          <label for="signup-email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="signup-email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="[email protected]">
        </div>
        <div class="mb-6">
          <label for="signup-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
          <input type="password" id="signup-password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="********">
        </div>
        <div class="flex items-center justify-between mb-6">
          <input type="submit" value="Sign Up" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-300 ease-in-out transform hover:scale-105 active:scale-95">
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
          Already have an account? <a href="#" class="text-green-500 hover:text-green-800 dark:text-green-400 dark:hover:text-green-600 font-bold transition duration-300 ease-in-out opacity-75 hover:opacity-100" id="login-link">Login</a>
        </p>
      </form>
    </div>
  </div>
</div>

<!-- Just a little bit of inline CSS for the blob animation - usually this would be in a CSS file -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

<script>
  // This script is for toggling between login and signup forms
  // In a real application, this would be handled by a JavaScript framework or library
  const loginForm = document.getElementById('login-form');
  const signupForm = document.getElementById('signup-form');
  const loginLink = document.getElementById('login-link');
  const signupLink = document.getElementById('signup-link');
  const formTitle = document.getElementById('form-title');

  signupLink.addEventListener('click', (e) => {
    e.preventDefault();
    loginForm.classList.add('hidden');
    signupForm.classList.remove('hidden');
    formTitle.textContent = 'Sign Up';
  });

  loginLink.addEventListener('click', (e) => {
    e.preventDefault();
    signupForm.classList.add('hidden');
    loginForm.classList.remove('hidden');
    formTitle.textContent = 'Login';
  });
</script>

Volet Forum communautaire

Un composant de forum communautaire avec un design Skeuomorphism, une palette de couleurs triadique et une complexité simple, à des fins de médias sociaux, construit avec Tailwind CSS. Comprend la conception réactive et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-2xl border-t border-l border-gray-200 dark:border-gray-600">
    <div class="text-center mb-8">
      <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md">Community Forum</h1>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Connect, Share, Discuss.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 p-5 rounded-xl shadow-inner border border-gray-300 dark:border-gray-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-2">Discussions</h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Engage in lively conversations.</p>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>

      <div class="bg-gradient-to-br from-red-200 to-red-300 dark:from-red-800 dark:to-red-700 p-5 rounded-xl shadow-inner border border-red-300 dark:border-red-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-red-700 dark:text-red-200 mb-2">Announcements</h2>
        <p class="text-red-600 dark:text-red-300 text-sm">Stay updated with the latest news.</p>
        <button class="mt-4 w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>

      <div class="bg-gradient-to-br from-green-200 to-green-300 dark:from-green-800 dark:to-green-700 p-5 rounded-xl shadow-inner border border-green-300 dark:border-green-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-200 mb-2">Members</h2>
        <p class="text-green-600 dark:text-green-300 text-sm">Meet the community members.</p>
        <button class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>
    </div>

    <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 p-5 rounded-xl shadow-inner border border-gray-300 dark:border-gray-600">
      <h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Latest Posts</h2>
      <div class="space-y-4">
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 mr-4" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-blue-700 dark:text-blue-300 font-semibold">John Doe <span class="text-gray-500 dark:text-gray-400 text-sm italic">2 hours ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">How do you handle state management in large scale applications?</p>
          </div>
        </div>
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-400 mr-4" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
          <div>
            <p class="text-red-700 dark:text-red-300 font-semibold">Jane Smith <span class="text-gray-500 dark:text-gray-400 text-sm italic">5 hours ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">Excited about the new forum features!</p>
          </div>
        </div>
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 mr-4" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
          <div>
            <p class="text-green-700 dark:text-green-300 font-semibold">Mike Johnson <span class="text-gray-500 dark:text-gray-400 text-sm italic">1 day ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">Looking for collaborators on an open-source project.</p>
          </div>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 tracking-wide text-lg">
        Load More Posts
      </button>
    </div>
  </div>
</div>

1 ... 84 85 86 87 88 ... 282

Catégories

Tous les composants