Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de notificaciones

Un componente de notificaciones responsivo con microinteracciones, combinación de colores triádica y compatibilidad con temas oscuros, diseñado para mostrar trabajos o productos.

Abrir Vista previa

                <div class="max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Notifications</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Liked your project "Sunset Scenery"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Commented on your work "Abstract Art"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Followed you</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">30 minutes ago</span>
                </div>
            </div>
        </div>
    </div>
</div>

Componente de navegación de pie de página

Componente de navegación de pie de página con diseño de neumorfismo, combinación de colores monocromática, complejidad compleja y propósito de redes sociales. Diseño responsivo con soporte para temas oscuros.

Abrir Vista previa

                <footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
      <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
      </ul>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center text-gray-600 dark:text-gray-300">
    &copy; 2023 Your Company. All rights reserved.
  </div>

  <style>
    .neumorphic-card {
      background: #e0e0e0;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .neumorphic-card {
        background: #333333;
        box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
    }
  </style>
</footer>

Componente de navegación de pie de página

Componente de navegación de pie de página para comercio electrónico con Material Design: un componente simple con soporte de modo responsivo y oscuro, con un esquema de color complementario.

Abrir Vista previa

                <footer class="bg-gray-200 text-gray-700 py-8 dark:bg-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <h3 class="text-lg font-semibold mb-4">Shop</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Men's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Women's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Kids'</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Sale</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">About Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Our Story</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Careers</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Press</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">Customer Service</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Contact Us</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Shipping Information</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Returns & Exchanges</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">FAQs</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 Your E-commerce Store. All rights reserved.</p>
    </div>
  </div>
</footer>

Diseño de portafolio en modo oscuro

Un componente de diseño responsivo en modo oscuro para carteras, con un esquema de color monocromático utilizando Tailwind CSS. Incluye marcadores de posición para el contenido y está diseñado para una complejidad moderada sin JavaScript.

Abrir Vista previa

                <div class="min-h-screen bg-gray-900 text-gray-200 p-4">
  <div class="container mx-auto">
    <header class="flex justify-between items-center py-6">
      <h1 class="text-2xl font-bold text-gray-100">My Portfolio</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="hover:text-gray-100">Home</a></li>
          <li><a href="#" class="hover:text-gray-100">Projects</a></li>
          <li><a href="#" class="hover:text-gray-100">Contact</a></li>
        </ul>
      </nav>
    </header>
    
    <main class="grid grid-cols-1 md:grid-cols-2 gap-8 py-8">
      <section>
        <h2 class="text-xl font-semibold mb-4">About Me</h2>
        <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      
      <section>
        <h2 class="text-xl font-semibold mb-4">Recent Projects</h2>
        <div class="space-y-4">
          <div class="bg-gray-800 p-4 rounded-md">
            <h3 class="font-semibold">Project One</h3>
            <p class="text-gray-500 text-sm">A brief description of project one.</p>
          </div>
          <div class="bg-gray-800 p-4 rounded-md">
            <h3 class="font-semibold">Project Two</h3>
            <p class="text-gray-500 text-sm">A brief description of project two.</p>
          </div>
        </div>
      </section>
    </main>
    
    <footer class="text-center py-6 text-gray-500">
      © 2023 My Portfolio
    </footer>
  </div>
</div>

Barra de progreso Earthy de Material Design

Una barra de progreso inspirada en Material Design con tonos tierra, adecuada para interfaces de redes sociales. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
  <div class="bg-green-700 h-2.5 rounded-full dark:bg-green-500" style="width: 45%"></div>
</div>

Componente de mensajes de alerta

Un componente de mensaje de alerta complejo, vibrante y de estilo glassmorphism para comercio electrónico, con soporte para el modo oscuro.

