RetroEarthDashboardTOC
Адаптивный компонент «Оглавление» с ретро/винтажным дизайном, цветовой схемой в земляных тонах и поддержкой темного режима для использования на приборной панели.
HTML-код
<div class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-6 rounded-lg shadow-lg font-mono">
<h2 class="text-xl font-bold mb-4">Table of Contents</h2>
<ul class="space-y-2">
<li><a href="#section-1" class="hover:underline">1. Introduction</a></li>
<li><a href="#section-2" class="hover:underline">2. Data Overview</a></li>
<li>
<a href="#section-3" class="hover:underline">3. Key Metrics</a>
<ul class="ml-4 mt-1 space-y-1">
<li><a href="#section-3-1" class="hover:underline">3.1. Sales Performance</a></li>
<li><a href="#section-3-2" class="hover:underline">3.2. User Engagement</a></li>
</ul>
</li>
<li><a href="#section-4" class="hover:underline">4. Conclusion</a></li>
</ul>
</div>Связанные компоненты
Компонент «Оглавление»
Адаптивный компонент Table of Contents со скевоморфизмом, пастельной цветовой гаммой и поддержкой темного режима, подходит для портфолио.
Компонент «Оглавление»
Минималистичный компонент оглавления, разработанный с помощью Tailwind CSS, с адаптивными эффектами и поддержкой темных тем.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, стилизованный под Material Design с яркими цветами, подходит для блогов и потребления контента, включая поддержку темного режима и множество интерактивных элементов.