Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componentes de autenticación

Un componente de autenticación responsivo que admite el modo oscuro, que utiliza CSS de Tailwind con fondos oscuros, un formulario de inicio de sesión y registro, e imágenes de marcador de posición aleatorias para los elementos de la interfaz de usuario.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="w-full max-w-sm">
        <div class="mb-6 text-center">
            <h1 class="text-2xl font-bold">Authentication</h1>
            <p class="text-gray-400">Please sign in or create an account</p>
        </div>
        <div class="bg-gray-800 rounded-lg shadow-lg p-6">
            <form>
                <div class="mb-4">
                    <label for="email" class="block mb-2 text-sm font-medium">Email</label>
                    <input type="email" id="email" placeholder="[email protected]" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
                </div>
                <div class="mb-4">
                    <label for="password" class="block mb-2 text-sm font-medium">Password</label>
                    <input type="password" id="password" placeholder="********" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
                </div>
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <input type="checkbox" id="remember" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="remember" class="ml-2 text-sm">Remember me</label>
                    </div>
                    <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
                </div>
                <button type="submit" class="w-full py-2 mt-2 text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500">Sign In</button>
            </form>
            <div class="mt-4 text-center">
                <p class="text-gray-400">or</p>
                <button class="w-full py-2 mt-2 text-white bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Sign Up</button>
            </div>
        </div>
        <div class="mt-6 text-center">
            <img src="https://picsum.photos/100/100" alt="Random placeholder" class="rounded-full mx-auto mb-2">
            <p class="text-gray-400 text-sm">Random User Avatar</p>
        </div>
    </div>
</div>

Componente de ventana de chat con diseño 3D, capacidad de respuesta y modo oscuro

Un componente de ventana de chat responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS. Incluye avatares e imágenes de marcador de posición.

Abrir Vista previa

                <div class="flex flex-col h-[600px] antialiased bg-gray-100 dark:bg-gray-800 relative overflow-hidden rounded-lg shadow-lg">
    <!-- 3D Effect div (optional, for background depth) -->
    <div class="absolute inset-0 z-0" style="background-image: linear-gradient(to bottom right, #3b82f6, #9333ea); transform: perspective(1000px) rotateY(5deg) rotateX(5deg);"></div>

    <div class="flex-1 p:2 sm:p-6 flex flex-col z-10">
        <div class="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-gray-200 dark:bg-gray-700 p-4 h-full">
            <div class="flex flex-col h-full overflow-x-auto mb-4">
                <div class="flex flex-col h-full">
                    <div class="grid grid-cols-12 gap-y-2">
                        <!-- Incoming Message (example) -->
                        <div class="col-start-1 col-end-8 p-3 rounded-lg">
                            <div class="flex flex-row items-center">
                                <img src="https://randomuser.me/api/portraits/thumb/women/79.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative ml-3 text-sm bg-white dark:bg-gray-600 py-2 px-4 shadow rounded-xl">
                                    <div>Hey, how are you doing?</div>
                                </div>
                            </div>
                        </div>
                        <!-- Outgoing Message (example) -->
                        <div class="col-start-6 col-end-13 p-3 rounded-lg">
                            <div class="flex items-center justify-start flex-row-reverse">
                                <img src="https://randomuser.me/api/portraits/thumb/men/86.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-600 py-2 px-4 shadow rounded-xl">
                                    <div>I'm doing great, thanks for asking!</div>
                                    <div class="absolute text-xs bottom-0 right-0 -mb-5 mr-2 text-gray-500 dark:text-gray-300">12:30 PM</div>
                                </div>
                            </div>
                        </div>
                        <!-- Incoming Message with Image (example) -->
                          <div class="col-start-1 col-end-8 p-3 rounded-lg">
                            <div class="flex flex-row items-center">
                                <img src="https://randomuser.me/api/portraits/thumb/women/79.jpg" class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0">
                                <div class="relative ml-3 text-sm bg-white dark:bg-gray-600 py-2 px-4 shadow rounded-xl">
                                    <div>Check this out!</div>
                                    <img src="https://picsum.photos/seed/picsum/200/300" alt="placeholder image" class="mt-2 rounded-md">
                                </div>
                            </div>
                        </div>
                        <!-- Add more messages here following the same structure -->
                    </div>
                </div>
            </div>
            <div class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-600 w-full px-4">
                <div>
                    <button class="flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <svg class="w-5 h-5" 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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.414 6.586a2 2 0 002.828 2.828l6.586-6.586m0 0a2 2 0 102.828-2.828m-8.485.071l7.071 7.071m2.121-7.071l-.707 -.707m10.607 10.607l-.707 -.707m-3.536-3.536l-.707 -.707"></path>
                        </svg>
                    </button>
                </div>
                <div class="flex-grow ml-4">
                    <div class="relative w-full">
                        <input type="text" class="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10 dark:bg-gray-700 dark:text-white">
                    </div>
                </div>
                <div class="ml-4">
                    <button class="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0">
                        <span>Send</span>
                        <span class="ml-2">
                            <svg class="w-4 h-4 transform rotate-45 -mt-px" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                            </svg>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Componentes de navegación

