Todos los componentes

Componente de fuente de actividad 41

Un componente de fuente de actividad responsivo con un estilo de diseño 3D, que incorpora efectos de profundidad y compatibilidad con temas oscuros, creado con Tailwind CSS.

Abrir vista previa

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h2>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">John Doe</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Just created a new project!</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">2 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Jane Smith</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Liked your post.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">10 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Steve Brown</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Commented on your photo.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">20 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Alice Johnson</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Started following you.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">30 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Michael Green</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Updated his status.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">1 hour ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Emily Davis</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Shared a photo.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">2 hours ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Chris Black</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Joined the group.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">3 hours ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Olivia White</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Sent you a message.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">4 hours ago</p>
        </div>
    </div>
</div>

Componentes de diseño Componente 40

Un componente de diseño responsivo que presenta microinteracciones con animaciones atractivas. Incluye una estructura de tarjeta con interacciones del usuario, como efectos de desplazamiento, escala y ajustes de tema oscuro.

Abrir vista previa

                <div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <div class="p-4">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition duration-300 ease-in-out">User Profile</h2>
            <div class="flex items-center mt-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 hover:scale-110 transition-transform duration-300 ease-in-out">
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
                </div>
            </div>
        </div>
        <div class="p-4">
            <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md hover:scale-105 transition-transform duration-300 ease-in-out">
        </div>
        <div class="p-4">
            <p class="text-gray-700 dark:text-gray-300">This component features engaging microinteractions that enhance user experience by providing visual feedback on actions.</p>
    </div>
        <div class="flex justify-end p-4">
            <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition-all duration-300 ease-in-out">Follow</button>
        </div>
    </div>
</div>

Componentes de medios Componente 39

Un componente multimedia diseñado con la interfaz de usuario del modo oscuro, con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir vista previa

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-md max-w-md mx-auto mt-10">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-bold">John Doe</h2>
            <p class="text-gray-400">Posted 2 hours ago</p>
        </div>
    </div>
    <img class="w-full rounded-lg mb-4" src="https://picsum.photos/600/400" alt="Media Content">
    <h3 class="text-lg font-semibold mb-2">Amazing Scenery</h3>
    <p class="text-gray-300">This is a beautiful representation of nature that showcases the stunning landscapes we often take for granted.</p>
    <div class="mt-4 flex justify-between">
        <button class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 focus:outline-none focus:ring focus:ring-red-300">Like</button>
        <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Comment</button>
    </div>
</div>

Componente de navegación de pie de página 38

Un componente de navegación de pie de página responsivo diseñado con un estilo skeuomórfico para imitar elementos del mundo real, con soporte para temas oscuros y uso de Tailwind CSS. Este componente incluye enlaces, imágenes de marcador de posición y avatares.

Abrir vista previa

                <footer class="bg-gray-800 text-white p-6 mt-8">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col items-center md:items-start">
            <h2 class="text-lg font-bold mb-2">Stay Connected</h2>
            <p class="text-sm">Follow us on our social channels!</p>
            <div class="flex space-x-4 mt-2">
                <a href="#" class="bg-blue-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">FB</a>
                <a href="#" class="bg-blue-400 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">TW</a>
                <a href="#" class="bg-red-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">IG</a>
            </div>
        </div>
        <div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
            <h2 class="text-lg font-bold mb-2">About Us</h2>
            <ul class="text-sm space-y-1">
                <li><a href="#" class="hover:underline">Our Story</a></li>
                <li><a href="#" class="hover:underline">Career</a></li>
                <li><a href="#" class="hover:underline">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
            <h2 class="text-lg font-bold mb-2">User Profiles</h2>
            <div class="flex space-x-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            </div>
        </div>
    </div>
    <div class="mt-6 text-center text-sm">
        <p>&copy; 2023 Your Company. All Rights Reserved.</p>
        <p class="text-gray-400">Powered by <a href="#" class="text-white hover:underline">Your Technology</a></p>
    </div>
</footer>
<style>
    @media (prefers-color-scheme: dark) {
        footer {
            background-color: #1f1f1f;
        }
        footer a {
            color: #white;
        }
        footer a:hover {
            color: #cbd5e1;
        }
    }
</style>

Formulario de inicio de sesión Componente 37

Un componente de formulario de inicio de sesión responsivo diseñado en estilo Material Design con Tailwind CSS, compatible con el modo oscuro.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 p-6">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
                <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">Forgot Password?</a>
            </div>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300 text-sm">Or login with</p>
            <div class="flex justify-center mt-2">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400" src="https://picsum.photos/seed/user1/40/40" alt="User Avatar">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user2/40/40" alt="User Avatar">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user3/40/40" alt="User Avatar">
            </div>
        </div>
    </div>
</div>

Componente de notificaciones del sistema

Un componente de notificaciones del sistema de estilo Neumorphism que utiliza CSS de Tailwind con compatibilidad con temas oscuros.

