Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Retour en haut de la page Composant du bouton

Un composant de bouton de retour en haut réactif avec un design Glassmorphism, une palette de couleurs de tons de terre et des interactions complexes, adapté à un tableau de bord.

Ouvrir Aperçu

                <div class="fixed bottom-6 right-6">
  <a href="#top" class="group block">
    <button class="relative flex items-center justify-center w-16 h-16 bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-500 dark:focus:ring-teal-400 focus:ring-opacity-70">
      <svg class="w-8 h-8 text-gray-800 dark:text-gray-200 transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
      <span class="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-1/2 px-3 py-1 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-sm font-semibold rounded-md whitespace-nowrap transition-all duration-300 ease-in-out">
        Back to Top
      </span>
    </button>
  </a>
</div>

<div class="min-h-screen bg-gradient-to-br from-stone-100 via-stone-200 to-stone-300 dark:from-stone-800 dark:via-stone-900 dark:to-black flex flex-col items-center justify-center p-8">
  <h1 id="top" class="text-5xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Dashboard Overview</h1>
  <p class="text-lg text-gray-700 dark:text-gray-300 max-w-2xl text-center mb-12">
    Scroll down to see the

Boutons J’aime/Réaction

Composant de boutons J’aime/Réaction avec design brutal, tons de terre, interactions complexes, réactif, prise en charge du thème sombre. Pas de JS, du HTML pur avec Tailwind.

Ouvrir Aperçu

                <div class="bg-stone-100 dark:bg-stone-900 p-8 min-h-screen flex items-center justify-center">
  <div class="bg-stone-200 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,0.5)] max-w-md w-full">
    <hさんがclass="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-6 font-mono">React to this postさんが</h2>
    
    <div class="flex flex-wrap gap-4 justify-center">
      
      <!-- Like Button -->
      <button class="flex items-center space-x-2 bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="Mさんが14 10h4.764a2 2 0 011.803 1.138l3.095 7.738A2 2 0 0122が 2さんがh-3V7a3 3 0 00-3-3H4a2 2 0 00-2 2v10a2 2 0 002 2h12M9 20h9さんの</path>
        </svg>
        <span>Like</span>
      </button>

      <!-- Love Button -->
      <button class="flex items-center space-x-2 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M20.84 4. さんが12a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.さんが23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
        </svg>
        <span>Loveさんが</span>
      </button>

      <!-- Laugh Button -->
      <button class="flex items-center space-x-2 bg-yellow-700 hover:bg-yellow-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="Mさんがさんと7h.01Mさんが2 7h.01Mさんの5 7h.01M21 12a9 9 0 さんの9 0 01-18 0z"></path>
        </svg>
        <span>Laughさん</span>
      </button>

      <!--さんが Angry Button -->
      <button class="flex items-さんenter space-x-2 bg-red-900 hover:bg-red-950 text-white font-bold py-さんとpx-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linearさんも">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんがbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんMさんが.732 14.597a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.353-2.935a4.8 4.8 0 00-3.002-2.53m-1.067.895a5.003 5.003 0 01-1.5.242m1.067-.895a5.003 5.003 0 00-1.5.242m0 0.895a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.353-2.935a4.8 4.8 0 00-3.002-2.53"></path>
        </svg>
        <span>Angry</span>
      </button>
      
      <!--さんの Sad Button -->
      <button class="flex items-center space-x-2 bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linear">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんMさんが.732 14.597a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.353-2.935a4.8 4.8 0 00-3.002-2.53m-1.067.895a5.003 5.003 0 01-1.5.242m1.067-.895a5.003 5.003 0 00-1.5.242m0 0.895a4.995 4.995 0 00-.173-2.523c-.41-1.028-1.207-2.088-2.353-2.935a4.8 4.8 0 00-3.002-2.53"></path>
        </svg>
        <span>Sad</span>
      </button>

      <!--さんが Wow Button -->
      <button class="flex items-さんenter space-x-2 bg-orange-700 hover:bg-orange-800 text-white font-bold py-さんとpx-6 rounded-none border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.5)] transition-all duration-150 ease-linearさんが">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 icon-svg-stroke w-6" fill="none" viewさんのbox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="さんがM-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-さんと0.84 4.さんが12a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.さんが23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
        </svg>
        <span>Wow</span>
      </button>
    
さんが </div>
  </div>
さん</div>

Composant Boutons de partage social

Un composant réactif de boutons de partage social conçu dans un style glassmorphism avec une palette de couleurs monochromatiques pour les sites de commerce électronique. Il comporte des éléments translucides givrés ressemblant à du verre, comprend plusieurs boutons interactifs pour le partage sur les réseaux sociaux et prend en charge le mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg space-x-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200/200" alt="Product Image" class="w-24 h-24 rounded-lg mb-2">
        <h2 class="text-lg text-gray-800 dark:text-gray-200">Share this product</h2>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg dark:bg-blue-600 dark:hover:bg-blue-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 text-white hover:bg-blue-600 transition-all duration-300 shadow-lg dark:bg-blue-500 dark:hover:bg-blue-700">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" alt="Twitter" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white hover:bg-pink-700 transition-all duration-300 shadow-lg dark:bg-pink-600 dark:hover:bg-pink-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-red-500 text-white hover:bg-red-700 transition-all duration-300 shadow-lg dark:bg-red-600 dark:hover:bg-red-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/pinterest.png" alt="Pinterest" class="w-6 h-6">
        </a>
    </div>
