Bauhaus_Retro_Photography_TOC
A complex, responsive Table of Contents component for photography websites, inspired by Bauhaus design principles and a retro/vintage color palette. Features geometric forms, muted colors, and full dark mode support, ideal for photo galleries and portfolios.
HTML Code
<div class="font-sans bg-[#F4F1EA] text-[#3D3B40] dark:bg-[#2A2B2D] dark:text-[#EAE7DC] p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-6 sm:gap-8 md:gap-10">
<!-- Main Content Area (simulated) -->
<div class="hidden md:block md:col-span-3 lg:col-span-4 rounded-lg p-6 lg:p-8 bg-[#EAE7DC] dark:bg-[#3D3B40] shadow-md dark:shadow-lg">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#ACD5C3] dark:text-[#A7C9A4] mb-4">Gallery Showcase</h1>
<p class="text-lg leading-relaxed mb-6">Explore the meticulous details and vibrant stories captured through our lens. This simulated content area demonstrates how the Table of Contents would integrate alongside your main photography gallery or portfolio.</p>
<h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Project Overview</h2>
<img src="https://picsum.photos/seed/bauhaus1/800/450" alt="Abstract geometric art" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
<p class="mb-4">Paragraph about the project. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Technique & Vision</h2>
<img src="https://picsum.photos/seed/bauhaus2/800/450" alt="Photography equipment" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
<p class="mb-4">Further details on the techniques used. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Behind the Scenes</h2>
<img src="https://picsum.photos/seed/bauhaus3/800/450" alt="Photographer at work" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
<p>Insights into the creative process. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Table of Contents Sidebar -->
<div class="md:col-span-1 lg:col-span-1">
<div class="bg-[#ACD5C3] dark:bg-[#8D9B8C] p-4 sm:p-6 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
<h2 class="text-xl sm:text-2xl font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4 pb-2 border-b-2 border-[#D7B102] dark:border-[#BFB996]">
<span class="block transform -rotate-6 origin-bottom-left inline-block mr-2 text-2xl">▸</span>
Contents
</h2>
<nav class="">
<ul class="space-y-3">
<li>
<a href="#section1" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#D7B102] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#BFB996] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
1. <span class="hidden sm:inline">Project</span> Overview
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
<li>
<a href="#section2" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#D3A20B] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#B3A880] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
2. <span class="hidden sm:inline">Technique &</span> Vision
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
<li>
<a href="#section3" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#CF920E] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#A99F7A] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
3. <span class="hidden sm:inline">Behind the</span> Scenes
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
<li>
<a href="#section4" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#CB8310] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#A09673] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
4. <span class="hidden sm:inline">Client</span> Testimonials
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
<li>
<a href="#section5" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#C77412] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#978D6D] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
5. <span class="hidden sm:inline">Contact</span> & Booking
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
</ul>
</nav>
<div class="mt-8 pt-6 border-t-2 border-[#D7B102] dark:border-[#BFB996]">
<h3 class="text-lg font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4">Related Galleries</h3>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
<img src="https://picsum.photos/seed/gallery1/60/60" alt="Image from cityscape gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
<span class="font-medium text-sm">Cityscapes & Architecture</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
<img src="https://picsum.photos/seed/gallery2/60/60" alt="Image from nature photography gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
<span class="font-medium text-sm">Nature & Wildlife</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
<img src="https://picsum.photos/seed/gallery3/60/60" alt="Image from portrait gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
<span class="font-medium text-sm">Portraits & Editorial</span>
</a>
</li>
</ul>
</div>
<div class="mt-8 pt-6 border-t-2 border-[#D7B102] dark:border-[#BFB996]">
<h3 class="text-lg font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4">Your Photographer</h3>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/82.jpg" alt="Photographer's avatar" class="w-16 h-16 rounded-full object-cover border-4 border-[#D7B102] dark:border-[#BFB996] shadow-md">
<div>
<p class="font-semibold text-lg text-[#F4F1EA] dark:text-[#EAE7DC]">Max Steiner</p>
<p class="text-sm text-[#F4F1EA] dark:text-[#CECAC2] opacity-80">Lead Photographer</p>
</div>
</div>
<p class="text-sm italic text-[#F4F1EA] dark:text-[#EAE7DC] opacity-90 mt-4">"Capturing moments, crafting stories. Bauhaus principles inspire my compositions."
</p>
<a href="#" class="mt-4 block w-full px-4 py-2 text-center rounded-md text-[#3D3B40] bg-[#D7B102] hover:bg-[#EAE7DC]
dark:text-[#2A2B2D] dark:bg-[#BFB996] dark:hover:bg-[#EAE7DC]
font-bold transition-all duration-300 ease-in-out shadow-md hover:shadow-lg
transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-[#D7B102] dark:focus:ring-[#BFB996] focus:ring-opacity-75">
View Portfolio
</a>
</div>
</div>
</div>
</div>
</div>Related Components
Table of Contents Component
A responsive and dark mode enabled Table of Contents component with a retro/vintage color palette, suitable for dating/social platforms. It features a muted color scheme and smooth scrolling navigation.
Table of Contents Component
Responsive Table of Contents component with Skeuomorphism design, Pastel color scheme, and dark mode support, suitable for portfolios.
Table of Contents Component
A responsive Table of Contents component styled with Material Design principles using Tailwind CSS, supporting dark mode and featuring placeholder images and avatars.