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.
HTML Code
<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 associés
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.
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.
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.