Composant Composants multimédias
Composant multimédia 3D pour les médias sociaux avec une palette de couleurs complémentaire, une complexité modérée et une prise en charge du thème sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex justify-center items-center p-4">
<div class="bg-gradient-to-br from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-900 rounded-3xl shadow-2xl p-6 lg:p-10 transform rotate-y-12 hover:rotate-y-0 transition-transform duration-700 ease-in-out relative overflow-hidden max-w-lg w-full">
<!-- 3D elements for depth -->
<div class="absolute top-0 left-0 w-full h-full bg-black opacity-10 rounded-3xl transform translateZ(-10px)"></div>
<div class="absolute bottom-0 right-0 w-full h-full bg-white opacity-10 rounded-3xl transform translateZ(-20px)"></div>
<div class="relative z-10">
<div class="flex items-center mb-6">
<img class="w-16 h-16 rounded-full border-4 border-amber-300 dark:border-amber-500 shadow-lg transform translateZ(15px)" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div class="ml-4">
<p class="text-white text-xl font-bold transform translateZ(10px)">John Doe</p>
<p class="text-amber-200 dark:text-amber-400 text-sm transform translateZ(10px)">@john_doe_official</p>
</div>
</div>
<div class="relative w-full h-64 rounded-xl overflow-hidden shadow-xl mb-6 transform translateZ(5px)">
<img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="Post Image">
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
<svg class="h-16 w-16 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
<p class="text-white text-lg mb-6 leading-relaxed transform translateZ(10px)">
Excited to share my latest project! It was a challenging but rewarding experience. #webdesign #creative #tailwindcss
</p>
<div class="flex justify-between items-center text-white">
<div class="flex items-center space-x-4">
<div class="flex items-center transform translateZ(8px)">
<svg class="h-8 w-8 text-red-300 dark:text-red-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span class="ml-1 text-lg">2.5K</span>
</div>
<div class="flex items-center transform translateZ(8px)">
<svg class="h-8 w-8 text-green-300 dark:text-green-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M18 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM20 8H4V6h16v2zm0 3H4V9h16v2zm0 3H4v-2h16v2z"/>
</svg>
<span class="ml-1 text-lg">450</span>
</div>
</div>
<button class="bg-amber-400 hover:bg-amber-500 text-gray-800 font-bold py-3 px-6 rounded-full shadow-lg transform translateZ(8px) hover:scale-105 transition duration-300">
Share
</button>
</div>
</div>
</div>
</div>Composants associés
Playful_Booking_Media_Component
Un composant multimédia simple, ludique et réactif pour les systèmes de réservation, avec une palette de couleurs triadique, des éléments arrondis et la prise en charge du mode sombre.
Composant Composants multimédias
Un composant multimédia conçu avec le style skeuomorphism à l’aide de Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
Composant Composants multimédias
Un composant de médias sociaux complexe, réactif et compatible avec le mode sombre avec un style Glassmorphism utilisant des couleurs vives.