Abrir Vista previa

                <div class="container mx-auto p-8">

  <!-- Light Mode - Vibrant Glassmorphism Alerts -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Success Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-green-600">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-green-800 font-semibold">Success!</p>
          <p class="text-green-700 text-sm mt-1">Your order has been placed successfully.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-blue-600">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-blue-800 font-semibold">Info!</p>
          <p class="text-blue-700 text-sm mt-1">Your items are being processed.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-yellow-600">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-yellow-800 font-semibold">Warning!</p>
          <p class="text-yellow-700 text-sm mt-1">Payment verification is pending.</p>
        </div>
      </div>
    </div>

    <!-- Danger Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-red-600">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-red-800 font-semibold">Danger!</p>
          <p class="text-red-700 text-sm mt-1">There was an issue processing your payment.</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Dark Mode - Vibrant Glassmorphism Alerts -->
  <div class="dark mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Success Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-green-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-green-300 font-semibold">Success!</p>
          <p class="text-green-400 text-sm mt-1">Your order has been placed successfully.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-blue-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-blue-300 font-semibold">Info!</p>
          <p class="text-blue-400 text-sm mt-1">Your items are being processed.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-yellow-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-yellow-300 font-semibold">Warning!</p>
          <p class="text-yellow-400 text-sm mt-1">Payment verification is pending.</p>
        </div>
      </div>
    </div>

    <!-- Danger Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-red-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-red-300 font-semibold">Danger!</p>
          <p class="text-red-400 text-sm mt-1">There was an issue processing your payment.</p>
        </div>
      </div>
    </div>

  </div>


</div>

Componente de formas neumórficas

Un componente de formularios simple con diseño de neumorfismo, adaptado para aplicaciones de comercio electrónico, con un esquema de color monocromático y compatibilidad con el modo oscuro.

Abrir Vista previa

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Neumorphic Forms Component</title>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-8 w-4/5 max-w-md">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="name" type="text" placeholder="John Doe">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="email" type="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="password" type="password" placeholder="••••••••">
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Sign Up</button>
            </div>
        </form>
        <div class="text-center text-gray-600 dark:text-gray-400 mt-4">
            <p>Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Log In</a></p>
        </div>
    </div>
</body>
</html>

Glassmorphism Footer Navigation

Componente de navegación de pie de página con estilo Glassmorphism, combinación de colores vibrantes y diseño complejo para fines de tablero. Diseño responsivo con soporte para modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <footer class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-pink-500 text-white dark:bg-blue-500 dark:bg-opacity-20 dark:text-gray-200 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="col-span-2 md:col-span-1">
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Company</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">About Us</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Careers</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Partnerships</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Press</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Products</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Features</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Pricing</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Integrations</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">API</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Resources</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Blog</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Documentation</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Support</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Community</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Legal</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Privacy Policy</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Terms of Service</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Cookie Policy</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-indigo-300 dark:border-indigo-700 pt-6 text-center text-sm">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</footer>

Componente de lista de deseos

Componente de lista de deseos de modo oscuro con diseño monocromático simple para tablero

Abrir Vista previa

                <div class="bg-gray-900 text-gray-200 dark:bg-gray-800 dark:text-gray-100 min-h-screen p-8">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-gray-100 dark:text-gray-50">My Wishlist</h2>
    
    <!-- Wishlist Item 1 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1018/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 1</h3>
          <p class="text-gray-400 dark:text-gray-300">$19.99</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1015/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 2</h3>
          <p class="text-gray-400 dark:text-gray-300">$29.50</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1016/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 3</h3>
          <p class="text-gray-400 dark:text-gray-300">$9.00</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

Componente Perfiles de usuario

Un componente de perfil de usuario simple y receptivo con microinteracciones con un esquema de color triádico, adecuado para sitios web comerciales o corporativos.

Abrir Vista previa

                <div class="max-w-sm mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
    <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/seed/profile/400/200" alt="Profile Background">
    <div class="flex items-center mt-4">
        <img class="w-16 h-16 rounded-full border-4 border-blue-500 dark:border-yellow-500" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="mt-4 flex justify-between">
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400 transition-colors">View Profile</button>
        <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg dark:bg-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Message</button>
    </div>
</div>

1 ... 134 135 136 137 138 ... 242

Categorías

Todos los componentes