Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de menciones de usuario

Un componente de menciones de usuario receptivo con elementos de diseño 3D, combinación de colores en escala de grises y soporte de temas oscuros para sitios web comerciales / corporativos. Utiliza Tailwind CSS e incluye imágenes/avatares de marcador de posición.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
      <div class="relative p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
        <div class="space-y-4">
          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.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 text-sm">Mentioned you in a comment.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.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 text-sm">Replied to your thread.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Pie de página de blog simple análogo en 3D

Componente de pie de página responsivo con soporte de tema oscuro usando Tailwind CSS. El pie de página tiene un diseño 3D simple con colores análogos. Está optimizado para sitios web de blogs/contenidos.

Abrir Vista previa

                <footer class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 text-white py-8 px-4 transform perspective-1000 rotateX-6 translateZ-10 hover:rotateX-0 hover:translateZ-0 transition-all duration-500">
  <div class="container mx-auto flex flex-wrap justify-between items-center">
    <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
      <h3 class="text-xl font-bold mb-2">My Blog</h3>
      <p>&copy; 2023 My Blog. All rights reserved.</p>
    </div>
    <div class="w-full md:w-1/3 text-center mb-4 md:mb-0">
      <h3 class="text-xl font-bold mb-2">Quick Links</h3>
      <ul>
        <li><a href="#" class="hover:underline">Home</a></li>
        <li><a href="#" class="hover:underline">Blog</a></li>
        <li><a href="#" class="hover:underline">About</a></li>
        <li><a href="#" class="hover:underline">Contact</a></li>
      </ul>
    </div>
    <div class="w-full md:w-1/3 text-center md:text-right">
      <h3 class="text-xl font-bold mb-2">Follow Me</h3>
      <div class="flex justify-center md:justify-end space-x-4">
        <a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</footer>

Componente de mapas retro

Un componente de mapas simple, receptivo y compatible con el modo oscuro con una estética retro/vintage, una combinación de colores vibrantes y un propósito comercial/corporativo, creado con Tailwind CSS.

Abrir Vista previa

                <section class="bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Location</h2>
    <div class="relative">
      <img src="https://picsum.photos/seed/maps/800/400" alt="Map of our location" class="w-full h-96 object-cover rounded-lg shadow-lg">
      <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50 rounded-lg"></div>
      <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
        <h3 class="text-2xl font-semibold mb-2">Find Us Here</h3>
        <p class="text-gray-300">123 Main Street, Anytown, USA</p>
      </div>
    </div>
  </div>
</section>

Saltar al enlace de contenido

Un componente de enlace receptivo "Saltar al contenido" con estilo Glassmorphism, que implementa un esquema de color complementario, complejidad moderada y soporte de modo oscuro adecuado para sitios web comerciales / corporativos. Este componente se implementa puramente en HTML con clases CSS de Tailwind, que no requieren JavaScript.

Abrir Vista previa

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

Menú de hamburguesas brutalistas

Menú de hamburguesas de estilo brutalista con colores vibrantes y soporte para modo oscuro, diseñado para un blog o sitio de contenido.

Abrir Vista previa

                <div class="bg-yellow-400 dark:bg-purple-700 p-4 flex justify-between items-center">
  <h1 class="text-2xl font-bold text-black dark:text-white">Brutal Blog</h1>
  <button class="text-black dark:text-white focus:outline-none">
    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M4 5h16v2H4V5zm0 6h16v2H4v-2zm0 6h16v2H4v-2z"/>
    </svg>
  </button>
</div>

Componente retro de comercio electrónico

Un componente complejo de comercio electrónico diseñado con un estilo retro / vintage, con un esquema de color triádico y un diseño receptivo, adecuado para sitios web comerciales / corporativos con soporte de modo oscuro.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <div class="mb-4">
        <h2 class="text-3xl font-bold text-center text-red-600 dark:text-red-400">Vintage E-commerce Store</h2>
        <p class="text-center text-lg text-gray-700 dark:text-gray-300">Explore our curated collection of retro-inspired products</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Retro Gadget</h3>
                <p class="text-gray-600 dark:text-gray-400">Classic retro gadget from the 90s, perfect for nostalgia lovers!</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$29.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Vintage Vinyl</h3>
                <p class="text-gray-600 dark:text-gray-400">Experience music like it's the 80s with our vintage vinyl collection.</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$19.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Classic Arcade Game</h3>
                <p class="text-gray-600 dark:text-gray-400">Relive the golden age of gaming with our classic arcade machines!</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$99.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h2 class="text-2xl font-bold text-center text-red-600 dark:text-red-400">Meet Our Team</h2>
        <div class="flex flex-wrap justify-center space-x-4 mt-4">
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member 1">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">John Doe</h4>
            </div>
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member 2">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">Jane Smith</h4>
            </div>
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Team Member 3">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">Bob Johnson</h4>
            </div>
        </div>
    </div>
