Neon_Glow_Sepia_Photography_Accordion
Un composant d’accordéon complexe et réactif avec un effet néon/lueur dans les tons sépia/brun, conçu pour les portfolios de photographie, avec des éléments interactifs et la prise en charge du mode sombre.
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>Composants associés
Composant accordéon
Un composant d’accordéon complexe et réactif conçu pour les sites Web d’alimentation/restaurant, avec un style typographique suisse/international épuré avec une palette de couleurs joyeuses de bonbons et de sucreries. Inclut la prise en charge du mode sombre.
Accordéon en mode sombre (Finance/Banque)
Un composant d’accordéon simple, monochrome et sombre conçu pour les interfaces financières et bancaires. Il présente un design réactif et une prise en charge du mode sombre, en utilisant des nuances d’une seule couleur pour un look épuré.
Accordéon de conception matérielle
Accordéon de conception matérielle pour le commerce électronique avec palette de couleurs complémentaires et prise en charge du thème sombre.