Komponente "Inhaltsverzeichnis"
Responsive Inhaltsverzeichniskomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Die Komponente ist für einen Portfoliozweck konzipiert und zeichnet sich durch ein monochromatisches Farbschema und einen moderaten Komplexitätsgrad ohne JavaScript aus.
HTML-Code
<div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<ul class="space-y-4">
<li>
<a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 1:</span> Introduction
</a>
</li>
<li>
<a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 2:</span> About Me
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.1 My Background
</a>
</li>
<li>
<a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.2 Skills
</a>
</li>
</ul>
</li>
<li>
<a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 3:</span> My Work
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.1 Project Alpha
</a>
</li>
<li>
<a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.2 Project Beta
</a>
</li>
<li>
<a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.3 Project Gamma
</a>
</li>
</ul>
</li>
<li>
<a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 4:</span> Contact
</a>
</li>
</ul>
</div>
</div>
</div>Verwandte Komponenten
Inhaltsverzeichnis
Eine reaktionsschnelle Inhaltsverzeichniskomponente im Glassmorphism-Stil mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten und Unterstützung für dunkle Themen. Enthält Abschnitte und Platzhalterbilder zur visuellen Darstellung.
Inhaltsverzeichnis
Inhaltsverzeichnis Komponente mit Mikrointeraktionsdesign, analogem Farbschema, einfacher Komplexität und Social-Media-Zweck. Reaktionsschnell mit Unterstützung für dunkle Themen. Kein JavaScript-Code.
Komponente "Inhaltsverzeichnis"
Eine einfache Inhaltsverzeichnis-Komponente, die im Material Design-Stil gestaltet ist, Erdtöne verwendet und den Dunkelmodus unterstützt. Geeignet für den Konsum von Inhalten in Blogs.