Composants fonctionnels - Style brutalisme
Un composant web fonctionnel conçu dans un style brutaliste à l’aide de Tailwind CSS. Le composant présente une mise en page audacieuse avec un contraste élevé, des effets réactifs et la prise en charge des thèmes sombres. Il comprend des images de remplacement et des avatars pour un attrait visuel.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen p-6 bg-white dark:bg-gray-800">
<div class="container mx-auto w-full max-w-4xl p-6 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
<h1 class="text-4xl font-bold text-black dark:text-white mb-4">Brutalist Functional Component</h1>
<p class="text-lg text-gray-800 dark:text-gray-300 mb-6">
This component showcases a raw and bold design aesthetic typical of brutalism.
It emphasizes usability and content over polished interfaces.
</p>
<div class="flex flex-wrap justify-between gap-4">
<div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
<img src="https://picsum.photos/400/300" alt="Random Image" class="w-full h-auto rounded mb-2">
<h2 class="text-xl font-semibold text-black dark:text-white">Section 1</h2>
<p class="text-gray-700 dark:text-gray-200">This section contains a brief description with a bold design that embraces simplicity.</p>
</div>
<div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
<img src="https://picsum.photos/400/301" alt="Random Image" class="w-full h-auto rounded mb-2">
<h2 class="text-xl font-semibold text-black dark:text-white">Section 2</h2>
<p class="text-gray-700 dark:text-gray-200">Another section to demonstrate the design. High contrast provides a striking look.</p>
</div>
</div>
<div class="mt-6 border-t border-gray-500 dark:border-gray-400 pt-4">
<h2 class="text-2xl font-bold text-black dark:text-white">User Information</h2>
<div class="flex items-center gap-4 mt-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow">
<div>
<h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
<p class="text-gray-600 dark:text-gray-300">Web Developer</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composants fonctionnels
Un composant doté d’un style de conception glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.
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.
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.