Saltar al componente de enlace de contenido
Un componente de enlace Saltar al contenido diseñado con elementos 3D, tonos tierra y adaptado a las interfaces del panel de control. Incluye estilos para temas claros y oscuros.
Código HTML
<div class="flex flex-col gap-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<a href="#content" class="flex items-center justify-center h-12 px-4 font-medium text-white bg-brown-700 rounded-full shadow-md dark:bg-green-600 hover:bg-brown-600 dark:hover:bg-green-500 transition duration-300">
Skip to Content
</a>
<p class="text-gray-800 dark:text-gray-300">
Use this link to quickly navigate to the main content of the dashboard.
</p>
<img src="https://picsum.photos/200/100" alt="Dashboard Image" class="rounded-lg shadow-md" />
<div class="flex items-center gap-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" />
<span class="text-gray-800 dark:text-gray-300">User: John Doe</span>
</div>
</div>Componentes relacionados
Saltar al enlace de contenido
Saltar al contenido Enlace Componente alineado con los principios de Material Design, con diseño responsivo, compatibilidad con modo oscuro y un esquema de color monocromático simple para aplicaciones de redes sociales.
Saltar al enlace de contenido
Un componente responsivo de Saltar al contenido Enlace diseñado en un estilo esqueuomórfico con una combinación de colores pastel. Este componente está diseñado para el consumo de blogs y contenido, e incluye soporte para el modo oscuro.
Saltar al enlace de contenido
Un componente Saltar al enlace de contenido con un diseño en escala de grises 3D para sitios web empresariales. Es responsivo y admite el modo oscuro usando Tailwind CSS. Sin JavaScript.