Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de navegación pegajosa

Un componente de navegación pegajoso diseñado en un estilo skeuomórfico, que muestra colores complementarios, adecuado para una cartera con una interfaz rica.

Abrir Vista previa

                <header class="bg-gray-800 dark:bg-gray-900 shadow-lg sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full bg-white shadow-md">
                <h1 class="text-white text-2xl font-semibold">My Portfolio</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="#about" class="text-gray-200 hover:text-gray-100">About</a>
                <a href="#projects" class="text-gray-200 hover:text-gray-100">Projects</a>
                <a href="#contact" class="text-gray-200 hover:text-gray-100">Contact</a>
                <a href="#blog" class="text-gray-200 hover:text-gray-100">Blog</a>
            </nav>
            <div class="md:hidden">
                <button class="text-gray-200 focus:outline-none" aria-label="Open menu">
                    <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>
</header>

<main class="py-10 bg-gray-100 dark:bg-gray-800">
    <section id="about" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">About Me</h2>
        <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>

    <section id="projects" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Projects</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </section>

    <section id="contact" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Contact Me</h2>
        <form class="mt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <input type="text" placeholder="Name" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
                <input type="email" placeholder="Email" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
            </div>
            <textarea placeholder="Message" class="mt-4 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" rows="4" required></textarea>
            <button type="submit" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow">Send Message</button>
        </form>
    </section>
</main>

<footer class="bg-gray-800 dark:bg-gray-900 py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-gray-200">© 2023 My Portfolio. All Rights Reserved.</p>
        <div class="flex justify-center space-x-4 mt-2">
            <a href="https://randomuser.me" class="text-gray-200 hover:text-gray-100" aria-label="Instagram">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
            </a>
            <a href="#" class="text-gray-200 hover:text-gray-100" aria-label="Twitter">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.643 4.937c-.835.37-1.734.617-2.676.726.96-.576 1.694-1.49 2.04-2.573-.897.53-1.887.916-2.943 1.125-.84-.89-2.025-1.455-3.345-1.455-2.547 0-4.608 2.036-4.608 4.547 0 .356.04.703.117 1.037-3.83-.192-7.22-2.032-9.495-4.82-.395.683-.621 1.477-.621 2.358 0 1.63.826 3.069 2.083 3.917-.767-.024-1.487-.235-2.118-.589v.059c0 2.27 1.623 4.153 3.774 4.583-.395.108-.81.165-1.236.165-.303 0-.6-.029-.889-.086.601 1.864 2.339 3.218 4.394 3.262-1.62 1.28-3.645 2.047-5.842 2.047-.38 0-.759-.022-1.133-.066 2.091 1.335 4.594 2.118 7.269 2.118 8.733 0 13.492-7.31 13.492-13.63 0-.208-.004-.415-.015-.621.918-.658 1.714-1.48 2.347-2.415z"/></svg>
            </a>
        </div>
    </div>
</footer>

Componente de mensajes de error

Un componente de mensajes de error con estilo glassmorphism para un tablero, con un efecto de vidrio esmerilado, colores complementarios y un diseño interactivo complejo adecuado para la visualización de datos y los paneles de control.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-6 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg w-full max-w-md">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Error Messages</h2>
        <div class="bg-red-500 text-white p-4 rounded-lg mb-4 flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Network Error:</p>
                <p>There was a problem connecting to the server. Please try again later.</p>
            </div>
        </div>
        <div class="bg-yellow-500 text-white p-4 rounded-lg mb-4 flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Warning:</p>
                <p>Your session will expire in 5 minutes.</p>
            </div>
        </div>
        <div class="bg-green-500 text-white p-4 rounded-lg flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Success:</p>
                <p>Your changes have been saved successfully!</p>
            </div>
        </div>
    </div>
</div>

Componente de restablecimiento de contraseña

Componente de restablecimiento de contraseña con estilo de neumorfismo, combinación de colores complementaria, complejidad compleja, para fines de redes sociales, utilizando Tailwind CSS. Diseño responsivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-6">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl p-8 space-y-6 transform transition duration-500 hover:scale-105">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Your Password</h2>
    
    <div class="relative">
        <input type="email" id="email" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
        <label for="email" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            Email Address
        </label>
    </div>

    <div class="relative">
        <input type="password" id="new-password" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
         <label for="new-password" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            New Password
        </label>
    </div>
    
    <div class="relative">
        <input type="password" id="confirm-password" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
         <label for="confirm-password" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            Confirm Password
        </label>
    </div>
    
    <button class="w-full py-3 bg-blue-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 neumorphism-button">
        Reset Password
    </button>
  </div>
</div>

