Composants fonctionnels

Tableau de bord des composants fonctionnels

Un composant de tableau de bord réactif conçu selon les principes de Material Design et une palette de couleurs monochromatiques. Il propose des mises en page basées sur une grille, des éléments interactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 1</h2>
            <img src="https://picsum.photos/200?random=1" alt="Image 1" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 1.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 2</h2>
            <img src="https://picsum.photos/200?random=2" alt="Image 2" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 2.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 3</h2>
            <img src="https://picsum.photos/200?random=3" alt="Image 3" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 3.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Profile</h2>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-20 h-20 rounded-full mb-2">
            <p class="text-gray-600 dark:text-gray-400">User Name</p>
            <p class="text-gray-500 dark:text-gray-500">User Email</p>
        </div>
    </div>
</div>

Composant fonctionnel de tableau de bord minimaliste avec un design réactif et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white p-4 sm:p-6 lg:p-8">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Total Users</h2>
                <p class="text-3xl font-bold">1500</p>
            </div>
            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Revenue</h2>
                <p class="text-3xl font-bold">$5000</p>
            </div>
            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Orders</h2>
                <p class="text-3xl font-bold">300</p>
            </div>
        </div>
    </div>
</div>

Composants fonctionnels

Un composant de tableau de bord avec des composants fonctionnels utilisant les principes de conception matérielle, une palette de couleurs analogue et une complexité modérée. Le composant comprend une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.

