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
Composant d’intégration de médias réactifs avec style Glassmorphism, modèle de couleurs analogue et prise en charge du mode sombre pour la consommation de contenu.
Composant d’intégration de média
Un composant d’intégration multimédia doté d’un style de conception 3D pour plus de profondeur et d’engagement, d’effets réactifs et de prise en charge du mode sombre.
Composant d’intégration de média
Un composant d’intégration multimédia conçu avec des effets de glassmorphism, avec un design réactif adapté aux sites Web d’entreprise avec prise en charge du thème sombre.