Neon_Glow_Sepia_Photography_Accordion
セピア/ブラウンの色調のネオン/グロー効果を備えた複雑で応答性の高いアコーディオンコンポーネントは、写真ポートフォリオ用に設計されており、インタラクティブな要素とダークモードのサポートを備えています。
HTMLコード
<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>関連コンポーネント
3D_Gradient_Rainbow_Accordion_Sports_Fitness
3Dデザインとグラデーションレインボーカラースキームを備えたシンプルでレスポンシブなアコーディオンコンポーネントで、スポーツ/フィットネスアプリケーションに適しています。ダークモードのサポートが含まれています。
ニューモルフィックアコーディオン
シンプルでレスポンシブなダークモード互換のアコーディオンコンポーネントで、ニューモーフィックグレースケールデザインで、ポートフォリオセクションに適しています。
アコーディオンコンポーネント
3D デザイン、レスポンシブ効果、HTML と CSS (Tailwind CSS) のみを使用したダークテーマのサポートを備えたアコーディオンコンポーネント。このコンポーネントは、ダークモードに CSS を使用し、スムーズなアコーディオンのトランジションを含めます。完全にレスポンシブです。JavaScriptは使用しておりません。