Komponente "Inhaltsverzeichnis"
Eine minimalistische Inhaltsverzeichnis-Komponente, die mit Tailwind CSS entworfen wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.
HTML-Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
<ul class="list-disc pl-5 space-y-2">
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section1" class="text-gray-700 dark:text-gray-300">Section 1</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section2" class="text-gray-700 dark:text-gray-300">Section 2</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section3" class="text-gray-700 dark:text-gray-300">Section 3</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section4" class="text-gray-700 dark:text-gray-300">Section 4</a>
</li>
<li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<a href="#section5" class="text-gray-700 dark:text-gray-300">Section 5</a>
</li>
</ul>
</div>
<div class="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section1" class="text-xl font-semibold text-gray-800 dark:text-white">Section 1</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 1. <img src="https://picsum.photos/200/100" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section2" class="text-xl font-semibold text-gray-800 dark:text-white">Section 2</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 2. <img src="https://picsum.photos/200/100?random=1" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section3" class="text-xl font-semibold text-gray-800 dark:text-white">Section 3</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 3. <img src="https://picsum.photos/200/100?random=2" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section4" class="text-xl font-semibold text-gray-800 dark:text-white">Section 4</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 4. <img src="https://picsum.photos/200/100?random=3" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 id="section5" class="text-xl font-semibold text-gray-800 dark:text-white">Section 5</h3>
<p class="text-gray-700 dark:text-gray-300">Content for section 5. <img src="https://picsum.photos/200/100?random=4" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>Verwandte Komponenten
RetroEarthDashboardTOC
Responsive Inhaltsverzeichniskomponente mit Retro/Vintage-Design, Farbschema in Erdtönen und Unterstützung des Dunkelmodus für die Verwendung im Dashboard.
Komponente "Inhaltsverzeichnis"
Eine reaktionsschnelle Inhaltsverzeichnis-Komponente, die im Glassmorphism-Stil gestaltet wurde, mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten, die sowohl helle als auch dunkle Themen mit Tailwind CSS unterstützen.
Komponente "Inhaltsverzeichnis"
Eine responsive Inhaltsverzeichniskomponente mit einem skeuomorphen Design, einem triadischen Farbschema und Unterstützung für dunkle Themen, die für Social-Media-Schnittstellen geeignet ist. Kein JavaScript, nur HTML und Tailwind CSS.