Composant Cartes
Un composant de cartes réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
<div class="max-w-6xl w-full mx-auto sm:px-6 lg:px-8">
<div class="mt-8 overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2 items-center bg-white dark:bg-gray-800 overflow-hidden shadow transform transition-all duration-300 perspective-1000">
<div class="p-6">
<div class="flex items-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500 dark:text-gray-400"><path d="M12 12l-2 10l-4 -14l9 -4 4 10L20 12 12 12z"></path></svg>
<div class="ml-4 text-lg leading-7 font-semibold"><a href="#" class="underline text-gray-900 dark:text-white">Interactive Map</a></div>
</div>
<div class="ml-12">
<div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
Explore locations with our interactive 3D map. Discover new places and get directions easily.
</div>
</div>
</div>
<div class="relative w-full h-64 md:h-auto" style="transform: translateZ(20px);">
<img src="https://picsum.photos/seed/map-placeholder/600/400" alt="Map Placeholder" class="absolute inset-0 w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Retro Maps
Un composant de cartes simple, réactif et compatible avec le mode sombre, avec une esthétique rétro/vintage, une palette de couleurs vives et un objectif professionnel/d’entreprise, construit avec Tailwind CSS.
Cyberpunk_Gaming_Maps_Component
Un composant de cartes simple et réactif sur le thème du cyberpunk pour les interfaces de jeu, avec des arrière-plans sombres, des accents néon et une palette de couleurs analogue. Inclut la prise en charge du mode sombre.
Composant Cartes
Un composant Maps doté d’un design glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.