3D_Vibrant_Simple_Social_Carousel
Un composant de curseur de carrousel simple, dynamique et réactif inspiré de la 3D pour les interfaces de médias sociaux, avec prise en charge du mode sombre.
HTML Code
<div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-teal-950 rounded-lg shadow-xl overflow-hidden">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center text-purple-800 dark:text-purple-300 mb-8 drop-shadow-md">What's Happening?</h2>
<!-- Carousel Container (simplified for static HTML, typically JS driven) -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 transform perspective-1000">
<!-- Card 1 -->
<div class="col-span-1 transform rotateY-10 scale-95 md:hover:rotateY-0 md:hover:scale-100 transition-all duration-500 ease-in-out bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-purple-500 dark:border-purple-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
<div class="absolute inset-0 bg-gradient-to-br from-purple-400/20 to-pink-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
<div class="flex items-center mb-4 z-10">
<img class="w-12 h-12 rounded-full ring-2 ring-purple-400 dark:ring-purple-600 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-lg text-purple-700 dark:text-purple-300">Alice Johnson</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@alice_j</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Just launched my new project! Super excited for feedback. 🎉 Check it out!"</p>
<img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1025/400/250" alt="Post Image">
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 12K Likes</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 345 Comments</span>
</div>
</div>
<!-- Card 2 (Center) -->
<div class="col-span-1 transform scale-105 md:hover:scale-110 md:hover:rotateY-0 transition-all duration-500 ease-in-out z-20 bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-teal-500 dark:border-teal-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
<div class="absolute inset-0 bg-gradient-to-br from-teal-400/20 to-purple-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
<div class="flex items-center mb-4 z-10">
<img class="w-12 h-12 rounded-full ring-2 ring-teal-400 dark:ring-teal-600 mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-lg text-teal-700 dark:text-teal-300">Mark Davis</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@mark_d</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Amazing sunset view from my balcony tonight! Truly breathtaking. #NatureLover"</p>
<img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1016/400/250" alt="Post Image">
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 2.5K Likes</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 88 Comments</span>
</div>
</div>
<!-- Card 3 -->
<div class="col-span-1 transform -rotateY-10 scale-95 md:hover:rotateY-0 md:hover:scale-100 transition-all duration-500 ease-in-out bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-pink-500 dark:border-pink-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
<div class="absolute inset-0 bg-gradient-to-br from-pink-400/20 to-teal-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
<div class="flex items-center mb-4 z-10">
<img class="w-12 h-12 rounded-full ring-2 ring-pink-400 dark:ring-pink-600 mr-4" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-lg text-pink-700 dark:text-pink-300">Sophia Lee</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@sophia_l</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Enjoying a perfect cup of coffee with a good book. Simple pleasures! ☕📚"</p>
<img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1084/400/250" alt="Post Image">
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 987 Likes</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 210 Comments</span>
</div>
</div>
</div>
<!-- Navigation (can be added with JS for actual carousel functionality) -->
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
<div class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></div>
<div class="w-3 h-3 rounded-full bg-pink-400 dark:bg-pink-500 opacity-60"></div>
<div class="w-3 h-3 rounded-full bg-teal-400 dark:bg-teal-500 opacity-60"></div>
</div>
<!-- Subtle 3D background elements -->
<div class="absolute top-0 left-0 w-32 h-32 bg-purple-400/20 dark:bg-purple-600/30 rounded-full blur-xl -translate-x-1/4 -translate-y-1/4"></div>
<div class="absolute bottom-0 right-0 w-48 h-48 bg-pink-400/20 dark:bg-pink-600/30 rounded-full blur-xl translate-x-1/4 translate-y-1/4"></div>
</div>Composants associés
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif pour le commerce électronique avec prise en charge du mode sombre. Il présente des images de produits, des noms, des prix et des boutons d’ajout au panier. Le design utilise une palette de couleurs complémentaires adaptée au mode sombre, améliorant le confort visuel et la présentation du produit.
Composant de curseur de carrousel
Un composant de curseur de carrousel minimaliste conçu pour les blogs et la consommation de contenu, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif conçu pour les tableaux de bord, avec des micro-interactions et des couleurs vives avec prise en charge du mode sombre.