Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de la galería de productos

Una galería de productos responsiva con un estilo retro / vintage, con una combinación de colores complementaria y diseñada para sitios web comerciales / corporativos con soporte para modo oscuro.

Abrir Vista previa

                <div class="max-w-6xl mx-auto p-5">
    <h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$29.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$39.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$19.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$49.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$59.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$69.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
    </div>
</div>

Componente de componentes interactivos

Un componente interactivo complejo para las redes sociales con un diseño esqueuomórfico y una combinación de colores monocromática.

Abrir Vista previa

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-4">Interactive Components</h2>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg shadow-inner p-4 mb-4">
        <h3 class="text-gray-300 text-lg font-semibold">User Posts</h3>
        <div class="flex items-center space-x-4 mb-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
            <div class="flex-1">
                <textarea rows="3" class="w-full p-2 bg-gray-600 dark:bg-gray-700 text-white rounded-md border border-gray-500 focus:border-gray-400 focus:outline-none" placeholder="What's on your mind?"></textarea>
                <div class="flex justify-between mt-2">
                    <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-4 rounded">Post</button>
                    <button class="text-gray-400 hover:text-gray-200 font-semibold">Cancel</button>
                </div>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md">
            <div class="flex items-start space-x-3 mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600" />
                <div class="flex-1">
                    <p class="text-gray-200 font-semibold">Jane Doe</p>
                    <p class="text-gray-400">Just had a great coffee!</p>
                    <img src="https://picsum.photos/200/100?random=1" alt="Post Image" class="mt-2 rounded-lg shadow-md" />
                    <div class="flex space-x-4 mt-2">
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4H5v-4zm0 0l4-4H5v4zm14-4l4 4h-4l4-4zm0 0l-4-4h4l-4 4z"/></svg>
                            Like
                        </button>
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8M8 14h3m6 5c1.042 0 1.932-.592 2.42-1.53a3.001 3.001 0 00-2.53-4.47c-.961 0-1.86.467-2.53 1.53-1.184 1.59-3.49 1.56-5.42.43-.758-.395-1.5-.87-2.5-1.43M9 21h6m-3-3.25l3.625-1.81a3.997 3.997 0 00-.676-7.376M15 19.25h-6m0 0l-.625 1.37M9 21l.365.734M11 20.25l3 1.25m-1-6v6m0-6s2 1.5 4 0m-4 0c-.5 0-.5-1 0-1.5s.5-1 1-1 2 0 2 0v1s-1.5 1.5-2 2c-1 0-1-1-1-1s-2 1 0 2c0 0 1 .5 2 0V19H9m1-2s-1 1-2 0m2 0c1.5 0 1.5 2 0 3c0 0-1-1 0-2z"/></svg>
                            Comment
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componente de infografía

Un componente infográfico 3D responsivo diseñado para interfaces de redes sociales con colores vibrantes y soporte para temas oscuros, que incorpora elementos tridimensionales para mayor profundidad y compromiso.

Abrir Vista previa

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="text-center mb-4">
        <h2 class="text-3xl font-bold">Infographic Title</h2>
        <p class="text-gray-400">Engaging insights and data visualizations</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"> 
            <h3 class="font-semibold text-xl">Key Insight #1</h3>
            <img src="https://picsum.photos/id/1018/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the first key insight go here. It should be engaging and informative.</p>
        </div>
        <div class="bg-gradient-to-r from-green-400 to-teal-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
            <h3 class="font-semibold text-xl">Key Insight #2</h3>
            <img src="https://picsum.photos/id/1015/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the second key insight go here. Make it intriguing!</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Join the Conversation</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <input type="text" placeholder="Share your thoughts..." class="bg-gray-700 text-white rounded-full py-2 px-4 w-full" />
        </div>
        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full inline-flex items-center">Submit</button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 {
        background-color: #1c1c1c;
    }
    .bg-gradient-to-r {
        background-image: linear-gradient(to right, #6a0dad, #1e90ff);
    }
}
</style>

Componentes de autenticación

Un componente de inicio de sesión y registro receptivo e interactivo diseñado con microinteracciones, utilizando colores complementarios para una interfaz de contenido de blog con soporte para temas oscuros.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
            </div>
            <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
        </form>
        <div class="mt-6 text-center">
            <span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
            <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
        </div>
    </div>
</div>

Componente de ventana de chat

Un componente de ventana de chat receptivo con soporte para modo oscuro, diseñado para uso empresarial con microinteracciones sutiles. Utiliza un esquema de color monocromático. No se requiere JavaScript.

Abrir Vista previa

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <div class="flex-1 overflow-y-auto p-4">
        <!-- Chat messages go here -->
        <div class="flex items-end mb-4">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg max-w-xs">
                <p class="text-sm">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-end justify-end mb-4">
            <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
                <p class="text-sm">I have a question about my order.</p>
            </div>
            <img class="w-8 h-8 rounded-full ml-2" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Avatar">
        </div>
        <!-- More messages -->
    </div>
    <div class="bg-white dark:bg-gray-800 p-4">
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 dark:border-gray-700 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
            <button class="ml-2 bg-blue-500 dark:bg-blue-700 text-white rounded-full p-2 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition duration-300 ease-in-out hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

Componente de la galería de productos

Un componente de la galería de productos diseñado en el estilo Material Design con una combinación de colores triádica. Cuenta con diseños basados en cuadrículas, animaciones responsivas y admite temas oscuros. La galería incluye imágenes y avatares y es adecuada para un tablero.

Abrir Vista previa

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=1" alt="Product Image 1" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 1. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=2" alt="Product Image 2" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 2. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=3" alt="Product Image 3" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 3. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=4" alt="Product Image 4" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 4. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=5" alt="Product Image 5" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 5. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

Componente modal

Un componente modal responsivo con microinteracciones y combinación de colores triádica, diseñado para interfaces de redes sociales. Cuenta con animaciones que atraen a los usuarios tras la interacción y proporciona soporte para temas oscuros utilizando Tailwind CSS.

Abrir Vista previa

                <div class="fixed z-50 inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900 transition-opacity duration-500 ease-in-out" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Share Your Thoughts
      </h3>
      <div class="mt-2">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Engage with your friends and share ideas or posts directly here.
        </p>
      </div>
    </div>
    <div class="p-6">
      <form class="space-y-4">
        <textarea class="w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500" placeholder="What's on your mind?"></textarea>
        <div class="flex items-center space-x-4">
          <img class="w-10 h-10 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <button type="submit" class="inline-flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Post
          </button>
        </div>
      </form>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
        Close
      </button>
    </div>
  </div>
</div>

Componente de lista de deseos

Un componente de lista de deseos de estilo brutalista para sitios web comerciales, con un esquema de color en escala de grises y una complejidad moderada. Diseño responsivo con soporte para modo oscuro usando clases CSS de Tailwind.

Abrir Vista previa

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h2 class="text-2xl font-bold mb-4 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Wishlist</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item1/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 1</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$99.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
    </div>
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item2/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 2</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$149.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">Out of Stock</div>
    </div>
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item3/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 3</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$79.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
    </div>
  </div>
</div>

Componente de tabla de contenido

Un componente responsivo de la tabla de contenido diseñado con elementos skeuomórficos y tonos tierra para una presentación de cartera, con soporte para el modo oscuro.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

Componente Botones de morfismo de vidrio

Un componente de botón de Glassmorphism simple y receptivo con colores pastel y soporte de modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 1
    </button>
    <button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 2
    </button>
  </div>
</div>

1 ... 130 131 132 133 134 ... 242

Categorías

Todos los componentes