CCHub Logo CCHub Tailwind Collection
コンポーネント 目次 RetroEarthダッシュボード目次

RetroEarthダッシュボード目次

レトロ/ビンテージデザイン、アースカラーの配色、ダッシュボードの使用のためのダークモードのサポートを備えたレスポンシブ目次コンポーネント。

プレビュー

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>

関連コンポーネント

Bauhaus_Retro_Photography_TOC

バウハウスのデザイン原則とレトロ/ビンテージカラーパレットに触発された、写真Webサイト用の複雑でレスポンシブな目次コンポーネント。幾何学的なフォルム、落ち着いた色、完全なダークモードのサポートが特徴で、フォトギャラリーやポートフォリオに最適です。

開ける

Table of Contents コンポーネント

ダークモード UI スタイルでデザインされたレスポンシブな目次コンポーネントで、セクション、タイトル、説明、ランダムな画像/アバターが特徴です。

開ける

目次

Glassmorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。視覚的に表現するためのセクションとプレースホルダー画像が含まれています。

開ける