Neon_Glow_Sepia_Photography_Accordion
A complex, responsive accordion component with a neon/glow effect in sepia/brown tones, designed for photography portfolios, featuring interactive elements and dark mode support.
HTML Code
<div class="bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-8 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl">
<h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 text-amber-900 dark:text-amber-500 tracking-tight leading-tight relative">
<span class="relative inline-block">
Photography Portfolios
<span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-20 blur-xl dark:from-amber-400 dark:to-amber-200 dark:opacity-30"></span>
</span>
<p class="text-base mt-2 font-normal text-amber-800 dark:text-amber-400 opacity-80">Explore our collection of captivating photographic works.</p>
</h2>
<div class="space-y-4">
<!-- Accordion Item 1 -->
<div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
<input type="checkbox" id="accordion-1" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
<div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
<h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
Abstract Landscapes
<span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
</h3>
<svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-400" 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="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
<div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
<p class="mb-4 text-sm sm:text-base">Dive into a world where light and shadow dance across vast, imagined terrains. This collection explores the intricate beauty of abstract landscapes through a sepia-toned lens, evoking a sense of timeless wonder.</p>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
<img src="https://picsum.photos/id/1040/300/200" alt="Abstract Landscape 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1043/300/200" alt="Abstract Landscape 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1045/300/200" alt="Abstract Landscape 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1047/300/200" alt="Abstract Landscape 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
<span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Sarah 'Aura' Jenkins</span>
</div>
<a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
View Gallery
<span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
</a>
</div>
</div>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
<input type="checkbox" id="accordion-2" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
<div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
<h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
Urban Echoes
<span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
</h3>
<svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-400" 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="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
<div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
<p class="mb-4 text-sm sm:text-base">Witness the soulful silence of cityscapes, captured in a symphony of sepia tones. Each image tells a story of the urban environment's raw beauty and untold narratives.</p>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
<img src="https://picsum.photos/id/1015/300/200" alt="Urban Echoes 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1025/300/200" alt="Urban Echoes 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1032/300/200" alt="Urban Echoes 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1033/300/200" alt="Urban Echoes 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
<span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Alex 'Lens' Martinez</span>
</div>
<a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
View Gallery
<span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
</a>
</div>
</div>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
<input type="checkbox" id="accordion-3" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
<div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
<h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
Ephemeral Moments
<span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
</h3>
<svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-400" 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="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
<div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
<p class="mb-4 text-sm sm:text-base">A collection dedicated to the fleeting, unrepeatable moments of life. These sepia-tinted images freeze time, inviting contemplation on the passage of beauty and memory.</p>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
<img src="https://picsum.photos/id/1062/300/200" alt="Ephemeral Moment 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1070/300/200" alt="Ephemeral Moment 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1074/300/200" alt="Ephemeral Moment 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
<img src="https://picsum.photos/id/1077/300/200" alt="Ephemeral Moment 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
<span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Michael 'Shutter' Chen</span>
</div>
<a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
View Gallery
<span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Styles for Glow Effects -->
<style>
.glow-effect-wrapper::before {
content: '';
position: absolute;
top: -20px; /* Adjust for glow spread */
left: -20px;
right: -20px;
bottom: -20px;
background: linear-gradient(45deg, var(--glow-start-color, #c2410c), var(--glow-end-color, #fbbf24));
background-size: 400% 400%;
animation: glowing 10s linear infinite;
filter: blur(20px);
opacity: 0;
z-index: -1;
transition: opacity 0.3s ease-in-out;
}
.glow-effect-wrapper:hover::before {
opacity: var(--hover-glow-opacity, 0.4);
}
.dark .glow-effect-wrapper::before {
background: linear-gradient(45deg, var(--dark-glow-start-color, #fbbf24), var(--dark-glow-end-color, #fed7aa));
}
.glow-on-hover {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.glow-on-hover:hover {
transform: scale(1.03);
box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.4);
}
.dark .glow-on-hover:hover {
box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.4);
}
.group-hover\:glow-button-effect .bg-amber-500 {
transition: opacity 0.3s ease-in-out;
}
@keyframes glowing {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
<!-- Tailwind JIT or custom config would handle these variables. Here for demonstration. -->
<style>
:root {
--glow-start-color: #f59e0b; /* amber-500 */
--glow-end-color: #fbbf24; /* amber-400 */
--dark-glow-start-color: #f59e0b; /* amber-500 */
--dark-glow-end-color: #fcd34d; /* amber-300 */
--hover-glow-opacity: 0.3;
}
.dark:root {
--glow-start-color: #f59e0b; /* amber-500 */
--glow-end-color: #fcd34d; /* amber-300 */
}
</style>
</div>Related Components
Bauhaus Accordion Component - Blog/Content
A complex, responsive accordion component with a Bauhaus-inspired design, featuring geometric forms, cool neutral colors, and rich interactive elements for blog/content consumption. Includes dark mode support.
Industrial Accordion News Component
An industrial-style accordion component for news and journalism websites, featuring exposed elements, metallic textures, and an autumn color palette. It is responsive, designed for multiple interactive elements, and includes dark mode support.
3D_Gradient_Rainbow_Accordion_Sports_Fitness
A simple, responsive accordion component with a 3D design and gradient rainbow color scheme, suitable for sports/fitness applications. Includes dark mode support.