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 reattivo progettato con uno stile di neumorfismo, con colori vivaci e un'interfaccia interattiva adatta per applicazioni dashboard.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale progettato per l'e-commerce con uno stile di progettazione 3D, una combinazione di colori complementari e un layout reattivo che supporta la modalità scura.
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.