Componente di incorporamento multimediale
Un componente di incorporamento multimediale reattivo progettato con lo stile Neumorfismo in Tailwind CSS, che supporta la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente di incorporamento multimediale
Un componente di incorporamento multimediale in stile neumorfismo adatto per il consumo di blog e contenuti, caratterizzato da una combinazione di colori triadica. Design reattivo con supporto per la modalità oscura.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale semplice e reattivo con design 3D in scala di grigi e supporto per la modalità scura, adatto per siti Web aziendali. Utilizza Tailwind CSS per lo stile.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale semplice e reattivo con un'estetica cyberpunk e blu aziendale, progettato per le interfacce dei social media con supporto per la modalità oscura.