Composant d’intégration du support Neumorphism
Un composant multimédia d’intégration multimédia neumorphe pour les sites Web d’entreprise, avec un design réactif et une prise en charge du thème sombre utilisant des couleurs complémentaires.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-900 p-10">
<div class="neumorphic-card bg-gray-300 dark:bg-gray-800 p-8 rounded-xl w-full max-w-4xl">
<div class="flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
<!-- Media Embed -->
<div class="flex-1 neumorphic-inset p-4 rounded-lg overflow-hidden">
<iframe class="w-full aspect-video rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
</div>
<!-- Content Area -->
<div class="flex-1 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Media Title</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">This is a description of the media content. It provides context and details about the video or audio being embedded. The design uses subtle shadows and highlights to create the neumorphic effect, visually pushing the content forward.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-12 h-12 rounded-full mr-4 neumorphic-avatar" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Author Name</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Date Published</p>
</div>
</div>
<div class="mt-6 flex space-x-4">
<button class="neumorphic-button text-gray-800 dark:text-gray-200 font-semibold py-2 px-6 rounded-full hover:scale-105 transition duration-200">Learn More</button>
<button class="neumorphic-button text-gray-800 dark:text-gray-200 font-semibold py-2 px-6 rounded-full hover:scale-105 transition duration-200">Share</button>
</div>
</div>
</div>
</div>
</div>
<style>
.neumorphic-card {
box-shadow: 9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5);
}
.dark .neumorphic-card {
box-shadow: 9px 9px 16px rgb(0,0,0,.6), -9px -9px 16px rgba(30,30,30, .5);
}
.neumorphic-inset {
box-shadow: inset 5px 5px 12px rgb(163,177,198,.6), inset -5px -5px 12px rgba(255,255,255, .5);
}
.dark .neumorphic-inset {
box-shadow: inset 5px 5px 12px rgb(0,0,0,.6), inset -5px -5px 12px rgba(30,30,30, .5);
}
.neumorphic-avatar {
box-shadow: 3px 3px 7px rgb(163,177,198,.6), -3px -3px 7px rgba(255,255,255, .5);
}
.dark .neumorphic-avatar {
box-shadow: 3px 3px 7px rgb(0,0,0,.6), -3px -3px 7px rgba(30,30,30, .5);
}
.neumorphic-button {
box-shadow: 5px 5px 10px rgb(163,177,198,.6), -5px -5px 10px rgba(255,255,255, .5);
transition: all 0.2s ease-in-out;
}
.neumorphic-button:not(:active):hover {
box-shadow: 7px 7px 14px rgb(163,177,198,.7), -7px -7px 14px rgba(255,255,255, .6);
}
.dark .neumorphic-button {
box-shadow: 5px 5px 10px rgb(0,0,0,.6), -5px -5px 10px rgba(30,30,30, .5);
}
.dark .neumorphic-button:not(:active):hover {
box-shadow: 7px 7px 14px rgb(0,0,0,.7), -7px -7px 14px rgba(30,30,30, .6);
}
.neumorphic-button:active {
box-shadow: inset 3px 3px 7px rgb(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255, .5);
}
.dark .neumorphic-button:active {
box-shadow: inset 3px 3px 7px rgb(0,0,0,.6), inset -3px -3px 7px rgba(30,30,30, .5);
}
</style>Composants associés
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec un design Glassmorphism, des couleurs de terre et une prise en charge du mode sombre, conçu avec Tailwind CSS pour les cas d’utilisation des médias sociaux. Comprend un effet de verre dépoli et utilise des images/avatars de substitution.
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 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.