Composant Composants multimédias
Un composant multimédia conçu dans le style brutalisme, présentant une mise en page audacieuse avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
<div class="flex flex-col md:flex-row items-start md:items-center gap-6">
<img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
<div class="flex-1">
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
<p class="text-gray-700 dark:text-gray-400 mb-4">
This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
</p>
<span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
</span>
</div>
</div>
<div class="mt-4 flex gap-4">
<button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
<button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800, .bg-gray-700 {
background-color: #4a5568;
}
.text-gray-200 {
color: #edf2f7;
}
.text-gray-400 {
color: #a0aec0;
}
}
</style>Composants associés
Composant multimédia analogue au Bauhaus
Un composant multimédia réactif avec un design inspiré du Bauhaus, utilisant une palette de couleurs analogue, adapté aux sites Web gouvernementaux/de services publics. Caractéristiques des formes géométriques, des couleurs analogues primaires et la prise en charge du mode sombre.
Playful_Booking_Media_Component
Un composant multimédia simple, ludique et réactif pour les systèmes de réservation, avec une palette de couleurs triadique, des éléments arrondis et la prise en charge du mode sombre.
Brutalism_Job_Media_Card
Un composant multimédia complexe, de style brutaliste, pour un site d’offres d’emploi, avec un contraste élevé, une typographie audacieuse et une palette de couleurs violet/violet. Réactif avec prise en charge du mode sombre.