Componente de diseño de cuadrícula de Cyberpunk
Un componente de diseño de cuadrícula simple y receptivo con una estética cyberpunk, adecuado para sitios web de eventos o conferencias. Cuenta con fondos oscuros, acentos de neón brillantes y combinación de colores triádica. Incluye soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de diseño de cuadrícula
Un componente de diseño de cuadrícula responsivo que sigue los principios de Material Design, con efectos de sombra y compatibilidad con el modo oscuro, utilizando Tailwind CSS.
Diseño de cuadrícula brutalista
Un componente de diseño de cuadrícula receptivo con un estilo de diseño brutalista con alto contraste, diseños inusuales y compatibilidad con temas oscuros.
Skeuomorphic_Grid_Layout_Business
Un componente de diseño de cuadrícula complejo y receptivo para sitios web comerciales/corporativos, con un estilo de diseño esqueuomórfico con colores neutros cálidos y compatibilidad con modo oscuro. Los elementos imitan objetos del mundo real con profundidad y texturas sutiles.