Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Volet Indicateurs de progrès

Un composant d’indicateur de progression réactif avec un design brutalisme, des tons de couleur terreux et une prise en charge du thème sombre, adapté à un blog ou à un site de contenu.

Ouvrir Aperçu

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono">
  <div class="w-full max-w-2xl bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100 p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] mb-8">
    <h1 class="text-3xl md:text-5xl text-stone-900 dark:text-stone-100 mb-6 border-b-4 border-stone-900 dark:border-stone-100 pb-2">Article Progress</h1>
    
    <!-- Progress Bar 1 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 1: Introduction</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 30%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">30% Completed</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 2: Core Concepts</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 65%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">65% Completed</p>
    </div>

    <!-- Progress Bar 3 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 3: Conclusion</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 10%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">10% Completed</p>
    </div>

    <!-- Article Completion Indicator -->
    <div class="mt-8 pt-4 border-t-4 border-stone-900 dark:border-stone-100">
      <h2 class="text-2xl md:text-3xl text-stone-900 dark:text-stone-100 mb-4">Overall Article Progress</h2>
      <div class="w-full bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 h-10 flex items-center justify-center relative">
        <div class="h-full bg-green-700 dark:bg-green-400 transition-all duration-700 ease-out" style="width: 45%;"></div>
        <span class="absolute text-stone-100 dark:text-stone-900 text-lg font-bold">45% Complete</span>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-2 text-sm text-center">Keep reading to finish the article!</p>
    </div>

  </div>
</div>

Composant Filtres

Un composant de filtres réactif avec des éléments de conception 3D dans des tons terreux, adapté à un portfolio, avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Explore My Portfolio</h2>

  <div class="flex flex-wrap justify-center gap-4 mb-12">
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">All Projects</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Web Development</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">UI/UX Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Graphic Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
  </div>
  
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project1/600/400" alt="Project 1" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title One</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A brief description of Project One, showcasing its key features and technologies used. This project demonstrates responsive design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">HTML</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">CSS</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Tailwind CSS</span>
      </div>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project2/600/400" alt="Project 2" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Two</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">This project focuses on a comprehensive UI/UX design approach, user flows, and wireframing for an intuitive experience.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Figma</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Prototyping</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Research</span>
      </div>
    </div>

    <!-- Project Card 3 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project3/600/400" alt="Project 3" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Three</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">An example of graphic design work including logo creation, branding guidelines, and marketing collateral design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Photoshop</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrator</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Branding</span>
      </div>
    </div>

    <!-- Project Card 4 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project4/600/400" alt="Project 4" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Four</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A web development project featuring a dynamic and interactive frontend built with modern JavaScript frameworks.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">React</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Node.js</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">API Integration</span>
      </div>
    </div>

    <!-- Project Card 5 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project5/600/400" alt="Project 5" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Five</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">UI/UX case study exploring user research, persona creation, and iterative design processes for a mobile application.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">User Research</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Wireframing</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Usability Testing</span>
      </div>
    </div>

    <!-- Project Card 6 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project6/600/400" alt="Project 6" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Six</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A sophisticated graphic design project involving complex illustrations and print media layouts for a magazine.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrations</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">InDesign</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Print Design</span>
      </div>
cv    </div>

  </div>
</div>

Glassmorphism Sidebar Navigation Component

Un composant de navigation de la barre latérale de style Glassmorphism pour les blogs, avec une palette de couleurs monochromatiques. Il s’agit d’un design simple et réactif avec prise en charge du mode sombre, utilisant uniquement HTML et Tailwind CSS. La barre latérale comprend un titre de site, des liens de navigation et une section de profil.

