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
Un composant d’intégration multimédia conçu pour le commerce électronique avec un style de conception 3D, une palette de couleurs complémentaire et une mise en page réactive qui prend en charge le mode sombre.
Composant d’intégration de média rétro
Un composant multimédia réactif avec un design « Rétro/Vintage », inspiré de l’esthétique des années 80/90 comme les vieux moniteurs CRT et les lecteurs magnétoscopes. Il utilise une palette de couleurs complémentaires de sarcelle et d’orange sur une base gris ardoise, adaptée aux sites Web « Business/Corporate ». Le composant présente une complexité modérée avec des effets de survol sur le bouton de lecture et la vignette multimédia, une fausse animation lumineuse REC et des éléments de contrôle décoratifs non fonctionnels. Il inclut la prise en charge du thème sombre à l’aide du préfixe 'dark :' de Tailwind. La zone multimédia est conçue pour un rapport d’aspect de 16:9 (nécessite le plugin de rapport d’aspect Tailwind ou une solution de repli CSS comme l’astuce du rembourrage inférieur). L’image de remplacement de picsum.photos est utilisée.
Composant d’intégration de média
Un composant d’intégration multimédia réactif doté d’une esthétique rétro/vintage, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.