Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de formulario de pago

Un formulario de pago responsivo con diseño de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado y soporte para el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-8 w-full sm:w-96">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Checkout</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="address">Shipping Address</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="cvv">CVV</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvv" placeholder="123" required>
            </div>
            <img class="my-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random placeholder"/>
            <div class="flex justify-between items-center">
                <button class="w-full bg-blue-600 text-white rounded-lg py-2 px-4 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300" type="submit">Pay Now</button>
                <div>
                    <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                </div>
            </div>
        </form>
    </div>
</div>

Componente de tarjetas de producto con interfaz de usuario de modo oscuro

Componente de tarjetas de producto con interfaz de usuario de modo oscuro y efectos responsivos mediante Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-900 text-white py-8">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$19.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$29.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$39.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Cuadro de búsqueda skeuomórfico

Un componente de cuadro de búsqueda con un diseño skeuomórfico que imita elementos del mundo real, con capacidad de respuesta y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md">
    <input type="text" class="p-4 pl-10 pr-4 text-gray-900 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400" placeholder="Search..." />
    <svg class="absolute left-3 top-3 w-5 h-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm4 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16z" />
    </svg>
  </div>
</div>

Componente de Indicadores de Progreso

Este es un componente indicador de progreso al estilo de Material Design que utiliza Tailwind CSS, con efectos responsivos y soporte para temas oscuros.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>

Componente contenedor de Glassmorphism

Componente contenedor de Glassmorphism con efectos responsivos y soporte para temas oscuros.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen from-teal-100 via-teal-300 to-teal-500 bg-gradient-to-br dark:from-gray-700 dark:via-gray-900 dark:to-black">
  <div class="bg-white bg-opacity-10 px-10 py-5 border-r-8 border-t-8 border-opacity-30 border-white
    backdrop-filter backdrop-blur-sm shadow-2xl rounded-md w-full max-w-md hover:scale-105 transition duration-500 ease-in-out dark:bg-gray-900 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30">
    <h1 class="text-3xl font-bold text-gray-900 text-center dark:text-white mb-6">Welcome</h1>
    <p class="text-gray-700 text-center dark:text-gray-300 mb-8">This is a Glassmorphism container component example with responsive effects and dark theme support.</p>
    <div class="flex justify-center">
      <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-teal-500 group-hover:from-teal-300 group-hover:to-teal-500 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-teal-200 dark:focus:ring-teal-800">
        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
          Get Started
        </span>
      </button>
    </div>
  </div>
</div>

Componente Mega Menú

Un componente de Mega Menú responsivo con estilo Skeuomorphism, con soporte para temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
    </div>
    <button class="text-gray-800 dark: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-7 6h7"/>
      </svg>
    </button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6">
    <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
    <div class="flex space-x-4 mt-2">
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 1</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 2</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 3</span>
      </div>
    </div>
  </div>
</div>

Componente de tabla de contenido

Un componente de tabla de contenido interactivo diseñado con principios de diseño de materiales mediante CSS de Tailwind, compatible con el modo oscuro y con imágenes y avatares de marcador de posición.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=1" alt="Avatar 1" class="rounded-full mr-3">
                <a href="#section1" class="text-gray-700 dark:text-gray-200 hover:underline">Section 1: Introduction</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=2" alt="Avatar 2" class="rounded-full mr-3">
                <a href="#section2" class="text-gray-700 dark:text-gray-200 hover:underline">Section 2: Getting Started</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=3" alt="Avatar 3" class="rounded-full mr-3">
                <a href="#section3" class="text-gray-700 dark:text-gray-200 hover:underline">Section 3: Features</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=4" alt="Avatar 4" class="rounded-full mr-3">
                <a href="#section4" class="text-gray-700 dark:text-gray-200 hover:underline">Section 4: Conclusion</a>
            </div>
        </li>
    </ul>
</div>

Componente de componentes de medios

Un componente multimedia diseñado en el estilo brutalista, que muestra un diseño audaz con alto contraste, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
  <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
    <img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
    <div class="flex-1">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
      <p class="text-gray-700 dark:text-gray-400 mb-4">
        This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
      </p>
      <span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
        Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
      </span>
    </div>
  </div>
  <div class="mt-4 flex gap-4">
    <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
    <button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800, .bg-gray-700 {
      background-color: #4a5568;
    }
    .text-gray-200 {
      color: #edf2f7;
    }
    .text-gray-400 {
      color: #a0aec0;
    }
  }
</style>

Componente de nube de etiquetas

Un componente de nube de etiquetas retro/vintage con efectos responsivos y compatibilidad con el modo oscuro mediante Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Tag Cloud</h2>
  <div class="flex flex-wrap gap-2">
    <span class="bg-yellow-500 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Retro</span>
    <span class="bg-teal-500 dark:bg-teal-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Vintage</span>
    <span class="bg-fuchsia-500 dark:bg-fuchsia-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">80s</span>
    <span class="bg-purple-500 dark:bg-purple-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">90s</span>
    <span class="bg-pink-500 dark:bg-pink-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Nostalgia</span>
    <span class="bg-red-500 dark:bg-red-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Classic</span>
    <span class="bg-blue-500 dark:bg-blue-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Design</span>
    <span class="bg-green-500 dark:bg-green-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Style</span>
  </div>
</div>

Botón de seguimiento de glassmorphism

Un botón de seguimiento responsivo con diseño de Glassmorphism, soporte de modo oscuro, usando Tailwind CSS.

Abrir Vista previa

                <template>
  <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 backdrop-filter backdrop-blur-lg bg-opacity-20">
      Follow
    </span>
  </button>
</template>

1 ... 208 209 210 211 212 ... 242

Categorías

Todos los componentes