Ouvrir Aperçu

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

  <!-- Sidebar -->
  <div class="w-full md:w-64 bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-5 shadow-lg md:min-h-screen">
    <div class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">MyBlog</div>
    <nav>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out">
        Home
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Articles
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Categories
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        About
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Contact
      </a>
    </nav>

    <div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400">
        <div class="ml-3">
          <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Blogger</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content (Placeholder for blog content) -->
  <div class="flex-1 p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Welcome to MyBlog!</h1>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
      This is a placeholder for your blog content. The sidebar on the left demonstrates a Glassmorphism-style navigation.
      It's responsive, adapts to dark mode, and uses a monochromatic color scheme for a clean and modern look.
      Explore the navigation links to imagine various sections of your blog.
    </p>
    
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/blog1/400/250" alt="Blog Post 1" class="rounded-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My First Awesome Post</h2>
            <p class="text-gray-700 dark:text-gray-300 text-sm">A short description of the first amazing blog post. Click to read more!</p>
        </div>
        <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/blog2/400/250" alt="Blog Post 2" class="rounded-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Great Article</h2>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Discover more insights in this compelling second article.</p>
        </div>
    </div>
  </div>

</div>

Barre de progression skeuomorphe

Composant de barre de progression skeuomorphe pour les portfolios, doté d’un schéma de couleurs monochromatique et d’un design complexe et interactif avec prise en charge du mode réactif et sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-xl shadow-2xl-inner relative">
    <div class="absolute inset-0 border-4 border-gray-400 dark:border-gray-600 rounded-xl pointer-events-none"></div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Project Progress</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Portfolio Showcase</p>
    </div>

    <div class="mb-8 relative">
      <div class="h-8 bg-gray-400 dark:bg-gray-600 rounded-full shadow-inner-lg overflow-hidden relative">
        <div class="absolute inset-y-0 left-0 w-3/4 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full shadow-lg transition-all duration-500 ease-out flex items-center justify-end pr-3"
             style="width: 75%;">
          <span class="text-white text-sm font-bold drop-shadow-md">75%</span>
        </div>
        <div class="absolute top-1/2 left-3/4 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white dark:bg-gray-200 rounded-full shadow-md border-2 border-blue-500 dark:border-blue-700"></div>
      </div>
      <div class="text-gray-700 dark:text-gray-300 text-right mt-2 text-sm">Completed</div>
    </div>

    <div class="grid grid-cols-2 gap-4 text-sm">
      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Design Phase</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">90%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Development</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">70%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Testing</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">50%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-6 rounded-full 
                     shadow-lg hover:shadow-xl active:shadow-inner-lg transition-all duration-200
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:active:bg-blue-900">
        View Details
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom Utility Classes for Skeuomorphism */
  .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
  }

  .drop-shadow-md {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
  }
</style>

Composant Composants de navigation

Il s’agit d’un composant de navigation complexe et réactif pour les tableaux de bord, doté de micro-interactions et d’un schéma de couleurs analogue, avec prise en charge du mode sombre. Utilise Tailwind CSS pour le style et inclut des éléments interactifs sans dépendre de JavaScript.

Ouvrir Aperçu

                <nav class="bg-gradient-to-r from-teal-400 via-emerald-500 to-cyan-500 dark:from-teal-800 dark:via-emerald-900 dark:to-cyan-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold">Dashboard</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Analytics
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Reports
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Settings
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="md:hidden mt-4">
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Home</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Analytics</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Reports</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Settings</a>
  </div>
</nav>

Boîte de recherche Glassmorphism

Un composant de boîte de recherche glassmorphism simple et réactif avec des couleurs en niveaux de gris, adapté à un tableau de bord. Prend en charge le mode sombre.

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">
    <input type="text" placeholder="Search..." class="w-full py-3 px-5 pr-12 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 transition duration-300 ease-in-out"
    />
    <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
      <svg class="h-5 w-5 text-gray-600 dark:text-gray-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>
  </div>
</div>

Composant de fenêtre de chat

Un composant simple de fenêtre de chat avec des micro-interactions, un design réactif et une prise en charge du thème sombre, adapté aux blogs ou à la consommation de contenu.

