Skeuomorphic_Dating_Carousel
Un composant de curseur de carrousel simple et réactif avec des éléments de conception skeuomorphes et une palette de couleurs analogue, adapté aux plateformes de rencontres ou sociales. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-300 via-pink-300 to-red-300 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 p-4 font-sans">
<div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-4 border-gray-200 dark:border-gray-700 overflow-hidden" style="box-shadow: inset 0px 4px 8px rgba(0,0,0,0.1), inset 0px -4px 8px rgba(255,255,255,0.7), 0px 10px 20px rgba(0,0,0,0.2);">
<div class="p-6 sm:p-8 md:p-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.2);">
Find Your Match
</h2>
<!-- Carousel Item (static for this HTML-only example, would be dynamic with JS) -->
<div class="flex flex-col items-center text-center">
<div class="relative w-48 h-48 sm:w-64 sm:h-64 md:w-72 md:h-72 rounded-full overflow-hidden mb-6 filter drop-shadow-lg" style="box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1), inset 0px -2px 4px rgba(255,255,255,0.7), 0px 6px 12px rgba(0,0,0,0.2);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover border-4 border-white dark:border-gray-800 rounded-full grayscale hover:grayscale-0 transition-all duration-300 ease-in-out">
<div class="absolute inset-0 rounded-full border-4 border-purple-400 dark:border-purple-600 animate-pulse" style="filter: blur(2px);"></div>
</div>
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.4), -1px -1px 2px rgba(0,0,0,0.1);">
Jessica, 28
</h3>
<p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 mb-4 px-4">
Passionate traveler, dog lover, and always up for an adventure! Looking for someone to share laughs with.
</p>
</div>
<!-- Navigation Buttons (skeuomorphic design) -->
<div class="flex justify-between items-center mt-8 px-4" role="group" aria-label="Carousel Navigation">
<button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
<span class="sr-only">Previous Profile</span>
</button>
<button class="relative p-3 rounded-full bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 text-white shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" />
</svg>
<span class="sr-only">Add to Favorites</span>
</button>
<button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
<span class="sr-only">Next Profile</span>
</button>
</div>
<!-- Indicators (Skeuomorphic dots) -->
<div class="flex justify-center space-x-2 mt-8">
<div class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-700 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
<div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
<div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
</div>
</div>
</div>
</div>Composants associés
Composant de curseur de carrousel
Implémentez un composant Web Carrousel Slider Component avec le style de conception « Neumorphisme - Un style d’interface utilisateur doux qui crée des éléments semblant extruder de l’arrière-plan à l’aide d’ombres subtiles » en utilisant le schéma de couleurs « Complémentaire - Couleurs opposées les unes aux autres sur la roue chromatique » et le niveau de complexité « Complexe - Interface riche avec plusieurs éléments interactifs », à l’objectif « Portfolio - Pour présenter le travail ou les produits » à l’aide de Tailwind CSS. Créez un design réactif avec la prise en charge du thème sombre. Aucun code JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Si vous avez besoin d’images, utilisez picsum.photos pour les images et randomuser.me pour les avatars.
Neumorphism E-commerce Carrousel Slider
Un composant de curseur de carrousel neumorphique réactif avec prise en charge du thème sombre pour le commerce électronique, à l’aide de Tailwind CSS. Il présente une palette de couleurs complémentaire. Aucun JavaScript n’est utilisé.
Composant de curseur de carrousel
Un composant de curseur de carrousel complexe et réactif avec une palette de couleurs triadique pour les entreprises/professionnels, conçu pour la présentation de données météorologiques/climatiques. Inclut la prise en charge du mode sombre et utilise le HTML sémantique.