</div>

Composant Lightbox d’image

Un composant complexe d’Image Lightbox conçu avec des éléments skeuomorphes et une palette de couleurs pastel, adapté aux environnements de tableau de bord. Il comprend une mise en page réactive, la prise en charge du thème sombre et une interface interactive.

Ouvrir Aperçu

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
    <div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
        <button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
            &times;
        </button>
        <div class="flex justify-center mb-5">
            <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
        </div>
        <div class="flex justify-between items-center mt-5">
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
        </div>
    </div>
</div>

Composant de pagination

Un composant de pagination réactif, monochrome inspiré de la 3D pour les interfaces de médias sociaux, avec prise en charge du mode sombre, conçu avec Tailwind CSS.

Ouvrir Aperçu

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 py-4 bg-gray-100 dark:bg-gray-900">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    Previous
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    2
  </a>
    <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-500 rounded-md hover:bg-indigo-100 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    3
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    4
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
    Next
  </a>
</nav>

Composant Cartes

Un composant Maps simple avec un design Glassmorphism, une palette de couleurs en niveaux de gris et une mise en page simple. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="relative flex items-center justify-center w-full h-96 bg-gray-300 dark:bg-gray-700 overflow-hidden" style="backdrop-filter: blur(10px); background-color: rgba(209, 213, 219, 0.3); dark:background-color: rgba(55, 65, 81, 0.3);">
  <div class="absolute inset-0 z-0">
    <img src="https://picsum.photos/seed/maps/800/600" alt="Map background" class="object-cover w-full h-full">
  </div>
  <div class="relative z-10 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-lg shadow-lg text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Find Us Here</h2>
    <p class="text-gray-700 dark:text-gray-300">Our location on the map.</p>
  </div>
</div>

Composant d’amélioration de la navigation

Un composant de navigation réactif conçu pour un portefeuille, utilisant un style brutaliste avec une palette de couleurs pastel et la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 p-6 flex justify-between items-center shadow-lg">
    <a href="#" class="text-2xl font-bold text-pink-600 dark:text-pink-300">My Portfolio</a>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Projects</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Contact</a>
    </div>
</nav>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=1" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, emphasizing its features, technologies used, and challenges faced.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=2" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, focusing on user experience and the development process.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=3" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, detailing the problem solved and feedback received.</p>
        </div>
    </div>
</section>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Meet the Team</h2>
    <div class="flex flex-wrap justify-center space-x-6 mt-6">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">Frontend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            <p class="text-gray-600 dark:text-gray-400">Backend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Adam Johnson</h3>
            <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
        </div>
    </div>
</section>

Composant Tableaux de bord

Un composant de tableaux de bord simple et réactif conçu pour la présentation de portefeuilles, avec des micro-interactions et axé sur les tons de terre. Il prend en charge le thème sombre en utilisant Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Portfolio Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=2" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=3" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
    </div>
    <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
        <p>Created by <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Your Name</a></p>
    </footer>
</div>

Boutons J’aime/Réaction

Composant de boutons Like/Reaction avec design Retro/Vintage

Ouvrir Aperçu

                <div class="flex items-center justify-center space-x-4 p-4 bg-gray-200 dark:bg-gray-800">
  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
    </svg>
    <span>Like</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 2a6 6 0 00-6 6v3.586l1.707 1.707A3 3 0 017 14h6a3 3 0 012.293.707L16 11.586V8a6 6 0 00-6-6zM12 15.5a1 1 0 100 2h-4a1 1 0 100 2H7a1 1 0 100 2h6a3 3 0 003-3v-6a3 3 0 00-3-3h-2l-.45.45A4 4 0 0111 14H9a4 4 0 01-1.55-.45L7 13V8a4 4 0 014-4h2a4 4 0 014 4v6a4 4 0 01-4 4h-6.5a1.5 1.5 0 00-1.06.44L4 17.5V15a1 1 0 00-1-1h-.5a1.5 1.5 0 000 3H3v.5a1.5 1.5 0 001.5 1.5h8.086a2.5 2.5 0 011.768.732L15 20.5V21h1a1 1 0 100-2h-1v-.5a1.5 1.5 0 00-1.5-1.5z" />
    </svg>
    <span>React</span>
  </button>

</div>

Composant de pagination

Un composant de pagination réactif simple conçu pour le mode sombre avec un schéma de couleurs analogue, adapté à un portfolio.

Ouvrir Aperçu

                <div class="flex justify-center items-center space-x-4 py-6">
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">&laquo; Previous</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">1</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">2</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">3</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">Next &raquo;</a>
</div>

1 ... 103 104 105 106 107 ... 282

Catégories

Tous les composants