Componentes Paginación Componente de paginación de glassmorphism

Componente de paginación de glassmorphism

Un componente de paginación responsivo diseñado con morfismo de vidrio y un esquema de color triádico, adecuado para la lectura de blogs y contenidos. Cuenta con múltiples elementos interactivos y admite el modo oscuro.

Vista previa

Código HTML

<div class="flex justify-center mt-6">
    <nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
        <ul class="flex items-center space-x-2">
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
            </li>
        </ul>
    </nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

Componentes relacionados

Componente de paginación

Un componente de paginación responsivo diseñado con un estilo brutalista, que utiliza tonos tierra y complejidad moderada para un sitio web comercial / corporativo, con soporte para temas oscuros.

Abrir

Componente de paginación de neumorfismo

Un componente de paginación con diseño de neumorfismo, combinación de colores pastel y complejidad moderada. Está diseñado para portafolios e incluye diseño responsivo y soporte para temas oscuros utilizando solo HTML y Tailwind CSS.

Abrir

Componente de paginación

Componente de paginación para la interfaz de usuario del modo oscuro con efectos responsivos y soporte para temas oscuros.

Abrir