Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de la galería de productos

Un componente de galería de productos responsivo diseñado para el modo oscuro, con imágenes y avatares con Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 1</h3>
                <p class="text-gray-400">$29.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 2</h3>
                <p class="text-gray-400">$39.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 3</h3>
                <p class="text-gray-400">$49.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 4</h3>
                <p class="text-gray-400">$59.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 5</h3>
                <p class="text-gray-400">$69.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 6</h3>
                <p class="text-gray-400">$79.99</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-semibold mb-2">Featured Seller</h2>
        <div class="flex items-center bg-gray-800 p-3 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Best Seller</p>
            </div>
        </div>
    </div>
</div>

Componente de botones Me gusta/Reacción

Un componente web con botones Me gusta y Reacción con microinteracciones y soporte para temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center p-4">
  <h2 class="text-xl font-semibold mb-4 dark:text-white">React to this</h2>
  <div class="flex space-x-4">
    <button class="group bg-blue-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20" alt="like" class="rounded-full">
        <span>Like</span>
      </span>
    </button>
    <button class="group bg-gray-300 text-gray-800 px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=1" alt="love" class="rounded-full">
        <span>Love</span>
      </span>
    </button>
    <button class="group bg-yellow-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-yellow-600 focus:outline-none focus:ring focus:ring-yellow-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=2" alt="laugh" class="rounded-full">
        <span>Laugh</span>
      </span>
    </button>
    <button class="group bg-red-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=3" alt="wow" class="rounded-full">
        <span>Wow</span>
      </span>
    </button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a1a1a;
      color: #ffffff;
    }
  }
</style>

Componente CAPTCHA de modo oscuro

Un componente CAPTCHA diseñado para la interfaz de usuario del modo oscuro con efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-lg font-semibold mb-4">Verify You're Human</h2>
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Random Image" class="w-12 h-12 rounded-full mr-3" />
        <span class="flex-1 text-sm">Please identify the image below:</span>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/250/150" alt="CAPTCHA Image" class="w-full h-auto rounded-md" />
    </div>
    <div class="flex space-x-4">
        <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Verify</button>
        <button class="bg-gray-500 hover:bg-gray-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Refresh</button>
    </div>
</div>

Volver al principio Componente de botón

Un botón Volver al principio responsivo diseñado en un estilo skeuomórfico, con soporte para temas oscuros y efectos responsivos.

Abrir Vista previa

                <div class="fixed bottom-10 right-10 z-50">
    <a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110"> 
        <img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
    </a>
    <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
        Back to Top
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white { background-color: #1f2937; }
    .bg-gray-200 { background-color: #4b5563; }
    .bg-gray-700 { background-color: #2d3748; }
    .text-gray-800 { color: #f7fafc; }
}
</style>

Componente de componentes de medios

Un componente multimedia responsivo con microinteracciones con animaciones atractivas, diseñado con Tailwind CSS. Es compatible con el tema oscuro e incluye imágenes de marcador de posición y avatares.

Abrir Vista previa

                <div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
    <img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
    </div>
</div>

Componente Modal Retro Vintage

Un componente modal retro/vintage receptivo diseñado con Tailwind CSS que incluye soporte para el modo oscuro y una estética nostálgica de los 80/90.

Abrir Vista previa

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 transition-opacity" id="modal-wrapper">
    <div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6 sm:p-8">
        <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-300">Retro Modal Title</h2>
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none" id="modal-close">
                &times;
            </button>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">This is a nostalgic modal component inspired by the vintage aesthetics of the 80s and 90s. It features a simple layout and dark mode support.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end">
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Action</button>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        #modal-wrapper {
            background-color: rgba(31, 41, 55, 0.75);
        }
    }
</style>

Componente de fuente de actividad

Un componente de fuente de actividad receptivo diseñado en un estilo 3D con soporte para temas oscuros, que incorpora elementos tridimensionales para mayor profundidad y participación.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">  
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your post about web development.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your picture.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">5 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">1 day ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emily Davis</p>
                <p class="text-gray-600 dark:text-gray-400">Shared your post.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">3 days ago</span>
            </div>
        </div>
    </div>
    
    <div class="mt-6 text-center">
        <img class="rounded-lg transition-transform transform hover:scale-105" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
    </div>
</div>

Componente de pie de página

Un componente de pie de página de estilo brutalismo con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <footer class="bg-gray-800 text-white p-10 flex flex-col items-center justify-center">  <div class="flex flex-wrap justify-center">    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">Contact Us</h4>      <p class="text-lg">Email: [email protected]</p>      <p class="text-lg">Phone: (123) 456-7890</p>    </div>    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">Follow Us</h4>      <div class="flex space-x-4">        <a href="#" class="text-lg hover:text-gray-400">Facebook</a>        <a href="#" class="text-lg hover:text-gray-400">Twitter</a>        <a href="#" class="text-lg hover:text-gray-400">Instagram</a>      </div>    </div>    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">About Us</h4>      <p class="text-lg">We are a company that values...</p>    </div>  </div>  <div class="flex flex-wrap justify-center mt-10">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar 2">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Avatar 3">  </div>  <div class="mt-10 text-center">    <p class="text-sm">© 2023 Example Company. All Rights Reserved.</p>  </div>  <style>    @media (prefers-color-scheme: dark) {      .bg-gray-800 { background-color: #1a1a1a; }      .text-white { color: #f0f0f0; }      .hover\:text-gray-400:hover { color: #a0a0a0; }    }  </style> </footer>

Componente del Foro de la Comunidad

Un componente responsivo del Foro de la Comunidad diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición.

Abrir Vista previa

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">This is a great place to discuss various topics and share ideas with others. Feel free to start a conversation!</p>
            <img src="https://picsum.photos/400/200" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 1, 2023</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the community here! Everyone is so friendly and welcoming. Looking forward to more discussions.</p>
            <img src="https://picsum.photos/400/201" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 2, 2023</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Join the Conversation</h4>
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="Share your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

Componente de notificaciones

Un componente de notificaciones responsivo diseñado en modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-xl font-semibold mb-4">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">John Doe</p>
        <p>Just completed a new task.</p>
        <span class="text-gray-400 text-sm">10 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Jane Smith</p>
        <p>Commented on your post.</p>
        <span class="text-gray-400 text-sm">20 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Michael Brown</p>
        <p>Sent you a friend request.</p>
        <span class="text-gray-400 text-sm">30 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Emily Davis</p>
        <p>Liked your photo.</p>
        <span class="text-gray-400 text-sm">1 hour ago</span>
      </div>
    </div>
  </div>
</div>

1 ... 224 225 226 227 228 ... 242

Categorías

Todos los componentes