Bauhaus_Retro_Photography_TOC
Un componente de tabla de contenido complejo y receptivo para sitios web de fotografía, inspirado en los principios de diseño de la Bauhaus y una paleta de colores retro/vintage. Cuenta con formas geométricas, colores apagados y compatibilidad con el modo oscuro completo, ideal para galerías de fotos y portafolios.
Código HTML
<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>Componentes relacionados
Componente de tabla de contenido
Componente de tabla de contenido responsivo con soporte de modo oscuro mediante Tailwind CSS. El componente está diseñado para un propósito de cartera, con un esquema de color monocromático y un nivel de complejidad moderado sin JavaScript.
Retro Tabla de contenidos
Componente de tabla de contenido receptivo con diseño retro / vintage, combinación de colores análoga y compatibilidad con modo oscuro. Adecuado para sitios web comerciales / corporativos. Utiliza Tailwind CSS sin JavaScript.
Componente de tabla de contenido
Un componente simple de tabla de contenido diseñado en estilo Material Design, que utiliza tonos tierra y admite el modo oscuro. Apto para el consumo de contenidos en blogs.