</div>

Componente de la galería de productos

Un componente de galería de productos responsivo simple diseñado con los principios de Material Design, con colores vibrantes y soporte para modo oscuro, adecuado para un tablero. Este componente utiliza Tailwind CSS para el estilo.

Abrir Vista previa

                <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
        </div>
    </div>
</div>

Componente de infografía

Componente de infografía: interfaz de usuario de modo oscuro con diseño complejo y en escala de grises. Responsivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="bg-gray-900 text-gray-200 p-8 min-h-screen">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-white mb-12">My Portfolio Infographics</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Project Stats Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Project Statistics</h2>
        <div class="flex items-center mb-4">
          <div class="text-gray-400 mr-2">Completed Projects:</div>
          <div class="text-white font-bold">50+</div>
        </div>
        <div class="flex items-center mb-4">
          <div class="text-gray-400 mr-2">Client Satisfaction:</div>
          <div class="text-white font-bold">100%</div>
        </div>
        <div class="flex items-center">
          <div class="text-gray-400 mr-2">Years of Experience:</div>
          <div class="text-white font-bold">10+</div>
        </div>
      </div>

      <!-- Skills Distribution Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Skills Distribution</h2>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>HTML/CSS</span><span>95%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 95%"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>JavaScript</span><span>85%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 85%"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>Tailwind CSS</span><span>90%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 90%"></div>
          </div>
        </div>
        <div>
          <div class="flex justify-between text-gray-400 mb-1"><span>Python</span><span>70%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 70%"></div>
          </div>
        </div>
      </div>

      <!-- Testimonials Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Client Testimonials</h2>
        <div class="mb-4 border-b border-gray-700 pb-4">
          <p class="text-gray-400 italic mb-2">"Outstanding work! Exceeded expectations and delivered on time."</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar">
            <div class="text-white font-semibold">John Smith</div>
          </div>
        </div>
        <div>
          <p class="text-gray-400 italic mb-2">"Highly recommend for any web development project. Great communication."</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar">
            <div class="text-white font-semibold">Jane Doe</div>
          </div>
        </div>
      </div>

      <!-- Project Showcase Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 md:col-span-2 lg:col-span-3">
        <h2 class="text-2xl font-semibold text-white mb-4">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image 1">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Alpha</p>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image 2">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Beta</p>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image 3">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Gamma</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Componente de formulario de inicio de sesión 3D

Un componente de formulario de inicio de sesión 3D receptivo diseñado para sitios web comerciales / corporativos, que incorpora tonos tierra y soporte para 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 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login to Your Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
        <input type="email" id="email" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
        <input type="password" id="password" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="••••••••" required>
      </div>
      <div class="mb-4 flex items-center justify-between">
        <div>
          <input type="checkbox" class="text-green-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400">
          <span class="text-gray-700 dark:text-gray-300 ml-2">Remember me</span>
        </div>
        <a href="#" class="text-green-600 dark:text-green-400 text-sm">Forgot Password?</a>
      </div>
      <button type="submit" class="w-full bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 transition duration-200">Login</button>
    </form>
    <p class="mt-4 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-green-600 dark:text-green-400">Sign Up</a>
    </p>
  </div>
</div>

Componente de formularios 3D

Un componente de formularios simple y receptivo con elementos de diseño 3D y colores pastel para interfaces de redes sociales, compatible con el modo oscuro.

Abrir Vista previa

                <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Join Our Community</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your name">
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your email">
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Upload Avatar</label>
            <input type="file" id="avatar" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline">
        </div>
        <div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Join</button>
        </div>
    </form>
    <div class="mt-4">
        <img src="https://picsum.photos/200" alt="Random Design" class="rounded-md shadow-lg mt-3 w-full">
    </div>
</div>

1 ... 110 111 112 113 114 ... 262

Categorías

Todos los componentes