Todos los componentes

Componente de la barra lateral

Un componente minimalista de la barra lateral con diseño responsivo y soporte para temas oscuros, que utiliza Tailwind CSS.

Abrir vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <aside class="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out">
    <div class="px-6 py-4">
      <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h1>
      </div>
      <nav>
        <ul class="space-y-2">
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Dashboard</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Profile</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Settings</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Support</a>
          </li>
        </ul>
      </nav>
    </div>
  </aside>
  <main class="flex-grow p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome to your Dashboard</h2>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
      </div>
    </div>
  </main>
</div>

Barra de navegación

Componente de barra de navegación receptivo en modo oscuro usando Tailwind CSS

Abrir vista previa

                <nav class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="text-lg font-bold">Brand</div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-400">Home</a>
            <a href="#" class="hover:text-gray-400">About</a>
            <a href="#" class="hover:text-gray-400">Services</a>
            <a href="#" class="hover:text-gray-400">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-white focus:outline-none" id="menu-btn">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="md:hidden" id="menu" style="display: none;">
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Home</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">About</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Services</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<!-- User Avatar Section -->
<div class="p-4 bg-gray-900">
    <div class="container mx-auto flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <span class="ml-2">User Name</span>
    </div>
</div>

<!-- Placeholder Image Section -->
<div class="p-4">
    <img src="https://picsum.photos/1920/1080" alt="Placeholder Image" class="w-full h-auto">
</div>

Componente de cuadro de búsqueda

Un componente de cuadro de búsqueda receptivo diseñado en un estilo brutalista con soporte para temas oscuros utilizando Tailwind CSS.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg space-y-4">
        <h1 class="text-3xl font-bold text-center">Search</h1>
        <div class="flex items-center bg-gray-700 p-2 rounded-md">
            <input type="text" placeholder="Type to search..." class="flex-grow bg-transparent border-none text-white outline-none placeholder-gray-400" />
            <button class="ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">Go</button>
        </div>
        <div class="text-center">
            <img src="https://picsum.photos/200/100" alt="Placeholder image" class="w-full h-auto rounded-md mt-4">
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <span class="text-sm">User Name</span>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F1F1F;
        }
        .bg-gray-800 {
            background-color: #2d2d2d;
        }
        .bg-gray-700 {
            background-color: #3e3e3e;
        }
    }
</style>

Añadir al carrito Componente de botón

Un botón responsivo 'Agregar al carrito' diseñado en modo oscuro usando Tailwind CSS, con efectos de desplazamiento y soporte para temas oscuros.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="flex flex-col items-center bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-auto rounded-lg mb-4" />
        <h2 class="text-lg font-semibold mb-2">Product Name</h2>
        <p class="text-gray-400 mb-4">Short description of the product goes here.</p>
        <div class="flex items-center justify-between w-full">
            <span class="text-xl font-bold">$19.99</span>
            <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
                Add to Cart
            </button>
        </div>
    </div>
</div>

Componente Mega Menú

Un mega componente de menú receptivo diseñado con un enfoque en microinteracciones y soporte de temas oscuros usando Tailwind CSS.

Abrir vista previa

                <div class="relative bg-white dark:bg-gray-800">
  <nav class="flex flex-col md:flex-row justify-between items-center p-4">
    <div class="flex items-center">
      <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Brand</a>
      <div class="hidden md:flex space-x-4 ml-8">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Home</a>
        <div class="relative group">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Services</a>
          <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block transition duration-150 ease-in-out">
            <ul class="py-2">
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Web Design</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">SEO</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Content Writing</a></li>
            </ul>
          </div>
        </div>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">About Us</a>
      </div>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
      </button>
    </div>
  </nav>

  <div class="mt-4 max-w-6xl mx-auto px-2">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service One</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Two</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Three</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Four</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
    </div>
  </div>
</div>

Componente del formulario de registro

Un componente de formulario de registro interactivo con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, que admite el modo oscuro y muestra imágenes de marcador de posición.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md p-8 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="username" placeholder="Your Username" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="email" id="email" placeholder="Your Email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="password" id="password" placeholder="Your Password" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
                <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="avatar" value="https://randomuser.me/api/portraits/men/10.jpg" readonly />
            </div>
        </div>
        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow focus:outline-none focus:ring focus:ring-blue-500 mt-4">Register</button>
    </form>
</div>

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión diseñado con Glassmorphism, con elementos translúcidos similares al vidrio esmerilado y efectos responsivos, que admite temas oscuros con Tailwind CSS.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-40 backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="username" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out">
                    <label class="ml-2 text-sm text-gray-600 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot password?</a>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Login</button>
        </form>
        <p class="mt-6 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Sign up</a></p>
    </div>
</div>

Componente Formularios de diseño de materiales

Un componente de formularios responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para el modo oscuro.

Abrir vista previa

                <div class="container mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Contact Us</h2>
    <form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8">
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="name" type="text" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="email" type="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Avatar</label>
            <img class="rounded-full w-20 h-20 mb-2 border border-gray-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        </div>
        <button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Submit</button>
    </form>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1E1E2F;
        }
    }
</style>

Componente de cargadores

Un componente de cargadores diseñado en base a los principios de Material Design con soporte Tailwind CSS para el modo oscuro y efectos responsivos.

Abrir vista previa

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-2xl font-bold mb-8 text-gray-800 dark:text-white">Loading...</h1>
    <div class="flex items-center justify-center space-x-4">
        <div class="loader w-16 h-16 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-green-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-red-500 rounded-full border-t-transparent animate-spin"></div>
    </div>
    <div class="mt-8">
        <img class="w-24 h-24 rounded-full shadow-lg" src="https://picsum.photos/100/100" alt="Random Image" />
    </div>
    <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">This is an example of a loading component with material design.</div>
</div>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    .loader {
        @apply animate-spin;
    }

    @media (prefers-color-scheme: dark) {
        /* Dark mode styles */
        .loader {
            filter: brightness(1.2);
        }
    }
</style>

Barra de navegación Skeuomorphic

Un componente de barra de navegación responsivo diseñado en un estilo skeuomórfico con soporte de temas oscuros mediante Tailwind CSS.

Abrir vista previa

                <nav class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50?random=1" alt="Logo" class="h-10 rounded-full">
            <span class="text-xl font-bold dark:text-white">Brand</span>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Home
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                About
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Services
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Contact
            </a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-gray-200 p-2 rounded-lg focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="md:hidden">
        <div class="flex flex-col space-y-1 mt-2">
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Home
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                About
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Services
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Contact
            </a>
        </div>
    </div>
</nav>

Categorías