Una barra de navegación de modo oscuro con diseño responsivo, con un logotipo, un avatar y enlaces para la navegación.

Abrir Vista previa

                <nav class="bg-gray-900 text-white p-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-10 h-10 rounded-full">
        <span class="text-xl font-semibold">My Website</span>
    </div>
    <div class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
        <a href="#" class="hover:text-gray-400 transition duration-200">About</a>
        <a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
        <a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
    </div>
    <div class="relative">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer">
        <div class="absolute right-0 mt-2 w-48 bg-gray-800 text-white rounded-md shadow-lg hidden group-hover:block">
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Profile</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Settings</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Logout</a>
        </div>
    </div>
</nav>

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

Componente de información sobre herramientas

Un componente de información sobre herramientas receptivo con microinteracciones para la participación del usuario, con un tema oscuro y animaciones atractivas.

Abrir Vista previa

                <div class="relative group">
    <button class="bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
        Hover me
    </button>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <div class="bg-gray-800 text-white p-2 rounded shadow-lg border border-gray-700">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                <span class="font-semibold">John Doe</span>
            </div>
            <div>
                <p class="mt-1 text-sm">This is a tooltip message that provides additional information.</p>
            </div>
            <img src="https://picsum.photos/200/100" alt="Placeholder" class="mt-2 rounded" />
        </div>
    </div>
</div>
<!-- Dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1f2937;
        }
        .border-gray-700 {
            border-color: #374151;
        }
    }
</style>

Componente de diseño de modo oscuro

Un componente de diseño responsivo con soporte de modo oscuro mediante Tailwind CSS. Cuenta con un encabezado, un área de contenido y un pie de página simples. El modo oscuro se maneja mediante el prefijo 'dark:' en las clases de Tailwind.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
  <header class="bg-white dark:bg-gray-800 shadow">
    <div class="container mx-auto px-4 py-4">
      <h1 class="text-xl font-bold">My Website</h1>
    </div>
  </header>
  <main class="container mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
      <h2 class="text-lg font-semibold mb-4">Welcome</h2>
      <p>This is a basic layout component with dark mode.</p>
    </div>
  </main>
  <footer class="bg-white dark:bg-gray-800 shadow mt-8">
    <div class="container mx-auto px-4 py-4 text-center">
      <p>&copy; 2023 My Website</p>
    </div>
  </footer>
</div>

Componente de botones para compartir en redes sociales

Componente de botones para compartir en redes sociales con estilo brutalismo, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-zinc-100 dark:bg-zinc-900 p-8">
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 border-4 border-zinc-900 dark:border-zinc-100 p-4 bg-white dark:bg-zinc-800 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-500 hover:bg-blue-700 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Twitter
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-700 hover:bg-blue-900 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Facebook
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-red-600 hover:bg-red-800 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Instagram
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-" class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-900 hover:bg-blue-950 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      LinkedIn
    </button>
  </div>
</div>

Componente CAPTCHA

