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 multimédia - Tons de terre minimalistes
Un composant multimédia minimaliste pour les tableaux de bord, avec un design réactif et une prise en charge du thème sombre, en utilisant des tons de terre. Il affiche un lecteur vidéo, un titre, une description et des informations sur la chaîne.
Composant d’intégration de média rétro
Composant d’intégration de médias rétro / vintage pour les sites Web d’entreprise / d’entreprise avec schéma de couleurs triadique et prise en charge réactive du thème sombre.
Brutalist_Retro_Media_Embed_E-commerce
Un composant d’intégration multimédia complexe, réactif et de style brutaliste pour le commerce électronique, avec un contraste élevé, une palette de couleurs rétro, la prise en charge du mode sombre et de multiples éléments interactifs pour la présentation des produits.