Ouvrir l’aperçu

                <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Functional Components Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Analogous Colors (example: blue-green, blue, blue-violet) */
    /* Using shades of Tailwind's built-in colors for simplicity */
    .bg-primary {
      background-color: #437c90; /* A blue-green */
    }
    .text-primary {
      color: #437c90;
    }
    .bg-secondary {
      background-color: #325a6c; /* A bluer tone */
    }
     .text-secondary {
      color: #325a6c;
    }
    .bg-tertiary {
      background-color: #5a6c8c; /* A blue-violet */
    }
     .text-tertiary {
      color: #5a6c8c;
    }

    /* Dark Mode Styles */
    .dark .bg-primary {
      background-color: #1e3a48;
    }
    .dark .text-primary {
      color: #1e3a48;
    }
     .dark .bg-secondary {
      background-color: #152c3a;
    }
     .dark .text-secondary {
      color: #152c3a;
    }
     .dark .bg-tertiary {
      background-color: #2c3a4e;
    }
     .dark .text-tertiary {
      color: #2c3a4e;
    }

    /* Material Design Shadows (using Tailwind's built-in shadows) */
    .shadow-material {
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .dark .shadow-material {
       box-shadow: 0 3px 1px -2px rgba(255, 255, 255, 0.2), 0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 1px 5px 0 rgba(255, 255, 255, 0.12);
    }

  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4">

  <div class="container mx-auto">

    <!-- Header -->
    <header class="flex justify-between items-center mb-8">
      <h1 class="text-2xl font-bold">Dashboard</h1>
      <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
        <!-- Dark mode toggle - functional implementation would require JS -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
      </button>
    </header>

    <!-- Functional Components Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Component 1: Stats Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-primary mb-2">Total Users</h2>
        <p class="text-3xl font-bold">1,234</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
      </div>

      <!-- Component 2: Recent Activity Feed -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-secondary mb-4">Recent Activity</h2>
        <ul>
          <li class="flex items-center mb-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Added new report</p>
            </div>
          </li>
           <li class="flex items-center mb-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Updated user profile</p>
            </div>
          </li>
           <li class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">Peter Jones</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Generated weekly summary</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Component 3: Quick Links -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-tertiary mb-4">Quick Links</h2>
        <div class="grid grid-cols-2 gap-4">
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Settings</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Reports</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Analytics</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Users</a>
        </div>
      </div>

      <!-- Component 4: Image Card (example) -->
       <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-primary mb-4">Data Visualization (Placeholder)</h2>
        <img src="https://picsum.photos/seed/dashboard/400/200" alt="Placeholder Image" class="rounded-md w-full">
      </div>

       <!-- Component 5: Another Stats Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-secondary mb-2">Revenue</h2>
        <p class="text-3xl font-bold">$56,789</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">-5% from last quarter</p>
      </div>

       <!-- Component 6: Text Block (example) -->
       <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-tertiary mb-4">Notes</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a placeholder for important notes or messages for the user.</p>
      </div>

    </div>

  </div>

  <!-- Basic Dark Mode Toggle Script (for demonstration, not a full implementation) -->
  <script>
    const toggleButton = document.querySelector('header button');
    const html = document.querySelector('html');

    toggleButton.addEventListener('click', () => {
      html.classList.toggle('dark');
    });
  </script>

</body>
</html>

Composants fonctionnels

Composant fonctionnel pour le commerce électronique avec un design réactif et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composants fonctionnels

Un composant de portefeuille minimaliste conçu avec Tailwind CSS, avec une palette de couleurs vives et prenant en charge le mode sombre. Ce composant est destiné à présenter des travaux ou des produits et comprend des images et des espaces réservés d’avatar.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">My Portfolio</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 3.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 4</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 4.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 5</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 5.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 6</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 6.</p>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">About Me</h2>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <p class="text-gray-600 dark:text-gray-400">Hello! I'm a passionate developer who loves to create. Check out my work above and connect with me for collaboration!</p>
        </div>
    </div>
</div>

Composant fonctionnel du commerce électronique

Composant de commerce électronique de conception plate minimaliste avec palette de couleurs triadique et prise en charge réactive du mode sombre.

Ouvrir l’aperçu

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our E-commerce Store</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$99.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/301/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">Find out more about this amazing product!</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$149.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/302/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Best Seller</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">This product is a customer favorite!</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$79.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white">Customer Reviews</h3>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="ml-4">
                <p class="text-gray-800 dark:text-white">John Doe</p>
                <p class="text-gray-600 dark:text-gray-300">"Excellent products! Fast shipping and great service. Highly recommend!"</p>
            </div>
        </div>
    </div>
</div>

Composant Composants fonctionnels - Interface utilisateur en mode sombre

Un composant de médias sociaux réactif conçu avec le mode sombre et les tons de terre, adapté aux interfaces de réseaux sociaux. Comprend des avatars d’utilisateurs, du contenu de publication et des boutons d’interaction.

Ouvrir l’aperçu

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-3">
            <h2 class="text-lg font-semibold">John Doe</h2>
            <p class="text-gray-400">@john_doe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
    </div>
    <div class="flex justify-between text-gray-400">
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Like</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Comment</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Share</span>
        </button>
    </div>
</div>

Composant fonctionnel du blog

Composant fonctionnel avec conception 3D, palette de couleurs complémentaire, complexité modérée pour les blogs, réactif avec prise en charge du thème sombre. Pas de JS, juste du HTML et du Tailwind.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="text-center">
            <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
                From the Blog
            </h2>
            <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
                Explore our latest articles and insights.
            </p>
        </div>

        <div class="mt-12 grid gap-5 lg:grid-cols-3 lg:max-w-none">
            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog1/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Article
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Boost your conversion rate
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Roel Aufderhar</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Roel Aufderhar
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog2/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Video
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                How to use search engine optimization to drive traffic to your site
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Brenna Goyette</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Brenna Goyette
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog3/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Case Study
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Improve your customer experience
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Daniela Metz</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/56.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Daniela Metz
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Composants fonctionnels

Un composant de médias sociaux conçu avec le style Brutalism et les couleurs pastel, doté d’une interface complexe pour les interactions, avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
    <header class="flex items-center space-x-4 border-b border-gray-300 dark:border-gray-700 pb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </header>
    <div class="my-4">
        <p class="text-gray-800 dark:text-gray-200">
            This is a sample post showcasing Brutalism in design. 
            The layout is raw and bold, inviting interactions with its visually striking style!
        </p>
        <img src="https://picsum.photos/800/400?random=1" alt="Random Image" class="mt-4 w-full rounded-lg shadow-md">
    </div>
    <footer class="flex justify-between border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">❤️ Like</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">💬 Comment</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">🔗 Share</button>
    </footer>
</div>

Composants fonctionnels

Un composant Web imitant ses homologues du monde réel dans un style d’entreprise avec une palette de couleurs complémentaire, une mise en page simple et un design réactif avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="p-6 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
    </div>
  </div>
  <div class="mt-4">
    <p class="text-gray-700 dark:text-gray-300">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
  </div>
  <div class="mt-4">
    <img class="w-full h-32 rounded-lg" src="https://picsum.photos/400/200" alt="Business Image">
  </div>
  <div class="mt-4">
    <a href="#" class="inline-block px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Contact</a>
  </div>
</div>

Catégories

Composants fonctionnels