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.
HTML Code
<div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen flex items-center justify-center font-mono">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-600 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
<div class="relative" style="padding-bottom: 56.25%;">
<iframe class="absolute top-0 left-0 w-full h-full" 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="p-6 bg-yellow-300 dark:bg-yellow-700 text-purple-800 dark:text-purple-200">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Rad Video Title</h3>
<span class="text-sm">5:32</span>
</div>
<p class="text-sm mb-4">
Get ready to groove with this tubular content! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus interdum, sem quis dictum finibus, magna nisl bibendum felis.
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-purple-800 dark:border-purple-200 mr-3">
<span class="text-sm font-semibold">Duke Silver</span>
</div>
</div>
</div>
</div>Composants associés
Composant d’intégration de média
Composant d’intégration multimédia avec micro-interactions, effets réactifs et prise en charge du thème sombre. Pas besoin de Javascript.
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
Un composant d’intégration multimédia rétro/vintage conçu avec la nostalgie des années 80 et 90. Il dispose d’un style réactif et d’une prise en charge du mode sombre avec Tailwind CSS.