Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu avec le style Neumorphism dans Tailwind CSS, qui prend en charge le mode sombre.
HTML Code
<div class="flex flex-col items-center mb-8 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg transition-shadow duration-300 ease-in-out hover:shadow-xl">
<div class="relative w-full h-0 pb-56 overflow-hidden rounded-lg shadow-inner bg-gray-200 dark:bg-gray-800">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-sm" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
<div class="ml-4">
<h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h5>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
</div>
<style>
/* Neumorphism styles */
.bg-white {
background-color: #f0f0f0;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
-10px -10px 20px rgba(255, 255, 255, 1);
}
.dark .bg-gray-900 {
background-color: #1c1c1c;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5),
inset -10px -10px 20px rgba(255, 255, 255, 0.1);
}
.shadow-inner {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.9);
}
</style>Composants associés
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec prise en charge du thème sombre pour les sites de blog/contenu, stylisé selon les principes de conception matérielle, une palette de couleurs triadique et une complexité modérée. Comprend un espace réservé vidéo intégré et des liens vers des articles connexes.
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 de média
Un composant d’intégration multimédia simple et réactif à l’esthétique cyberpunk et bleu d’entreprise, conçu pour les interfaces de médias sociaux avec prise en charge du mode sombre.