Componente de tabla de contenido
Un componente de tabla de contenido minimalista y receptivo diseñado con Tailwind CSS, compatible con el modo oscuro y con elementos de diseño limpios.
Código HTML
<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>Componentes relacionados
Componente de tabla de contenido
Un componente responsivo de la tabla de contenido diseñado con elementos skeuomórficos y tonos tierra para una presentación de cartera, con soporte para el modo oscuro.
Componente de tabla de contenido
Un componente de tabla de contenido interactivo diseñado con principios de diseño de materiales mediante CSS de Tailwind, compatible con el modo oscuro y con imágenes y avatares de marcador de posición.
Tabla de contenidos
Tabla de contenido Componente con diseño de microinteracciones, combinación de colores análoga, complejidad simple y propósito de redes sociales. Responsivo con soporte para temas oscuros. Sin código JavaScript.