目次 | Code Components Hub

Table of Contents コンポーネント

Skeuomorphism デザイン、パステルカラースキーム、ダークモードをサポートするレスポンシブ目次コンポーネントで、ポートフォリオに適しています。

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
  <ul class="space-y-2">
    <li>
      <a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 1: Introduction</span>
      </a>
    </li>
    <li>
      <a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 2: Projects</span>
      </a>
    </li>
    <li>
      <a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 3: Skills</span>
      </a>
    </li>
    <li>
      <a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 4: Contact</span>
      </a>
    </li>
  </ul>
</div>

                <nav class="p-4 bg-gray-100 dark:bg-gray-800">
  <ul class="space-y-2">
    <li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
    <li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
    <li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
  </ul>
</nav>

Table of Contents コンポーネント

マテリアルデザインでスタイルが鮮やかな色でスタイル化されたレスポンシブな目次コンポーネントで、ダークモードのサポートや複数のインタラクティブ要素など、ブログやコンテンツの使用に適しています。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section1" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 1: Introduction</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section2" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 2: Features</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section3" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 3: Implementation</span>
            </a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
            <a href="#section4" class="flex items-center text-gray-600 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">Section 4: Conclusion</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Images</h3>
        <div class="grid grid-cols-2 gap-4 mt-2">
            <img src="https://picsum.photos/200/150?random=1" alt="Random Image 1" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=2" alt="Random Image 2" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=3" alt="Random Image 3" class="rounded-lg shadow">
            <img src="https://picsum.photos/200/150?random=4" alt="Random Image 4" class="rounded-lg shadow">
        </div>
    </div>
</div>

Table of Contents コンポーネント

マテリアルデザインスタイルでデザインされたレスポンシブな目次コンポーネントで、ビジネス/企業のWebサイト向けのアースカラーとダークテーマのサポートを備えています。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
    <ul class="mt-4 space-y-2">
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/40" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section1" class="text-gray-700 dark:text-gray-300 hover:underline">Section 1</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/41" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section2" class="text-gray-700 dark:text-gray-300 hover:underline">Section 2</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/42" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section3" class="text-gray-700 dark:text-gray-300 hover:underline">Section 3</a>
        </li>
        <li class="flex items-center">
            <img src="https://i.pravatar.cc/43" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <a href="#section4" class="text-gray-700 dark:text-gray-300 hover:underline">Section 4</a>
        </li>
    </ul>
</div>
<div class="bg-gray-200 dark:bg-gray-900 p-6 mt-6 rounded-lg">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Additional Resources</h3>
    <ul class="mt-2 space-y-1">
        <li>
            <a href="#resource1" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 1</a>
        </li>
        <li>
            <a href="#resource2" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 2</a>
        </li>
        <li>
            <a href="#resource3" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 3</a>
        </li>
    </ul>
</div>

3D 目次コンポーネント

e コマース用に設計されたレスポンシブな目次コンポーネントで、3D デザイン要素と補色スキームが特徴です。インタラクティブ要素が含まれており、ダークモードをサポートしています。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h1>
    <ul class="space-y-4">
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item 1" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 1: Introduction</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=1" alt="Item 2" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 2: Features</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=2" alt="Item 3" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 3: Pricing</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=3" alt="Item 4" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 4: Support</span>
            </div>
        </li>
        <li class="relative transition-transform transform hover:scale-105">
            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/50/50?random=4" alt="Item 5" class="w-12 h-12 rounded-full mr-3">
                <span class="font-semibold text-gray-800 dark:text-white">Item 5: FAQ</span>
            </div>
        </li>
    </ul>
</div>

Table of Contents コンポーネント

マテリアルデザインスタイルでデザインされたシンプルな目次コンポーネントで、アースカラーを利用し、ダークモードをサポートしています。ブログでのコンテンツ消費に適しています。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section1" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">1. Introduction</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section2" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">2. Overview of the Topic</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section3" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">3. In-Depth Analysis</a>
        </li>
        <li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
            <a href="#section4" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">4. Conclusion</a>
        </li>
    </ul>
</div>

Table of Contents コンポーネント

スキューモーフィック要素とアーストーンを使用して設計されたレスポンシブ Table of Contents コンポーネントで、ポートフォリオショーケースに使用し、ダークモードをサポートします。

プレビューを開く

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

RetroEarthダッシュボード目次

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

プレビューを開く

                <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>

レトロな目次

レトロ/ビンテージデザイン、類似の配色、ダークモードをサポートするレスポンシブ目次コンポーネント。ビジネス/企業のWebサイトに適しています。Tailwind CSSをJavaScriptなしで使用しています。

プレビューを開く

                <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 デザインとパステル調の配色を備えたレスポンシブな目次コンポーネントで、データの視覚化とコントロールパネルを備えたダッシュボードに適しています。

プレビューを開く

                <div class="flex flex-col items-center p-5 bg-white rounded-lg shadow-lg glassmorphism dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="w-full space-y-3">
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200"> 
            <a href="#section1">Section 1</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section2">Section 2</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section3">Section 3</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section4">Section 4</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section5">Section 5</a>
        </li>
    </ul>
    <div class="mt-6 w-full">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="w-full h-auto rounded-lg shadow-lg">
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Name</p>
    </div>
</div>

カテゴリ

目次