Categorías

Componentes Saltar al enlace de contenido

Saltar al enlace de contenido

Enlace de accesibilidad para saltar la navegación

Saltar al componente de enlace de contenido

Un componente de enlace Saltar al contenido diseñado con elementos skeuomórficos que se asemejan a un botón físico. El componente tendrá un esquema de color pastel, una complejidad moderada que incluye efectos de desplazamiento y soporte para temas oscuros.

Abrir vista previa

                <div class="flex justify-center">
    <a href="#content" class="relative flex items-center justify-center w-52 h-12 rounded-lg shadow-lg bg-pastel-bg-light dark:bg-pastel-bg-dark text-pastel-text-light dark:text-pastel-text-dark hover:bg-gradient-to-r hover:from-pastel-hover-start hover:to-pastel-hover-end transition duration-200 ease-in-out">
        <span class="absolute inset-0 rounded-lg border border-pastel-border-light dark:border-pastel-border-dark transform scale-110 hover:scale-100 transition duration-200 ease-in-out"></span>
        <span class="font-semibold z-10">Skip to Content</span>
    </a>
</div>

<style>
    .bg-pastel-bg-light {
        background-color: #f9e3e3;
    }
    .bg-pastel-bg-dark {
        background-color: #3c3c3c;
    }
    .text-pastel-text-light {
        color: #2d2d2d;
    }
    .text-pastel-text-dark {
        color: #f6f6f6;
    }
    .hover\:bg-gradient-to-r:hover {
        background: linear-gradient(90deg, #f9b0b0, #f6dbbd);
    }
    .hover\:from-pastel-hover-start:hover {
        background-color: #f9b0b0;
    }
    .hover\:to-pastel-hover-end:hover {
        background-color: #f6dbbd;
    }
    .border-pastel-border-light {
        border-color: #f17979;
    }
    .border-pastel-border-dark {
        border-color: #606060;
    }
</style>

<div id="content" class="p-5 mt-10">
    <h1 class="text-2xl font-bold dark:text-white">Welcome to My Portfolio</h1>
    <img src="https://picsum.photos/800/400" alt="Portfolio Image" class="mt-5 rounded-lg shadow-lg">
    <p class="mt-3 dark:text-gray-300">Here you'll find a selection of my work and projects showcasing my skills and expertise.</p>
</div>

Saltar al componente de enlace de contenido

Un componente de vínculo Saltar al contenido interactivo para un panel con un estilo de neumorfismo y un esquema de color de tonos tierra.

Abrir vista previa

                <div class="flex justify-center mt-4">
    <a href="#content" class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white px-4 py-2 rounded-lg shadow-lg transition ease-in-out duration-300 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-300 dark:focus:ring-offset-gray-900">
        Skip to Content
    </a>
</div>

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.

Abrir vista previa

                <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>

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.

Abrir vista previa

                <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>

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.

Abrir vista previa

                <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>

Saltar al enlace de contenido

Un componente de enlace "Saltar al contenido" para la accesibilidad, diseñado para paneles de control en modo oscuro con un esquema de color en escala de grises. Es moderadamente complejo debido al estilo responsivo y del modo oscuro. No se utiliza JavaScript. Utiliza CSS de Tailwind con prefijos dark: para el soporte de temas oscuros.

Abrir vista previa

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-gray-800 focus:text-white focus:p-3 focus:underline dark:focus:bg-gray-900 dark:focus:text-gray-200">Skip to Content</a>

Saltar al componente de enlace de contenido

Un componente web que proporciona un enlace de estilo 3D 'Saltar al contenido' con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.

Abrir vista previa

                <div class="relative group">
    <a href="#main-content" class="inline-block px-4 py-2 text-white bg-blue-500 rounded-full shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-2xl dark:bg-blue-700 dark:shadow-lg dark:hover:scale-110">
        Skip to Content
    </a>
    <div class="absolute left-0 translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
        <div class="bg-gray-800 dark:bg-gray-900 text-white text-xs rounded-lg p-2 shadow-lg">
            Skip past navigation and other elements to main content.
        </div>
    </div>
</div>

<div id="main-content" class="mt-10 bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is where the main content goes. You can add your text and images here.</p>
    <img src="https://picsum.photos/600/400" alt="Random placeholder" class="mt-4 rounded-lg shadow-md">
    <p class="mt-4 text-gray-700 dark:text-gray-300">You can use this space to illustrate the content being referred to by the 'Skip to Content' link.</p>
</div>

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.

Abrir vista previa

                <a href="#content" class="block sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white/30 focus:backdrop-filter focus:backdrop-blur-lg focus:text-gray-800 focus:px-4 focus:py-2 focus:rounded-md dark:focus:bg-gray-800/30 dark:focus:text-white">Skip to Content</a>