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.
Código HTML
<a href="#main-content" class="flex items-center justify-center p-4 rounded-full shadow-md bg-gray-200 dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105 sm:bg-pink-200 md:bg-blue-200 lg:bg-green-200 dark:sm:bg-pink-800 dark:md:bg-blue-800 dark:lg:bg-green-800">
<img src="https://picsum.photos/20" alt="Scroll down icon" class="mr-3">
<span class="text-gray-800 dark:text-gray-200 font-semibold">Skip to Content</span>
</a>
<div id="main-content" class="mt-10 p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Welcome to Our Blog</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Here you will find various articles and content for your reading pleasure. Enjoy your stay!</p>
</div>Componentes relacionados
Saltar al componente de enlace de contenido
Un componente de enlace "Saltar al contenido" visualmente atractivo diseñado para paneles con un enfoque en microinteracciones, utilizando un esquema de color complementario y soporte de modo oscuro a través de Tailwind CSS.
Saltar al enlace de contenido
Un componente de enlace de salto al contenido con un estilo de diseño de neumorfismo, un esquema de color triádico y un diseño complejo para blogs y sitios web de contenido. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.
Glassmorphism Saltar al contenido Enlace
Glassmorphism Saltar al componente de enlace de contenido con tonos de tierra para el tablero.