Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente deslizante de carrusel de glassmorphism

Componente de control deslizante de carrusel con diseño de morfismo de vidrio y soporte de modo oscuro.

                <div class="relative w-full" data-carousel="static">
    <!-- Carousel wrapper -->
    <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
         <!-- Item 1 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
            <img src="https://picsum.photos/seed/image1/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
            <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 1 Title</h2>
            </div>
        </div>
        <!-- Item 2 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item="active">
            <img src="https://picsum.photos/seed/image2/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
             <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 2 Title</h2>
            </div>
        </div>
        <!-- Item 3 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
            <img src="https://picsum.photos/seed/image3/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
             <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 3 Title</h2>
            </div>
        </div>
        <!-- Item 4 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
            <img src="https://picsum.photos/seed/image4/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
             <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 4 Title</h2>
            </div>
        </div>
        <!-- Item 5 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
            <img src="https://picsum.photos/seed/image5/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
             <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 5 Title</h2>
            </div>
        </div>
    </div>
    <!-- Slider indicators -->
    <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
        <button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
        <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
        <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
        <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
        <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
    </div>
    <!-- Slider controls -->
    <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
             <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
            </svg>
            <span class="sr-only">Previous</span>
        </span>
    </button>
    <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 9l4-4-4-4"/>
            </svg>
            <span class="sr-only">Next</span>
        </span>
    </button>
</div>

Añadir al carrito Componente de botón

Un componente de botón Agregar al carrito inspirado en el brutalismo con Tailwind CSS, con alto contraste, diseños inusuales, efectos responsivos y soporte para temas oscuros.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
    <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
    <div class="flex flex-col items-center text-center">
        <h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
        <button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
            Add to Cart
        </button>
    </div>
</div>

Barra de navegación en modo oscuro

Componente de barra de navegación con efectos responsivos y soporte para temas oscuros.

Abrir Vista previa

                <nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-lg font-semibold">My Website</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Services</a>
      <a href="#" class="hover:underline">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <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-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Componente de navegación brutalista

Un componente de navegación brutalista con comportamiento receptivo y compatibilidad con temas oscuros.

Abrir Vista previa

                <nav class="bg-yellow-400 dark:bg-purple-900 p-6 font-mono border-4 border-black dark:border-yellow-400">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold text-black dark:text-yellow-400">Brutal Nav</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Home</a></li>
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Docs</a></li>
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Examples</a></li>
    </ul>
  </div>
</nav>

Saltar al componente de enlace de contenido

Glassmorphism Saltar al contenido Enlace con un efecto de vidrio esmerilado, desenfoque, capacidad de respuesta y compatibilidad con modo oscuro mediante Tailwind CSS, sin JavaScript.

Abrir Vista previa

                <a href="#content" class="block sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white/30 focus:backdrop-filter focus:backdrop-blur-lg focus:text-gray-800 focus:px-4 focus:py-2 focus:rounded-md dark:focus:bg-gray-800/30 dark:focus:text-white">Skip to Content</a>

Componentes funcionales Componente

Abrir Vista previa

                <section class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300">
  <div class="container mx-auto px-6 py-20">
    <h2 class="text-center text-3xl font-semibold capitalize lg:text-4xl">
      Our Functional Components
    </h2>

    <div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3">
      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/men/1.jpg"
            alt=""
          />

          <h3 class="mt-4 text-2xl font-semibold capitalize dark:text-white">
            Component One
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/women/1.jpg"
            alt=""
          />

          <h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
            Component Two
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/men/2.jpg"
            alt=""
          />

          <h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
            Component Three
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Componente Visor 360

Un componente de visor de 360° con soporte para modo oscuro y diseño receptivo, construido con Tailwind CSS. No requiere JavaScript, usando solo CSS para el estilo y la capacidad de respuesta.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="container px-4">
    <div class="relative w-full max-w-lg mx-auto">
      </div>
    </div>
  </div>

Brutalista Volver al botón superior

Un botón brutalista de vuelta hacia arriba en Tailwind CSS, con alto contraste, tipografía atrevida y bordes afilados. Incluye tamaño responsivo y soporte para modo oscuro.

Abrir Vista previa

                <button class="fixed bottom-5 right-5 bg-black text-lime-400 border-4 border-lime-400 p-4 text-xl font-bold uppercase transition-all duration-300 hover:bg-lime-400 hover:text-black dark:bg-lime-400 dark:text-black dark:border-black dark:hover:bg-black dark:hover:text-lime-400">
    TOP
</button>

Componente de menciones de usuario

Un componente de mención de usuario con diseño 3D, efectos responsivos y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
  <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-1">
    <p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
    <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
  </div>
  <span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
    Mentioned
  </span>
</div>

Componente de la galería de productos

Componente de galería de productos Glassmorphism con efectos responsivos y soporte para temas oscuros.

Abrir Vista previa

                <div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    </div>
    </div>
  </div>
</div>

1 ... 247 248 249 250 251 ... 282

Categorías

Todos los componentes