Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de comercio electrónico

Un componente de comercio electrónico receptivo con estilo Glassmorphism y colores pastel, adecuado para interfaces de redes sociales, con soporte para temas oscuros.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-3">Featured Products</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Product 1" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$19.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Product 2" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$29.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Product 3" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$39.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
    </div>
    <div class="mt-5 flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-2">
            <div class="text-left">
                <p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Great product! Highly recommend.</p>
            </div>
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-2">
            <div class="text-left">
                <p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Loved it! Will buy again.</p>
            </div>
        </div>
    </div>
</div>

Componente de nube de etiquetas

Un componente de nube de etiquetas receptivo diseñado para la interfaz de usuario del modo oscuro, que muestra una cartera con un esquema de color análogo.

Abrir Vista previa

                <div class="bg-gray-900 text-gray-300 p-4 rounded-lg">
    <h2 class="text-xl font-bold mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap gap-2">
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#WebDesign</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#UI/UX</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Development</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Branding</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Photography</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Illustration</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Typography</span>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Featured Work</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=1" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 1</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=2" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 2</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=3" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 3</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componente de componentes de comercio electrónico

Un componente de comercio electrónico receptivo con microinteracciones, combinación de colores en tonos tierra, complejidad moderada y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row -mx-4">
      <div class="md:flex-1 px-4">
        <div class="h-[460px] rounded-lg bg-gray-300 dark:bg-gray-700 mb-4 animate-pulse"></div>
        <div class="flex -mx-2 mb-4">
          <div class="w-1/2 px-2">
            <button class="w-full bg-amber-900 dark:bg-amber-700 text-white py-2 px-4 rounded-full font-bold hover:bg-amber-800 dark:hover:bg-amber-600 transform transition duration-300 hover:scale-105">Add to Cart</button>
          </div>
          <div class="w-1/2 px-2">
            <button class="w-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-300 dark:hover:bg-gray-700 transform transition duration-300 hover:scale-105">Add to Wishlist</button>
          </div>
        </div>
      </div>
      <div class="md:flex-1 px-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Product Name Microinteraction</h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed
          ante justo. Integer eu eleifend erat. Quisque dapibus rupus augue,
          a dapibus velit tincidunt et. Sed sed ante justo.
        </p>

        <div class="flex mb-4">
          <div class="mr-4">
            <span class="font-bold text-gray-700 dark:text-gray-300">Price:</span>
            <span class="text-gray-600 dark:text-gray-300">$29.99</span>
          </div>
          <div>
            <span class="font-bold text-gray-700 dark:text-gray-300">Availability:</span>
            <span class="text-gray-600 dark:text-gray-300">In Stock</span>
          </div>
        </div>
        <div class="mb-4">
          <span class="font-bold text-gray-700 dark:text-gray-300">Select Color:</span>
          <div class="flex items-center mt-2">
            <button class="w-6 h-6 rounded-full bg-brown-700 dark:bg-brown-500 mr-2"></button>
            <button class="w-6 h-6 rounded-full bg-green-700 dark:bg-green-500 mr-2"></button>
            <button class="w-6 h-6 rounded-full bg-stone-700 dark:bg-stone-500"></button>
          </div>
        </div>
        <div class="mb-4">
          <span class="font-bold text-gray-700 dark:text-gray-300">Select Size:</span>
          <div class="flex items-center mt-2">
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">S</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">M</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">L</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XL</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XXL</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de lista de deseos

Un componente de lista de deseos responsivo diseñado con elementos skeuomórficos y colores complementarios para un panel de control de tema oscuro.

Abrir Vista previa

                <div class="max-w-xs mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden dark:bg-gray-900">
    <div class="p-4">
        <h2 class="text-2xl font-bold text-white mb-2">Wishlist</h2>
        <ul class="space-y-4">
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 1</h3>
                        <p class="text-sm text-gray-400">$20.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/51" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 2</h3>
                        <p class="text-sm text-gray-400">$30.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/52" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 3</h3>
                        <p class="text-sm text-gray-400">$40.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

Añadir al carrito Componente de botón

Un componente receptivo del botón Agregar al carrito diseñado en un estilo brutalista con colores vibrantes, adecuado para interfaces de redes sociales con soporte para temas oscuros.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
        <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
        <p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
        <div class="mt-5">
            <button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
                Add to Cart
            </button>
        </div>
        <div class="mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400"> 
        </div>
    </div>
</div>

Componente de componentes de autenticación

Un componente de autenticación simple diseñado con estilo Neumorphism y un esquema de color monocromático, adecuado para interfaces de redes sociales. Incluye un formulario de inicio de sesión con campos de correo electrónico y contraseña, un botón de inicio de sesión y un enlace de registro. El componente responde y es compatible con el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-8 w-80 neumorphism">
        <h2 class="text-center text-xl font-semibold text-gray-800 dark:text-gray-200">Login</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="••••••••" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-600">Log In</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
        <div class="flex justify-center mt-4">
            <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>
        <img src="https://picsum.photos/200/100" alt="Random Image" class="mt-4 rounded-lg shadow-lg w-full h-auto">
    </div>
</div>

<style>
.neumorphism {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2), 
                -8px -8px 16px rgba(255, 255, 255, 0.7);
    border-radius: 20px;
}
</style>

Componente de galería

Componente de galería receptivo con diseño 3D, combinación de colores análoga y compatibilidad con modo oscuro para interfaces de redes sociales.

Abrir Vista previa

                <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=1"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=2"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=3"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=4"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=5"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=6"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
  </div>
</div>

Componente de visualización de precios

Un componente de visualización de precios de diseño minimalista / plano para uso en el tablero, con diseño receptivo y soporte para modo oscuro.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-xs mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Overview</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg font-semibold text-gray-700 dark:text-gray-300">Current Price</span>
        <span class="text-2xl font-extrabold text-blue-500 dark:text-blue-300">$99.99</span>
    </div>
    <div class="flex items-center justify-between">
        <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-full">
        <div>
            <span class="text-sm text-gray-600 dark:text-gray-400">Last updated: 2 hours ago</span>
        </div>
    </div>
    <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-500">View Details</button>
</div>

Saltar al enlace de contenido

Un componente Saltar al enlace de contenido con un diseño en escala de grises 3D para sitios web empresariales. Es responsivo y admite el modo oscuro usando Tailwind CSS. Sin JavaScript.

Abrir Vista previa

                <a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-0 a-3 focus:left-0 focus:z-50 block px-4 py-3 text-lg font-semibold text-gray-800 bg-gray-200 border-b-4 border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-300 dark:focus:ring-gray-300">Skip to main content</a>

Botón Añadir a la cesta

Botón "Agregar al carrito" receptivo con diseño esqueuomórfico, combinación de colores monocromática y soporte para temas oscuros.

Abrir Vista previa

                <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded-full shadow-lg dark:shadow-xl hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 ease-in-out hover:scale-105">
  Add to Cart
</button>

1 ... 116 117 118 119 120 ... 262

Categorías

Todos los componentes