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
Composant de documentation Art Déco Violet
Il s’agit d’un composant de documentation/wiki de complexité modérée avec un thème de design Art déco, avec des motifs géométriques et un style luxueux utilisant un spectre de couleurs violet/violet. Entièrement réactif avec prise en charge du mode sombre.
Carte d’inscription immobilière
Une carte d’annonce immobilière complexe, inspirée du papier/de l’impression avec des tons bleus d’entreprise, conçue pour les plateformes d’annonces immobilières. Il propose une mise en page réactive, une prise en charge du mode sombre et de multiples détails sur une propriété.
Skeuomorphic Earth Tones Carte du Gouvernement
Un composant de carte simple et réactif avec des éléments de design skeuomorphes et une palette de couleurs de tons de terre, adapté aux sites Web gouvernementaux ou de services publics, avec prise en charge du mode sombre.