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
Composants multimédias Composante 39
Un composant multimédia conçu avec l’interface utilisateur du mode sombre, avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Composants multimédias
Un composant de médias sociaux complexe, réactif et compatible avec le mode sombre avec un style Glassmorphism utilisant des couleurs vives.
Composant Composants multimédias
Un composant multimédia réactif inspiré des styles de design rétro/vintage, avec une esthétique nostalgique des années 80/90. Il prend en charge le thème sombre avec Tailwind CSS et comprend des images et des avatars de remplacement.