Composant d’intégration de média
Un composant multimédia d’intégration brutaliste, dynamique et complexe pour les blogs, conçu avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="dark:bg-gray-900 dark:text-white p-8">
<div class="max-w-4xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-4 border-black dark:border-white p-4">
<div class="relative pb-56 md:pb-0 md:h-96">
<iframe class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-white" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex flex-col justify-between">
<div>
<h2 class="text-3xl font-bold mb-4 border-b-4 border-black dark:border-white pb-2">Embedded Media Title</h2>
<p class="mb-4">This is a description of the embedded media. It is intentionally a bit rough around the edges to fit the brutalist style. The vibrant colors and bold borders create a sense of energy and excitement.</p>
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<div>
<p class="font-bold">Author Name</p>
<p class="text-sm">Date Published</p>
</div>
</div>
</div>
<div class="flex justify-end">
<button class="bg-red-500 text-white px-6 py-3 border-4 border-black dark:border-white font-bold text-lg hover:bg-red-700">Watch Now</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant d’intégration de média
Un composant multimédia d’intégration minimaliste conçu pour les tableaux de bord avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant d’intégration de média
Un composant d’intégration multimédia de style Neumorphism adapté à la consommation de blogs et de contenus, doté d’une palette de couleurs triadique. Conception réactive avec prise en charge du mode sombre.
Composant d’intégration du support Neumorphism
Un composant multimédia d’intégration multimédia neumorphe pour les sites Web d’entreprise, avec un design réactif et une prise en charge du thème sombre utilisant des couleurs complémentaires.