Componente Tabla de contenido 3D
Un componente de tabla de contenido adaptable diseñado para el comercio electrónico, con elementos de diseño 3D y una combinación de colores complementaria. Incluye elementos interactivos y es compatible con el modo oscuro.
Código HTML
<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>Componentes relacionados
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.
Componente de tabla de contenido
Un componente de tabla de contenido receptivo para interfaces de redes sociales, diseñado con una interfaz de usuario de modo oscuro que usa tonos tierra y un diseño simple. Es compatible con el tema oscuro que usa Tailwind CSS y es solo HTML sin JavaScript.
Componente de tabla de contenido
Un componente de tabla de contenido interactivo diseñado para el modo oscuro, con secciones con títulos y marcadores de posición para imágenes y avatares.