Composant d’intégration de média skeuomorphe
Un composant d’intégration multimédia réactif avec une conception Skeuomorphism, une palette de couleurs analogue et une complexité modérée pour les sites Web d’entreprise. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
<div class="relative pb-9/16 mb-4">
<iframe class="absolute inset-0 w-full h-full rounded-md shadow-inner" 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 items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 ring-2 ring-gray-400 dark:ring-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Skeuomorphic Media Title</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Channel Name</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">
This is a description of the media content. It provides a brief overview
and context for the embedded video or audio. The design features subtle
shadows and gradients to mimic a tangible, real-world object.
</p>
</div>Composants associés
Composant d’intégration de média rétro
Un composant d’intégration multimédia réactif avec un design rétro/vintage, des couleurs vives, une complexité modérée et une prise en charge du mode sombre, adapté aux plateformes de commerce électronique.
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec prise en charge des thèmes sombres, une mise en page complexe et une palette de couleurs complémentaire, conçu pour les tableaux de bord.
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.