Composant de cartes ludiques pour les jeux
Un composant de carte simple, ludique et réactif adapté aux sites Web de jeux, avec des tons de bijoux vifs, des éléments arrondis et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-gradient-to-br from-purple-200 to-indigo-200 dark:from-purple-900 dark:to-indigo-950 rounded-3xl shadow-2xl p-6 sm:p-8 transform hover:scale-105 transition duration-300 ease-in-out border-4 border-white dark:border-gray-700 overflow-hidden">
<div class="flex flex-col md:flex-row gap-6 sm:gap-8 items-center">
<div class="flex-shrink-0 w-full md:w-1/2 p-2 bg-white dark:bg-gray-800 rounded-2xl shadow-lg transform hover:rotate-2 transition duration-200 ease-in-out">
<img src="https://picsum.photos/600/400?random=1" alt="Game Map Screenshot" class="w-full h-auto rounded-xl object-cover border-2 border-indigo-400 dark:border-indigo-600 shadow-md">
</div>
<div class="flex-grow text-center md:text-left">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-indigo-800 dark:text-indigo-300 mb-3 sm:mb-4 leading-tight tracking-tight drop-shadow-lg">
Explore <span class="text-fuchsia-600 dark:text-fuchsia-400">Mystic</span> Realms
</h2>
<p class="text-lg sm:text-xl text-indigo-700 dark:text-indigo-200 mb-6 sm:mb-8 max-w-lg mx-auto md:mx-0">
Embark on epic quests and discover hidden treasures across vibrant landscapes. Your next adventure awaits!
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
<button class="px-8 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full font-bold text-lg shadow-lg transform hover:scale-105 hover:rotate-1 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700">
View All Maps
</button>
<button class="px-8 py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full font-bold text-lg shadow-lg transform hover:scale-105 hover:-rotate-1 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700">
Start Adventure
</button>
</div>
</div>
</div>
<div class="mt-8 sm:mt-10 pt-6 border-t-2 border-indigo-300 dark:border-indigo-800 text-center">
<h3 class="text-xl sm:text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Popular Zones</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
<div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
<img src="https://picsum.photos/100/100?random=2" alt="Zone 1" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
<p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Sunken City</p>
</div>
<div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
<img src="https://picsum.photos/100/100?random=3" alt="Zone 2" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
<p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Dragon's Peak</p>
</div>
<div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
<img src="https://picsum.photos/100/100?random=4" alt="Zone 3" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
<p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Whispering Woods</p>
</div>
<div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
<img src="https://picsum.photos/100/100?random=5" alt="Zone 4" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
<p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Crimson Wastes</p>
</div>
</div>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-indigo-700 dark:text-indigo-300 hover:text-emerald-500 dark:hover:text-emerald-400 font-semibold text-md sm:text-lg transition-colors duration-200">
See All Zones
<svg class="ml-2 w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
</div>
</div>
</div>Composants associés
Neon_Glow_Maps_Component
Un composant cartographique simple et réactif avec un effet néon/lueur, conçu pour les portfolios de photographie. Dispose de couleurs neutres froides, de la prise en charge du mode sombre et d’une image de carte de remplacement.
Composant Cartes
Un composant de carte complexe et dynamique pour les médias sociaux, avec des micro-interactions, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Cartes
Un composant Web conçu pour les interfaces de médias sociaux, doté d’un design brutaliste avec une palette de couleurs en niveaux de gris, adapté à l’affichage de cartes avec des emplacements marqués.