<style>
.neumorphism-button {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .neumorphism-button {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #c1c1c1;
}
.shadow-xl {
    box-shadow: 10px 10px 20px #a7a7a7, -10px -10px 20px #ffffff;
}
.dark .shadow-xl {
     box-shadow: 10px 10px 20px #4a4a4a, -10px -10px 20px #c1c1c1;
}
.shadow-inner {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner {
     box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #c1c1c1;
}
</style>

Componente de inicio de sesión/registro

Formulario de inicio de sesión/registro monocromático 3D

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md px-8 py-10 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800 lg:w-1/3">
    <div class="absolute inset-0 w-full h-full transform scale-95 translate-x-1 translate-y-1 bg-gray-200 dark:bg-gray-700 rounded-lg blur-md"></div>
    <div class="relative">
      <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white">Login/Signup</h2>
      <div class="mt-6">
        <div class="relative mt-4">
          <input type="text" id="email" name="email" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Email Address">
        </div>
        <div class="relative mt-4">
          <input type="password" id="password" name="password" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Password">
        </div>
        <div class="flex items-center justify-between mt-6">
          <div class="flex items-center">
            <input type="checkbox" id="remember_me" name="remember_me" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
            <label for="remember_me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
          </div>
        </div>
        <div class="mt-6">
          <button type="submit" class="w-full px-4 py-3 text-white bg-blue-600 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">Sign in</button>
        </div>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign up</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de la sección de comentarios

Componente de sección de comentarios responsivos con skeuomorfismo, combinación de colores pastel, complejidad simple adaptada para el comercio electrónico. Tema oscuro compatible.

Abrir Vista previa

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Comments</h2>

  <!-- Comment 1 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-500">2 days ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">This is a great product! Highly recommend.</p>
  </div>

  <!-- Comment 2 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-500">1 day ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">Fast shipping and excellent quality.</p>
  </div>

  <!-- Add new comment form -->
  <div class="mt-6">
    <textarea class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 border-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-200" rows="3" placeholder="Add a comment..."></textarea>
    <button class="mt-3 px-6 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit Comment</button>
  </div>

</div>

Componente de infografía

Un componente de infografía simple diseñado con una estética 3D, utilizando colores pastel para las interfaces de redes sociales, con soporte para modo oscuro.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
  <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-gray-200">Infographics</h2>
  <div class="mt-4 flex flex-col items-center">
    <div class="bg-blue-200 dark:bg-blue-700 rounded-full w-24 h-24 flex items-center justify-center shadow-inner">
      <img src="https://picsum.photos/100/100" alt="Random Image" class="rounded-full object-cover">
    </div>
    <p class="mt-2 text-lg text-gray-700 dark:text-gray-300">Engaging 3D Design</p>
  </div>
  <div class="mt-4 flex justify-between">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 1</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 1</p>
    </div>
    <div class="bg-yellow-200 dark:bg-yellow-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 2</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 2</p>
    </div>
    <div class="bg-pink-200 dark:bg-pink-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 3</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 3</p>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Info</h3>
    <div class="flex items-center mt-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <p class="ml-2 text-gray-700 dark:text-gray-300">John Doe</p>
    </div>
  </div>
</div>

Componente de infografía

Un componente de infografía neumórfica con tonos tierra inspirados en el suelo, los árboles y los paisajes. Cuenta con un estilo de interfaz de usuario suave con una complejidad moderada para uso empresarial/corporativo. El diseño es responsivo y admite temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md relative overflow-hidden">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Business Overview</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">An overview of the current business landscape and insights into market trends.</p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Sales Data</h3>
            <img src="https://picsum.photos/200/100" alt="Sales Data Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Current month sales: 2500 units</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Customer Growth</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Customer Growth Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Growth rate: 15% YoY</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Market Trends</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Market Trends Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Emerging trends in the industry.</p>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="font-semibold text-gray-800 dark:text-gray-200">Team Members</h4>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
        </div>
    </div>
</div>

Componente de contenedor

Un componente contenedor de estilo 3D adecuado para sitios web comerciales / corporativos, con colores vibrantes y elementos interactivos, y diseño receptivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition-transform duration-300 hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-vibrant-600 shadow-md">
        <h2 class="text-xl font-bold text-vibrant-600 dark:text-vibrant-300 ml-4">Business Name</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-4">This container is designed to showcase important information while maintaining a 3D effect that engages users.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
            <img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="w-full h-auto rounded-md mb-2">
            <h3 class="font-semibold text-white">Feature One</h3>
            <p class="text-white">Description of feature one with engaging content.</p>
        </div>
        <div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
            <img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="w-full h-auto rounded-md mb-2">
            <h3 class="font-semibold text-white">Feature Two</h3>
            <p class="text-white">Description of feature two with engaging content.</p>
        </div>
    </div>
</div>

Componente de la barra de progreso

Un componente simple de la barra de progreso con un diseño brutalista con un esquema de color en escala de grises para aplicaciones de comercio electrónico. Es responsivo y cuenta con soporte para modo oscuro.

Abrir Vista previa

                <div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

Saltar al enlace de contenido

Un componente de enlace de salto al contenido en el estilo de diseño 3D, con un esquema de color en tonos tierra, diseñado para el comercio electrónico con una complejidad moderada. Incluye diseño responsivo y soporte para temas oscuros.

Abrir Vista previa

                <a href="#maincontent" class="absolute top-4 left-4 z-50 px-6 py-3 bg-green-700 text-white text-lg font-semibold rounded-xl shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-900 dark:hover:bg-green-800 dark:focus:ring-green-700">Skip to main content</a>

1 ... 133 134 135 136 137 ... 242

Categorías

Todos los componentes