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
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.
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.
Carte de réservation inspirée du papier/de l’impression
Un composant de carte de réservation/réservation simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs terre, avec prise en charge du mode sombre. Convient pour afficher les créneaux de rendez-vous ou les détails de la réservation.