Composant de mise en page de grille cyberpunk
Un composant de mise en page de grille simple et réactif avec une esthétique cyberpunk, adapté aux sites Web d’événements ou de conférences. Présente des arrière-plans sombres, des accents de néon lumineux et une palette de couleurs triadiques. Inclut la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-950 dark:bg-black text-lime-400 dark:text-cyan-400 p-4 sm:p-8 font-mono">
<!-- Grid Container -->
<div class="max-w-6xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Header/Title Section (Spanning Columns) -->
<div class="md:col-span-2 lg:col-span-3 mb-6">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-fuchsia-500 dark:text-fuchsia-400
tracking-tight leading-tight text-center sm:text-left drop-shadow-[0_0_8px_rgba(236,72,153,0.7)] dark:drop-shadow-[0_0_8px_rgba(236,72,153,0.5)]">
// NEON NEXUS CONFERENCE <span class="text-lime-400 dark:text-cyan-400">2077</span>
</h1>
<p class="text-lg sm:text-xl text-gray-400 dark:text-gray-500 text-center sm:text-left mt-2
drop-shadow-[0_0_3px_rgba(163,230,53,0.3)] dark:drop-shadow-[0_0_3px_rgba(45,212,255,0.3)]">
Unlocking the Future of Cybernetics & AI
</p>
</div>
<!-- Grid Item 1 -->
<div class="relative bg-gray-900 border border-fuchsia-600 dark:border-fuchsia-700
shadow-fuchsia-500/30 dark:shadow-fuchsia-700/20 shadow-lg p-6 rounded-lg overflow-hidden
before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-fuchsia-500/10 dark:before:bg-fuchsia-700/10
before:animate-pulse before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-fuchsia-500/50">
<div class="relative z-10">
<h2 class="text-2xl font-bold text-fuchsia-500 dark:text-fuchsia-400 mb-2
drop-shadow-[0_0_5px_rgba(236,72,153,0.7)] dark:drop-shadow-[0_0_5px_rgba(236,72,153,0.5)]">
<span class="text-lime-400 dark:text-cyan-400">//</span> REGISTRATION OPEN
</h2>
<p class="text-base text-gray-300 dark:text-gray-400 mb-4">Secure your spot for the premier event of the digital age. Limited slots available.</p>
<a href="#" class="inline-block bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-semibold py-2 px-4 rounded-md
transition-colors duration-300 transform scale-100 hover:scale-[1.05]
shadow-inner shadow-fuchsia-400/50 dark:shadow-fuchsia-800/50
border border-fuchsia-400 dark:border-fuchsia-800">
REGISTER NOW <span class="ml-1 text-xs">>>></span>
</a>
</div>
</div>
<!-- Grid Item 2 -->
<div class="relative bg-gray-900 border border-lime-500 dark:border-cyan-600
shadow-lime-500/30 dark:shadow-cyan-700/20 shadow-lg p-6 rounded-lg overflow-hidden
before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-lime-500/10 dark:before:bg-cyan-600/10
before:animate-pulse before:delay-200 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-lime-500/50 dark:hover:shadow-cyan-500/50">
<div class="relative z-10">
<h2 class="text-2xl font-bold text-lime-400 dark:text-cyan-400 mb-2
drop-shadow-[0_0_5px_rgba(163,230,53,0.7)] dark:drop-shadow-[0_0_5px_rgba(45,212,255,0.5)]">
<span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> MEET THE SPEAKERS
</h2>
<p class="text-base text-gray-300 dark:text-gray-400 mb-4">Visionaries and pioneers from the cutting edge of tech will share their insights.</p>
<div class="flex -space-x-2 overflow-hidden mb-4">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker 1">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker 2">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Speaker 3">
</div>
<a href="#" class="inline-block bg-lime-600 hover:bg-lime-700 text-gray-900 font-semibold py-2 px-4 rounded-md
transition-colors duration-300 transform scale-100 hover:scale-[1.05]
shadow-inner shadow-lime-400/50 dark:shadow-cyan-800/50
border border-lime-400 dark:border-cyan-800">
VIEW ALL <span class="ml-1 text-xs">>>></span>
</a>
</div>
</div>
<!-- Grid Item 3 -->
<div class="relative bg-gray-900 border border-cyan-500 dark:border-green-600
shadow-cyan-500/30 dark:shadow-green-700/20 shadow-lg p-6 rounded-lg overflow-hidden md:col-span-2 lg:col-span-1
before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-cyan-500/10 dark:before:bg-green-600/10
before:animate-pulse before:delay-400 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-cyan-500/50 dark:hover:shadow-green-500/50">
<div class="relative z-10">
<h2 class="text-2xl font-bold text-cyan-400 dark:text-green-400 mb-2
drop-shadow-[0_0_5px_rgba(45,212,255,0.7)] dark:drop-shadow-[0_0_5px_rgba(74,222,128,0.5)]">
<span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> EVENT SCHEDULE
</h2>
<p class="text-base text-gray-300 dark:text-gray-400 mb-4">Don't miss a single byte! Plan your immersion into the future.</p>
<ul class="list-none space-y-2 text-gray-200 dark:text-gray-300">
<li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">‣</span> Day 1: AI & Robotics Summit</li>
<li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">‣</span> Day 2: Cybernetics & Bio-Augmentation</li>
<li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">‣</span> Day 3: Future of Digital Society</li>
</ul>
<a href="#" class="inline-block mt-4 bg-cyan-600 hover:bg-cyan-700 text-gray-900 font-semibold py-2 px-4 rounded-md
transition-colors duration-300 transform scale-100 hover:scale-[1.05]
shadow-inner shadow-cyan-400/50 dark:shadow-green-800/50
border border-cyan-400 dark:border-green-800">
FULL SCHEDULE <span class="ml-1 text-xs">>>></span>
</a>
</div>
</div>
<!-- Grid Item 4 (Image Placeholder) -->
<div class="relative bg-gray-900 border border-fuchsia-600 dark:border-fuchsia-700
shadow-fuchsia-500/30 dark:shadow-fuchsia-700/20 shadow-lg rounded-lg overflow-hidden md:col-span-1 lg:col-span-1
before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-fuchsia-500/10 dark:before:bg-fuchsia-700/10
before:animate-pulse before:delay-600 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-fuchsia-500/50">
<div class="relative z-10">
<img src="https://picsum.photos/600/400?random=1" alt="Cyberpunk Cityscape" class="w-full h-auto object-cover rounded-md border border-fuchsia-500 dark:border-fuchsia-700 shadow-xl shadow-fuchsia-500/20 dark:shadow-fuchsia-700/10">
<div class="p-4">
<p class="text-sm text-gray-400 dark:text-gray-500 text-center">Connect, learn, innovate. #NeonNexus</p>
</div>
</div>
</div>
<!-- Grid Item 5 (Contact/Location) -->
<div class="relative bg-gray-900 border border-lime-500 dark:border-cyan-600
shadow-lime-500/30 dark:shadow-cyan-700/20 shadow-lg p-6 rounded-lg overflow-hidden md:col-span-1 lg:col-span-2
before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-lime-500/10 dark:before:bg-cyan-600/10
before:animate-pulse before:delay-800 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-lime-500/50 dark:hover:shadow-cyan-500/50">
<div class="relative z-10">
<h2 class="text-2xl font-bold text-lime-400 dark:text-cyan-400 mb-2
drop-shadow-[0_0_5px_rgba(163,230,53,0.7)] dark:drop-shadow-[0_0_5px_rgba(45,212,255,0.5)]">
<span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> GHOST CITY LOCALE
</h2>
<p class="text-base text-gray-300 dark:text-gray-400 mb-4">Experience the future in the heart of Neo-Tokyo virtual district.</p>
<ul class="list-none space-y-2 text-gray-200 dark:text-gray-300">
<li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">‣</span> Virtual Venue: 'The Glitch' - Sector 7</li>
<li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">‣</span> Dates: Nov 20-22, 2077</li>
<li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">‣</span> Contact: <a href="mailto:[email protected]" class="underline hover:text-white">[email protected]</a></li>
</ul>
<a href="#" class="inline-block mt-4 bg-lime-600 hover:bg-lime-700 text-gray-900 font-semibold py-2 px-4 rounded-md
transition-colors duration-300 transform scale-100 hover:scale-[1.05]
shadow-inner shadow-lime-400/50 dark:shadow-cyan-800/50
border border-lime-400 dark:border-cyan-800">
GET DIRECTIONS <span class="ml-1 text-xs">>>></span>
</a>
</div>
</div>
</div>
<!-- Footer (Optional) -->
<footer class="mt-12 text-center text-gray-600 dark:text-gray-700 text-sm">
<p>© 2077 Neon Nexus. All Digital Rights Reserved.</p>
</footer>
</div>Composants associés
Composant de mise en page de grille de divertissement
Une grille épurée et minimaliste inspirée de la typographie suisse/internationale pour les plateformes de divertissement et de médias. Dispose d’une palette de couleurs triadique, d’une réactivité et d’une prise en charge du mode sombre.
Grille CRM Cyberpunk
Un composant de mise en page de grille réactif pour les outils CRM/Business avec une esthétique néon cyberpunk-futuriste, avec des arrière-plans sombres et des couleurs chaudes d’accent de coucher de soleil. Comprend des éléments interactifs et la prise en charge du mode sombre.
Composant de mise en page de grille
Un composant de mise en page de grille minimaliste avec un design simple et épuré avec des effets réactifs et la prise en charge du thème sombre. Utilise des images de substitution et des avatars de picsum.photos et randomuser.me.