3D_Neon_Maps_Component
Un composant complexe de cartes inspiré de la 3D avec une palette de couleurs néon/électrique, adapté à un portfolio pour présenter des lieux ou des projets. Il présente des éléments lumineux, une interface utilisateur interactive riche et une réactivité totale avec la prise en charge du mode sombre.
HTML Code
<div class="relative bg-gradient-to-br from-gray-900 to-black p-4 sm:p-8 md:p-12 min-h-screen flex items-center justify-center font-sans dark:from-zinc-950 dark:to-black">
<div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGZpbHRlciBpZD0icGVyc2lzdGVudC1ub2lzZSI+CiAgICAgIDxmZXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjgiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjAiIHN0aXRjaFRpbGVzPSJub2lzdVBhZGRpbmciLz4KICAgICAgPGZlYXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjE1IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIxIiBzdGl0Y2hUaWxlcz0ibm9pc3VBZGRpbmciLz4KICAgICAgPGZlYXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjA1IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIzIiBzdGl0Y2hUaWxlcz0ibm9pc3VBZGRpbmciLz4KICAgIDwvZmlsdGVyPgogICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icHVycGxlIiBmaWx0ZXI9InVybCgjcGVyc2lzdGVudC1ub2lzZSkiLz4KPC9zdmc+'); background-size: cover; background-repeat: no-repeat; mask-image: radial-gradient(circle at center, black 0%, transparent 70%);"></div>
<div class="relative z-10 w-full max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Controls Panel (3D Effect) -->
<div class="col-span-1 rounded-2xl p-6 lg:p-8 shadow-2xl flex flex-col gap-6
bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1d] border-b-2 border-l-2 border-[#8A2BE2] transform perspective-1000 rotate-x-6 rotate-y-2 translate-z-10
hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0 transition-all duration-500 ease-in-out
dark:from-[#08081a] dark:to-[#02020a] dark:border-[#FF1493]">
<!-- Header -->
<div class="flex items-center justify-between pb-4 border-b-2 border-dotted border-[#6A0DAD] dark:border-[#FF69B4]">
<h2 class="text-2xl sm:text-3xl font-extrabold text-[#7FFFD4] dark:text-[#00FFFF] drop-shadow-lg [text-shadow:0_0_8px_#00FFFF]">GRID LOCATIONS</h2>
<button class="p-2 rounded-full bg-[#39FF14] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
</button>
</div>
<!-- Search Bar -->
<div class="relative">
<input type="text" placeholder="Search locations..." class="w-full p-3 pl-10 rounded-xl bg-[#0f0f1d] border border-[#39FF14] text-[#7FFFD4] placeholder-[#00FFFF] text-lg outline-none focus:ring-2 focus:ring-[#39FF14] transition-all duration-300 shadow-inner glow-sm-input
dark:bg-[#02020a] dark:border-[#FF69B4] dark:text-[#FF1493] dark:placeholder-[#FF1493]">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#39FF14] dark:text-[#FF69B4]" fill="currentColor" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</div>
<!-- Location List -->
<div class="overflow-y-auto flex-grow scrollbar-hide space-y-4 pr-1">
<!-- Location Item -->
<div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#00FFFF] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF1493]">
<h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Cyber City Outpost</h3>
<p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">42 Neo-Tokyo St., Sector 7G</p>
<div class="flex justify-between items-center">
<span class="text-xs font-semibold text-[#39FF14] dark:text-[#FF69B4] glow-text">ONLINE</span>
<div class="flex -space-x-1 overflow-hidden pointer-events-none">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#8A2BE2] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
dark:from-[#02020a] dark:to-[#08081a] dark:border-[#00FFFF]">
<h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Arcade Nebula Zone</h3>
<p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">Level 99, Metaverse Plaza</p>
<div class="flex justify-between items-center">
<span class="text-xs font-semibold text-[#FF1493] glow-text">OFFLINE</span>
<div class="flex -space-x-1 overflow-hidden pointer-events-none">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#8A2BE2] dark:ring-[#00FFFF] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#8A2BE2] dark:ring-[#00FFFF] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#39FF14] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF69B4]">
<h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Quantum Data Hub</h3>
<p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">Cloud Layer Alpha-7</p>
<div class="flex justify-between items-center">
<span class="text-xs font-semibold text-[#7FFFD4] dark:text-[#FF1493] glow-text">ONLINE</span>
<div class="flex -space-x-1 overflow-hidden pointer-events-none">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/27.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
</div>
</div>
<!-- Filters/Actions -->
<div class="pt-4 border-t-2 border-dotted border-[#6A0DAD] dark:border-[#FF69B4]">
<div class="flex justify-around items-center text-sm font-semibold text-[#7FFFD4] dark:text-[#00FFFF]">
<button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
<svg class="w-6 h-6 mb-1 text-[#39FF14] dark:text-[#FF69B4]" fill="currentColor" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></svg>
Filters
</button>
<button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
<svg class="w-6 h-6 mb-1 text-[#00FFFF] dark:text-[#FF1493]" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path></svg>
Status
</button>
<button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
<svg class="w-6 h-6 mb-1 text-[#8A2BE2] dark:text-[#00FFFF]" fill="currentColor" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg>
Export
</button>
</div>
</div>
</div>
<!-- Main Map (3D Effect) -->
<div class="col-span-1 lg:col-span-2 rounded-2xl p-4 lg:p-6 shadow-2xl relative overflow-hidden flex items-center justify-center
bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1d] border-t-2 border-r-2 border-[#39FF14] transform perspective-1000 rotate-x-3 rotate-y-[-2deg] translate-z-10
hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0 transition-all duration-500 ease-in-out
dark:from-[#08081a] dark:to-[#02020a] dark:border-[#00FFFF]">
<div class="absolute inset-0 bg-black opacity-30 dark:opacity-50 blur-lg pointer-events-none"></div>
<div class="w-full h-full relative z-10 flex items-center justify-center p-2">
<img src="https://picsum.photos/1200/800?random=1" alt="Placeholder Map" class="object-cover w-full h-full rounded-xl opacity-70 transform scale-10 hover:scale-105 transition-all duration-500 ease-out shadow-neon-map dark:shadow-neon-map-dark">
<!-- Interactive Map Markers (Example) -->
<div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#00FFFF] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
<span class="text-xs font-bold text-gray-900">A</span>
</div>
<div class="absolute top-3/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#39FF14] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
<span class="text-xs font-bold text-gray-900">B</span>
</div>
<div class="absolute top-1/2 right-1/4 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#FF1493] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
<span class="text-xs font-bold text-gray-900">C</span>
</div>
<!-- Overlay grid for 3D effect -->
<div class="absolute inset-0 pointer-events-none opacity-20" style="background-image: linear-gradient(0deg, transparent 24%, rgba(57, 255, 20, 0.1) 25%, rgba(57, 255, 20, 0.1) 26%, transparent 27%, transparent 74%, rgba(57, 255, 20, 0.1) 75%, rgba(57, 255, 20, 0.1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(57, 255, 20, 0.1) 25%, rgba(57, 255, 20, 0.1) 26%, transparent 27%, transparent 74%, rgba(57, 255, 20, 0.1) 75%, rgba(57, 255, 20, 0.1) 76%, transparent 77%, transparent); background-size: 50px 50px;"></div>
</div>
<!-- Map Controls -->
<div class="absolute bottom-4 right-4 flex flex-col gap-2 p-2 rounded-xl bg-gradient-to-t from-[#0f0f1d] to-[#1a1a2e] border border-[#00FFFF] shadow-xl glow-md
dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF1493]">
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-[#39FF14] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-[#FF1493] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M5 13h14v-2H5v2z"></path></svg>
</button>
</div>
<!-- Animated Pulse effect (CSS only) -->
<div class="absolute inset-0 pointer-events-none rounded-2xl" style="box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; animation: pulse-glow-border 3s infinite alternate;"></div>
</div>
</div>
</div>
<!-- Custom Styles for 3D and Neon Effects (embed in <style> or a CSS file) -->
<style>
/* Scrolbar hide */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide { /* For IE, Edge and Firefox */
-ms-overflow-style: none;
scrollbar-width: none;
}
/* 3D Perspective + Rotation for Panels */
.perspective-1000 {
perspective: 1000px;
}
.rotate-x-6 {
transform: rotateX(6deg);
}
.rotate-y-2 {
transform: rotateY(2deg);
}
.rotate-y-\[-2deg\] {
transform: rotateY(-2deg);
}
.translate-z-10 {
transform: translateZ(10px);
}
/* Neon Glow Effects */
.glow-md {
box-shadow: 0 0 10px rgba(57, 255, 20, 0.7), 0 0 20px rgba(57, 255, 20, 0.5);
}
.dark .glow-md {
box-shadow: 0 0 10px rgba(255, 20, 147, 0.7), 0 0 20px rgba(255, 20, 147, 0.5);
}
.glow-sm {
box-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(138, 43, 226, 0.6);
}
.dark .glow-sm {
box-shadow: 0 0 5px rgba(255, 20, 147, 0.8), 0 0 10px rgba(0, 255, 255, 0.6);
}
.glow-sm-input {
box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}
.dark .glow-sm-input {
box-shadow: 0 0 8px rgba(255, 105, 180, 0.5);
}
.glow-sm-btn {
box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}
.dark .glow-sm-btn {
box-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
}
.glow-sm-avatar {
box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}
.dark .glow-sm-avatar {
box-shadow: 0 0 8px rgba(255, 20, 147, 0.8);
}
.glow-text {
text-shadow: 0 0 5px rgba(57, 255, 20, 0.8), 0 0 10px rgba(57, 255, 20, 0.6);
}
.dark .glow-text {
text-shadow: 0 0 5px rgba(255, 105, 180, 0.8), 0 0 10px rgba(255, 105, 180, 0.6);
}
/* Map specific glow */
.shadow-neon-map {
filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.7)) drop-shadow(0 0 30px rgba(138, 43, 226, 0.5));
}
.dark .shadow-neon-map-dark {
filter: drop-shadow(0 0 15px rgba(255, 20, 147, 0.7)) drop-shadow(0 0 30px rgba(0, 255, 255, 0.5));
}
.glow-marker {
box-shadow: 0 0 10px rgba(0, 255, 255, 1), 0 0 20px rgba(0, 255, 255, 0.8);
}
.glow-marker:nth-child(2) { /* Example different marker color */
box-shadow: 0 0 10px rgba(57, 255, 20, 1), 0 0 20px rgba(57, 255, 20, 0.8);
}
.glow-marker:nth-child(3) { /* Example different marker color */
box-shadow: 0 0 10px rgba(255, 20, 147, 1), 0 0 20px rgba(255, 20, 147, 0.8);
}
/* Pulse animation for the map border glow */
@keyframes pulse-glow-border {
0% { box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; }
50% { box-shadow: 0 0 120px 40px rgba(0,255,255,0.5) inset; opacity: 0.2; }
100% { box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; }
}
.dark @keyframes pulse-glow-border {
0% { box-shadow: 0 0 100px 30px rgba(255,20,147,0.3) inset; opacity: 0.1; }
50% { box-shadow: 0 0 120px 40px rgba(255,20,147,0.5) inset; opacity: 0.2; }
100% { box-shadow: 0 0 100px 30px rgba(255,20,147,0.3) inset; opacity: 0.1; }
}
/* For responsiveness, adjust 3D transforms on smaller screens if needed */
@media (max-width: 1023px) {
.lg\:rotate-x-0 {
transform: rotateX(0) !important;
}
.lg\:rotate-y-0 {
transform: rotateY(0) !important;
}
.lg\:translate-z-0 {
transform: translateZ(0) !important;
}
.lg\:col-span-2 {
grid-column: span 1 / span 1 !important;
}
}
</style>Composants associés
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.
Composant Retro Maps
Un composant de cartes simple et réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, utilisant Tailwind CSS. Convient aux blogs ou aux sites Web de contenu.
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.