Composante des composantes interactives
Un composant interactif d’inspiration brutaliste pour un blog, avec des tons de terre à contraste élevé, un design réactif et la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-6 lg:p-12 font-mono">
<!-- Article Card with Brutalist Elements -->
<div class="max-w-xl mx-auto bg-amber-700 dark:bg-amber-900 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000,12px_12px_0_0_#a16207] dark:shadow-[8px_8px_0_0_#fff,12px_12px_0_0_#44403c] transition duration-300 hover:shadow-[16px_16px_0_0_#000,20px_20px_0_0_#a16207] dark:hover:shadow-[16px_16px_0_0_#fff,20px_20px_0_0_#44403c]">
<div class="p-6 border-b-4 border-black dark:border-white">
<div class="text-sm font-bold mb-2 uppercase">Featured Article</div>
<h2 class="text-3xl font-bold mb-4 leading-tight">The Unyielding Spirit of Brutalist Architecture</h2>
<img src="https://picsum.photos/seed/brutalism/600/400" alt="Brutalist building" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
<p class="mb-4">
Exploring the raw beauty and controversial history of Brutalist structures. Their imposing forms and
unadorned surfaces evoke a sense of permanence and honesty.
</p>
<a href="#" class="inline-block bg-black dark:bg-white text-white dark:text-black px-6 py-3 font-bold border-4 border-black dark:border-white transform translate-y-1 translate-x-1 hover:translate-y-0 hover:translate-x-0 transition duration-100">
Read More
</a>
</div>
<!-- Related Articles Section -->
<div class="p-6 border-b-4 border-black dark:border-white">
<h3 class="text-2xl font-bold mb-4">More to Explore</h3>
<ul>
<li class="mb-4 pb-4 border-b border-stone-700 dark:border-stone-300 last:border-b-0">
<a href="#" class="block hover:underline">
<h4 class="text-xl font-bold mb-1">Concrete Jungle: Brutalism in Urban Landscapes</h4>
<p class="text-sm text-stone-700 dark:text-stone-300">An analysis of BrutalismComposants associés
Retro Vintage Portfolio Composants interactifs
Un composant de portfolio à thème rétro-vintage en niveaux de gris avec des éléments interactifs, adapté à la présentation de travaux ou de produits. Dispose d’un design réactif et d’une prise en charge du mode sombre.
Composante des composantes interactives
Un composant interactif pour les médias sociaux avec une palette de couleurs pastel, une complexité modérée, un design réactif et une prise en charge du mode sombre, construit avec Tailwind CSS et suivant les principes de conception matérielle. Il utilise des images factices de picsum.photos et des avatars de randomuser.me.
BrutalismePortfolioInteractif
Composant de composants interactifs avec un design brutaliste, des couleurs vives et une mise en page complexe à des fins de portefeuille, réactif avec prise en charge du thème sombre.