Abrir vista previa

                <div class="fixed top-5 right-5 space-y-4">
    <!-- Success Toast -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200 font-semibold">Success!</p>
            <p class="text-gray-600 dark:text-gray-400">Your changes have been saved successfully.</p>
        </div>
        <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- Error Toast -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="text-red-600 dark:text-red-400 font-semibold">Error!</p>
            <p class="text-gray-600 dark:text-gray-400">There was an issue processing your request.</p>
        </div>
        <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- Info Toast -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="text-blue-600 dark:text-blue-400 font-semibold">Info!</p>
            <p class="text-gray-600 dark:text-gray-400">This is an informational message.</p>
        </div>
        <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>
</div>

<style>
    /* Neumorphism Styles */
    .bg-white {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
                    -8px -8px 15px rgba(255, 255, 255, 0.9);
    }
    .dark .bg-gray-800 {
        box-shadow: inset 8px 8px 15px rgba(0, 0, 0, 0.5),
                     inset -8px -8px 15px rgba(255, 255, 255, 0.1);
    }
</style>

Componente de visor de 360°

Un componente de visor de 360° que utiliza el estilo de diseño Glassmorphism con efectos responsivos y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="glass-morphism-container relative w-full max-w-2xl p-6 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 bg-opacity-70">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
        <div class="viewer-wrapper relative">
            <img src="https://picsum.photos/600/400?random=1" alt="360° View Image" class="object-cover w-full rounded-lg">
            <div class="arrow-buttons absolute w-full flex justify-between top-1/2 transform -translate-y-1/2 px-4">
                <button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
                    &lt;
                </button>
                <button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
                    &gt;
                </button>
            </div>
        </div>
        <div class="mt-4 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="mx-auto w-12 h-12 rounded-full border-2 border-white bg-white dark:border-gray-700">
            <p class="text-gray-800 dark:text-gray-200 mt-2">User Name</p>
        </div>
    </div>
</div>

Tabla de contenido Componente 34

Un componente de tabla de contenido responsivo con estilo Material Design, con soporte para temas oscuros y uso de Tailwind CSS.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li>
            <a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 1
            </a>
        </li>
        <li>
            <a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 2
            </a>
        </li>
        <li>
            <a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 3
            </a>
        </li>
        <li>
            <a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 4
            </a>
        </li>
        <li>
            <a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 5
            </a>
        </li>
    </ul>
</div>

Indicadores de Progreso Componente 33

Un indicador de progreso responsivo con microinteracciones en Tailwind CSS, con soporte para temas oscuros.

Abrir vista previa

                <div class="relative flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="progress-container flex items-center justify-center">
        <div class="progress-bar relative w-64 h-2 bg-gray-300 dark:bg-gray-700 rounded-full overflow-hidden">
            <div class="progress-fill w-1/2 h-full bg-blue-500 rounded-full transition-all duration-300 ease-in-out"></div>
        </div>
        <div class="progress-indicators flex justify-between w-full mt-2">
            <div class="indicator flex flex-col items-center">
                <img src="https://picsum.photos/id/101/50" alt="Avatar 1" class="mb-1 rounded-full border border-white dark:border-gray-800">
                <span class="text-xs text-gray-700 dark:text-gray-300">Step 1</span>
            </div>
            <div class="indicator flex flex-col items-center">
                <img src="https://picsum.photos/id/102/50" alt="Avatar 2" class="mb-1 rounded-full border border-white dark:border-gray-800">
                <span class="text-xs text-gray-700 dark:text-gray-300">Step 2</span>
            </div>
            <div class="indicator flex flex-col items-center">
                <img src="https://picsum.photos/id/103/50" alt="Avatar 3" class="mb-1 rounded-full border border-white dark:border-gray-800">
                <span class="text-xs text-gray-700 dark:text-gray-300">Step 3</span>
            </div>
        </div>
    </div>
    <style>
        .progress-fill {
            animation: fill 1.5s forwards;
        }

        @keyframes fill {
            from { width: 0%; }
            to { width: 50%; }
        }
    </style>
</div>

Componente de carrito de compras

Un componente de carrito de compras receptivo con un diseño esqueuomórfico, con soporte para temas oscuros e imágenes de marcadores de posición aleatorios.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2>
    <div class="space-y-4">
        <div class="flex items-center justify-between p-4 border rounded-lg shadow-md bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/80" alt="Product" class="w-16 h-16 rounded-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-12 border rounded-md text-center bg-gray-200 dark:bg-gray-600">
        </div>
        <div class="flex items-center justify-between p-4 border rounded-lg shadow-md bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/80" alt="Product" class="w-16 h-16 rounded-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-12 border rounded-md text-center bg-gray-200 dark:bg-gray-600">
        </div>
    </div>
    <div class="mt-5 flex justify-between items-center border-t pt-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total</h2>
        <p class="text-lg font-bold text-gray-800 dark:text-gray-200">$79.98</p>
    </div>
    <button class="mt-5 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded transition duration-200">Checkout</button>
</div>

Categorías