Curseur de carrousel de neumorphisme
Composant de curseur de carrousel réactif avec style Neumorphism, palette de couleurs pastel, complexité modérée, objectif de médias sociaux et prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl neumorphism-light dark:neumorphism-dark">
<div class="text-center text-gray-700 dark:text-gray-300 mb-6">
<h2 class="text-2xl font-semibold">Social Media Carousel</h2>
</div>
<div class="relative">
<div class="overflow-hidden rounded-lg">
<div class="flex transition-transform duration-500 ease-in-out">
<!-- Carousel Item 1 -->
<div class="w-full flex-shrink-0">
<img src="https://picsum.photos/400/250?random=1" alt="Carousel Image 1" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-300 dark:border-pink-700">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">This is a great social media post! #tailwind #neumorphism</p>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="w-full flex-shrink-0">
<img src="https://picsum.photos/400/250?random=2" alt="Carousel Image 2" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-300 dark:border-purple-700">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">Enjoying the pastel vibes! ✨ #pastelaesthetic</p>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="w-full flex-shrink-0">
<img src="https://picsum.photos/400/250?random=3" alt="Carousel Image 3" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-green-300 dark:border-green-700">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">Learning about Neumorphism. So cool! #uidesign</p>
</div>
</div>
</div>
</div>
<!-- Navigation Dots (optional, requires JS for full functionality) -->
<div class="flex justify-center mt-4 space-x-2">
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
</div>
</div>
</div>
</div>
<style>
.neumorphism-light {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphism-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>Composants associés
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.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif avec prise en charge du mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript. Il présente une mise en page simple avec des couleurs vives pour la diapositive active, adaptée au blog ou à la consommation de contenu.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif conçu dans un style brutaliste à l’aide de Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles et la prise en charge des thèmes sombres.