Saltar al componente de enlace de contenido
Un componente web que proporciona un enlace para saltar al contenido principal, con estilo Material Design con un esquema de color pastel, adecuado para sitios web de comercio electrónico. Cuenta con un diseño responsivo con soporte para temas oscuros.
Código HTML
<nav class="bg-pastel-200 dark:bg-gray-800 shadow-lg p-4 rounded-lg">
<div class="flex justify-between items-center">
<a href="#main-content" class="text-pastel-800 dark:text-white font-medium text-lg hover:text-pastel-600 dark:hover:text-gray-300 transition duration-300 ease-in-out">
Skip to Content
</a>
</div>
</nav>
<main id="main-content" class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-md mt-4">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome to Our E-commerce Store</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-4">
<div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-lg">
<h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 1</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
<button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
</div>
<div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-lg">
<h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 2</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
<button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
</div>
<div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-lg">
<h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 3</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
<button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
</main>Componentes relacionados
Saltar al componente de enlace de contenido
Glassmorphism Saltar al contenido Enlace con un efecto de vidrio esmerilado, desenfoque, capacidad de respuesta y compatibilidad con modo oscuro mediante Tailwind CSS, sin JavaScript.
Saltar al enlace de contenido
Un componente de enlace receptivo "Saltar al contenido" con estilo Glassmorphism, que implementa un esquema de color complementario, complejidad moderada y soporte de modo oscuro adecuado para sitios web comerciales / corporativos. Este componente se implementa puramente en HTML con clases CSS de Tailwind, que no requieren JavaScript.
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.