Cyberpunk Grid Layout Component
A simple, responsive grid layout component with a cyberpunk aesthetic, suitable for event or conference websites. Features dark backgrounds, glowing neon accents, and triadic color scheme. Includes dark mode support.
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>Related Components
Grid Layout Component
A minimalist grid layout component featuring a simple and clean design with responsive effects and support for dark theme. Utilizes placeholder images and avatars from picsum.photos and randomuser.me.
Course_Grid_Layout_Component
A responsive and visually appealing grid layout component for educational platforms, featuring course cards with warm sunset tones, Material Design shadows, and dark mode support.
Skeuomorphism Grid Layout Component
Skeuomorphism Grid Layout Component with responsive effects and dark theme support