Ouvrir Aperçu

                <div class="flex flex-col h-screen antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200">
  <div class="flex flex-row items-center justify-between flex-shrink-0 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
    <div class="flex items-center gap-3">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <div class="flex flex-col">
        <div class="font-semibold">John Doe</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Active now</div>
      </div>
    </div>
    <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <div class="flex-1 p-4 overflow-y-auto">
    <!-- Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
        <div>
          <span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
            Hey there! How are you doing?
          </span>
        </div>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-end justify-end mb-4">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-1 items-end">
        <div>
          <span class="inline-block px-4 py-2 text-white bg-blue-500 rounded-lg">
            I'm doing great, thanks for asking! How about you?
          </span>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 ml-3 rounded-full">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
        <div>
          <span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
            I'm doing good too! Just chilling and working on some projects.
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-700">
    <div class="relative flex items-center">
      <input type="text" placeholder="Type your message..." class="flex-grow w-full h-10 px-4 pr-10 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
      <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-500 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
      </button>
    </div>
  </div>
</div>

Composant des chargeurs

Un composant de chargement complexe, réactif et rétro-vintage pour les sites Web d’entreprise, avec des couleurs vives et une 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="relative w-64 h-64 border-4 border-purple-500 rounded-full animate-spin-slow">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="w-24 h-24 bg-pink-500 rounded-full animate-pulse-fast"></div>
    </div>
    <div class="absolute top-0 left-0 w-16 h-16 -mt-8 -ml-8 bg-yellow-400 rounded-full animate-bounce"></div>
    <div class="absolute bottom-0 right-0 w-16 h-16 -mb-8 -mr-8 bg-green-400 rounded-full animate-bounce delay-100"></div>
    <div class="absolute top-0 right-0 w-12 h-12 -mt-6 -mr-6 bg-blue-400 rounded-full animate-spin-reverse"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 -mb-6 -ml-6 bg-red-400 rounded-full animate-spin-reverse delay-100"></div>
  </div>

  <style>
    @keyframes spin-slow {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse-fast {
      0%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes spin-reverse {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(-360deg);
      }
    }

    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }

    .animate-pulse-fast {
      animation: pulse-fast 1.5s infinite;
    }

    .animate-bounce {
      animation: bounce 2s infinite;
    }

    .animate-spin-reverse {
      animation: spin-reverse 5s linear infinite;
    }
  </style>
</div>

Composant de connexion/inscription brutaliste

Composant de connexion/inscription brutaliste pour les sites Web de blog/contenu avec schéma de couleurs en niveaux de gris.

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-none shadow-none border-4 border-black dark:border-white w-full max-w-md mx-4">
        <div class="mb-8">
            <h2 class="text-3xl font-bold text-black dark:text-white mb-2">Login</h2>
            <p class="text-gray-700 dark:text-gray-300">Access your brutalist blog experience.</p>
        </div>
        <form>
            <div class="mb-4">
                <label for="username" class="sr-only">Username</label>
                <input type="text" id="username" placeholder="USERNAME" class="w-full p-3 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white text-lg">
            </div>
            <div class="mb-6">
                <label for="password" class="sr-only">Password</label>
                <input type="password" id="password" placeholder="PASSWORD" class="w-full p-3 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white text-lg">
            </div>
            <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black P-3 border-2 border-black dark:border-white uppercase font-bold text-lg hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-300">
                LOGIN
            </button>
        </form>
        <div class="mt-8 text-center">
            <a href="#" class="text-black dark:text-white hover:underline font-bold">CREATE ACCOUNT</a>
        </div>
    </div>
</div>

Composant de réinitialisation de mot de passe

Un composant de réinitialisation de mot de passe avec Material Design, des couleurs vives, une complexité modérée et un objectif de commerce électronique. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS. Aucun JavaScript n’est inclus.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
    <h2 class="text-3xl font-bold text-center text-indigo-600 dark:text-indigo-400 mb-6">Reset Your Password</h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-8">Enter your email address and we'll send you a link to reset your password.</p>
    <form>
      <div class="mb-5">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="[email protected]">
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-300">
        Send Reset Link
      </button>
    </form>
    <div class="mt-6 text-center">
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-500 text-sm font-medium">Remember your password? Log In</a>
    </div>
  </div>
</div>

1 ... 78 79 80 81 82 ... 282

Catégories

Tous les composants