Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de navegación

Un componente de navegación responsivo diseñado con microinteracciones y con animaciones atractivas basadas en las acciones del usuario, que admite temas claros y oscuros. El componente incluye avatar de perfil, enlaces de navegación y efectos de desplazamiento.

Abrir Vista previa

                <nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
        <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
    </div>
</nav>

Componente de reproductor de vídeo

Un componente de reproductor de video de estilo brutalismo con alto contraste y diseño inusual, con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
    <div class="relative w-full max-w-2xl rounded-lg overflow-hidden shadow-lg">
        <video class="w-full h-auto" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="absolute inset-0 bg-black opacity-50"></div>
    </div>
    <div class="mt-4 text-center text-lg font-bold text-gray-800 dark:text-white">Bold Video Title</div>
    <div class="mt-2 text-center text-gray-600 dark:text-gray-300">An engaging video description goes here.</div>
    <div class="mt-4 flex items-center justify-center space-x-4">
        <img src="https://picsum.photos/50/50" alt="User Avatar" class="rounded-full border-2 border-gray-800 dark:border-white">
        <p class="text-sm font-semibold text-gray-800 dark:text-white">User Name</p>
    </div>
    <div class="mt-4 flex justify-between w-full max-w-md">
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Like</button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Dislike</button>
    </div>
</div>

Componente de mensajes de error

Un componente de mensajes de error responsivos que presenta animaciones atractivas para las interacciones del usuario y admite el tema oscuro mediante Tailwind CSS.

Abrir Vista previa

                <div class="max-w-lg mx-auto p-4">
    <!-- Error Message Card -->
    <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <!-- Error Icon -->
        <div class="flex items-center mb-2">
            <img src="https://picsum.photos/40/40?random=1" alt="Error Icon" class="w-10 h-10 mr-2 rounded-full" />
            <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Error Title</h2>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a descriptive error message that provides more detail about the issue.</p>
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
            Close
        </button>
    </div>
    
    <!-- Example of Multiple Error Messages -->
    <div class="mt-4 space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
                <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">User Not Found</h2>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">The user you are looking for might have been removed.</p>
            <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
                Retry
            </button>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
                <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Network Error</h2>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">There seems to be a network issue, please check your connection.</p>
            <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
                Reload
            </button>
        </div>
    </div>
</div>

Componente del formulario de registro

Un formulario de registro de diseño plano minimalista con efectos responsivos y soporte para temas oscuros, utilizando Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Register</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
                <input type="text" id="name" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your full name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input type="email" id="email" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your password" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Confirm your password" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="avatar">Profile Picture</label>
                <div class="mt-1 flex justify-center">
                    <img src="https://i.picsum.photos/id/1014/200/200.jpg" alt="Avatar" class="rounded-full w-20 h-20 border-2 border-gray-300 dark:border-gray-600"/>
                </div>
                <p class="text-center text-gray-500 dark:text-gray-400">Random Avatar</p>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Register</button>
        </form>
        <p class="mt-4 text-gray-600 dark:text-gray-400 text-center">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Login</a></p>
    </div>
</div>

Componente de la sección de comentarios

Un componente minimalista de la sección de comentarios diseñado con Tailwind CSS, con líneas limpias, efectos responsivos y soporte para el modo oscuro. Incluye avatares de usuario, texto de comentarios, marcas de tiempo y un área de entrada simple para nuevos comentarios.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="max-h-96 overflow-y-auto">
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">This is a comment from a user. It has a minimalist style.</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">Another comment from a different user. This design is very clean.</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">3 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">I really like this minimalist approach!</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">5 hours ago</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 resize-none" rows="3" placeholder="Add a comment..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">Post Comment</button>
    </div>
</div>

Componente del reproductor de audio

Un componente de reproductor de audio sensible diseñado en modo oscuro con Tailwind CSS. Es compatible con el tema oscuro y proporciona una interfaz limpia para la reproducción de audio.

Abrir Vista previa

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/80/80" alt="Album Art" class="rounded-full border-2 border-gray-600">
        <div class="ml-4">
            <h2 class="text-lg font-semibold">Song Title</h2>
            <p class="text-gray-400">Artist Name</p>
        </div>
    </div>
    <audio controls class="w-full mb-4">
        <source src="path_to_your_audio_file.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <div class="flex items-center justify-between">
        <button class="text-gray-300 hover:text-white">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 3l7 7-7 7-7-7 7-7z" />
            </svg>
        </button>
        <div class="flex items-center">
            <button class="text-gray-300 hover:text-white mx-2">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 3l7 7-7 7-7-7 7-7z" />
                </svg>
            </button>
            <input type="range" class="w-32 mx-2 accent-gray-600" value="50" />
            <button class="text-gray-300 hover:text-white mx-2">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 3l7 7-7 7-7-7 7-7z" />
                </svg>
            </button>
        </div>
        <button class="text-gray-300 hover:text-white">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 3l7 7-7 7-7-7 7-7z" />
            </svg>
        </button>
    </div>
</div>

Formulario de inicio de sesión de neumorfismo

Un componente de formulario de inicio de sesión diseñado con el estilo Neumorphism, con diseño responsivo y soporte de temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
        <h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
            </div>
            <div class="mt-6">
                <button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
            </div>
        </form>
    </div>
</div>

Componente Tarjetas de producto

Un componente de tarjetas de producto de estilo brutalista con efectos responsivos y soporte de temas oscuros utilizando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
</div>

Componente de comparación de productos

Un componente de comparación de productos skeuomórfico diseñado con Tailwind CSS que presenta efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="w-full md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
        <img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
        </div>
    </div>
    <div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
        <img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
        </div>
    </div>
</div>

Componente de carrito de compras

Un componente de carrito de compras diseñado en 3D con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
    <h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
    <ul class='mt-4 space-y-4'>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
                <p class='text-gray-600 dark:text-gray-300'>$19.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
                <p class='text-gray-600 dark:text-gray-300'>$29.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
    </ul>
    <div class='mt-6 flex justify-between items-center'>
        <span class='text-gray-800 dark:text-white text-lg'>Total:</span>
        <span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
    </div>
    <button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</div>

1 ... 291 292 293 294 295 ... 307

Categorías

Todos los componentes