レトロな目次
レトロ/ビンテージデザイン、類似の配色、ダークモードをサポートするレスポンシブ目次コンポーネント。ビジネス/企業のWebサイトに適しています。Tailwind CSSをJavaScriptなしで使用しています。
HTMLコード
<div class="bg-gray-200 dark:bg-gray-800 retro-analogous-colors p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold mb-4 dark:text-white">Table of Contents</h2>
<ul class="space-y-2">
<li><a href="#section-1" class="text-blue-800 dark:text-blue-300 hover:underline">Section 1: Introduction</a></li>
<li><a href="#section-2" class="text-blue-800 dark:text-blue-300 hover:underline">Section 2: Getting Started</a></li>
<li><a href="#section-3" class="text-blue-800 dark:text-blue-300 hover:underline">Section 3: Core Concepts</a></li>
<li><a href="#section-4" class="text-blue-800 dark:text-blue-300 hover:underline">Section 4: Advanced Topics</a></li>
<li><a href="#section-5" class="text-blue-800 dark:text-blue-300 hover:underline">Section 5: Conclusion</a></li>
</ul>
</div>
<style>
.retro-analogous-colors {
/* Define your retro analogous colors here using Tailwind's custom colors or by extending the theme */
/* Example (you would define these in your tailwind.config.js): */
/* background-color: theme('colors.retro-light'); */
/* color: theme('colors.retro-dark'); */
}
.dark .retro-analogous-colors {
/* background-color: theme('colors.retro-dark'); */
/* color: theme('colors.retro-light'); */
}
</style>関連コンポーネント
Table of Contents コンポーネント
スイス/インターナショナルのタイポグラフィに触発された、すっきりとしたミニマリスト、レスポンシブな目次コンポーネントで、ドキュメントやナレッジ ベース サイト向けに設計されており、温かみのあるニュートラル カラーと完全なダーク モードのサポートが特徴です。
目次
Glassmorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。視覚的に表現するためのセクションとプレースホルダー画像が含まれています。