Cerca componenti

Categorie

Sommario

Aiuto alla navigazione per pagine di contenuti lunghe

Sommario Componente

Un componente dell'indice reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supportano temi chiari e scuri con Tailwind CSS.

Aperto Anteprima

                <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="mt-4 space-y-3">
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
        </li>
    </ul>
</div>

Sommario Componente

Un componente reattivo dell'indice progettato in stile interfaccia utente in modalità scura, con sezioni, titoli, descrizioni e immagini/avatar casuali.

Aperto Anteprima

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 1</h3>
            <p class="text-gray-400">Description of Section 1</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 2</h3>
            <p class="text-gray-400">Description of Section 2</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 3</h3>
            <p class="text-gray-400">Description of Section 3</p>
            <img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="mt-2 rounded" />
        </li>
    </ul>
    <div class="mt-5 border-t border-gray-700 pt-4">
        <h4 class="font-semibold">Author</h4>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
            <span class="text-gray-400">John Doe</span>
        </div>
    </div>
</div>

Sommario Componente

Un componente dell'indice minimalista e reattivo con stile CSS Tailwind, che supporta la modalità oscura e presenta elementi di design puliti.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
        <li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
        <li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
        <li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
        <li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
        <li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
    </ul>
</div>

<div class="hidden md:flex items-center justify-center mt-8">
    <img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
    <span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #e2e8f0;
        }
    }
</style>

Sommario Componente 34

Un componente dell'indice reattivo con stile Material Design, con supporto per temi scuri e utilizzo di Tailwind CSS.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li>
            <a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 1
            </a>
        </li>
        <li>
            <a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 2
            </a>
        </li>
        <li>
            <a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 3
            </a>
        </li>
        <li>
            <a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 4
            </a>
        </li>
        <li>
            <a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 5
            </a>
        </li>
    </ul>
</div>