Un componente CAPTCHA con un diseño de modo oscuro que usa Tailwind CSS. Es responsivo y admite temas oscuros sin JavaScript, usando solo CSS.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-gray-800 p-6 rounded-md shadow-md">
    <h2 class="text-xl font-semibold mb-4 text-white">CAPTCHA Verification</h2>
    <div class="mb-4">
      <img src="https://picsum.photos/200/60?random=1" alt="CAPTCHA Image" class="rounded-md">
    </div>
    <input type="text" class="w-full px-3 py-2 border border-gray-700 rounded-md bg-gray-900 text-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter CAPTCHA">
    <button class="mt-4 w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Verify</button>
  </div>
</div>

Componente de la galería de neumorfismo

Un componente de galería neumórfica sensible con soporte para modo oscuro. Las imágenes son marcadores de posición de picsum.photos y los avatares de randomuser.me.

Abrir Vista previa

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
      <img src="https://picsum.photos/seed/1/300/200" alt="Gallery Image 1" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
      <p class="text-gray-700 dark:text-gray-300 text-center">Image Description 1</p>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
      <img src="https://picsum.photos/seed/2/300/200" alt="Gallery Image 2" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
      <p class="text-gray-700 dark:text-gray-300 text-center">Image Description 2</p>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
      <img src="https://picsum.photos/seed/3/300/200" alt="Gallery Image 3" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
      <p class="text-gray-700 dark:text-gray-300 text-center">Image Description 3</p>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark group hover:shadow-neumorphic-hover-light dark:hover:shadow-neumorphic-hover-dark transition duration-300 ease-in-out">
      <img src="https://picsum.photos/seed/4/300/200" alt="Gallery Image 4" class="rounded-md mb-4 shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark">
      <p class="text-gray-700 dark:text-gray-300 text-center">Image Description 4</p>
    </div>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
.shadow-neumorphic-inner-light {
  box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #363636;
}
.shadow-neumorphic-hover-light {
  box-shadow: 3px 3px 8px #a7a7a7, -3px -3px 8px #ffffff;
}
.dark .shadow-neumorphic-hover-dark {
  box-shadow: 3px 3px 8px #4a4a4a, -3px -3px 8px #363636;
}
</style>

Botón Volver al principio

Un botón Volver al principio de Material Design que aparece cuando el usuario se desplaza hacia abajo en la página. Incluye soporte para modo oscuro y desplazamiento suave.

Abrir Vista previa

                <template>
  <button
    id="back-to-top-btn"
    class="fixed bottom-6 right-6 bg-blue-600 text-white p-3 rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800"
    onclick="scrollToTop()"
    aria-label="Back to top"
  >
    <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="M12 6V4m0 2l-3 3m3-3l3 3m-6 6h6a2 2 0 010 4H6a2 2 0 010-4z"
      ></path>
    </svg>
  </button>
</template>

<script>
  // This script is for demonstration purposes and would typically be in a separate JS file
  const backToTopButton = document.getElementById('back-to-top-btn');

  window.onscroll = function() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }
  };

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
</script>

<style>
  /* Add any necessary component-specific styles here */
  #back-to-top-btn {
    display: none; /* Hidden by default */
  }
</style>

Componente Mensajes de éxito

Componente de mensajes de éxito con modo oscuro: cuenta con efectos responsivos y compatibilidad con temas oscuros. No se necesita código JavaScript. Para el modo oscuro, la compatibilidad con CSS es suficiente.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-zinc-950">
  <div class="relative px-4 py-3 pr-10 text-teal-500 bg-teal-900 rounded-lg shadow-md" role="alert">
    <strong class="font-bold select-none">Success!</strong>
    <span class="block sm:inline select-none">Your action was successful.</span>
    <span class="absolute top-0 bottom-0 right-0 flex items-center px-4 py-3">
      <svg class="w-6 h-6 fill-current" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <title>Close</title>
        <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15L6.342 6.342a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
      </svg>
    </span>
  </div>
</div>

1 ... 210 211 212 213 214 ... 242

Categorías

Todos los componentes