Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de navegación

Un componente de navegación de modo oscuro receptivo diseñado para el comercio electrónico con una combinación de colores pastel y un diseño simple.

Abrir Vista previa

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
        </div>
    </div>
</nav>

Componente de la barra lateral

Un componente de barra lateral receptivo diseñado en un estilo retro/vintage con colores vibrantes para un diseño de tablero. Incluye soporte para el modo oscuro.

Abrir Vista previa

                <div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
    <h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
    </div>
    <div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-sm font-semibold">John Doe</span>
        </div>
    </div>
</div>

Componente de nube de etiquetas retro

Un componente de nube de etiquetas receptivo que usa Tailwind CSS, con una estética de diseño retro / vintage, combinación de colores pastel y complejidad simple. Adecuado para una cartera, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="bg-stone-50 dark:bg-stone-900 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-mono text-stone-700 dark:text-stone-300 mb-4">Skills</h2>
  <div class="flex flex-wrap gap-2">
    <span class="px-3 py-1 bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 text-sm font-mono rounded-full shadow-sm">HTML</span>
    <span class="px-3 py-1 bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 text-sm font-mono rounded-full shadow-sm">CSS</span>
    <span class="px-3 py-1 bg-fuchsia-200 dark:bg-fuchsia-700 text-fuchsia-800 dark:text-fuchsia-200 text-sm font-mono rounded-full shadow-sm">Tailwind CSS</span>
    <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-200 text-sm font-mono rounded-full shadow-sm">JavaScript</span>
    <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-200 text-sm font-mono rounded-full shadow-sm">Python</span>
    <span class="px-3 py-1 bg-cyan-200 dark:bg-cyan-700 text-cyan-800 dark:text-cyan-200 text-sm font-mono rounded-full shadow-sm">React</span>
    <span class="px-3 py-1 bg-lime-200 dark:bg-lime-700 text-lime-800 dark:text-lime-200 text-sm font-mono rounded-full shadow-sm">Django</span>
  </div>
</div>

Cargador de neumorfismo

Componente de cargador con estilo Neumorphism y esquema de color Pastel para comercio electrónico. Complejidad simple, receptivo con soporte para modo oscuro. Sin JavaScript.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 dark:border-gray-700 h-32 w-32 relative" style="border-top-color: #a78bfa;">
    <div class="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-400 text-2xl">
      Loading...
    </div>
  </div>
</div>

<style>
  .loader {
    animation: spin 2s linear infinite;
    box-shadow: 8px 8px 16px #a7a7a7, -8px -8px 16px #ffffff; /* Neumorphism effect */
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .dark .loader {
     box-shadow: 8px 8px 16px #4b5563, -8px -8px 16px #1f2937; /* Neumorphism effect for dark mode */
  }
</style>

Componentes de mejora de la navegación

Un componente simple de mejora de la navegación en modo oscuro para mostrar un portafolio, utilizando Tailwind CSS.

Abrir Vista previa

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="max-w-6xl mx-auto flex justify-between items-center">
        <h1 class="text-white text-xl font-bold">My Portfolio</h1>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Home</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">About</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Projects</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Contact</a></li>
        </ul>
    </div>
</nav>

<section class="bg-gray-900 dark:bg-gray-800 p-8">
    <div class="max-w-6xl mx-auto text-center">
        <h2 class="text-white text-2xl font-bold">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=1" alt="Project 1" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 1</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 1.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=2" alt="Project 2" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 2</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 2.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=3" alt="Project 3" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 3</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 3.</p>
            </div>
        </div>
    </div>
</section>

<footer class="bg-gray-800 dark:bg-gray-900 p-4 mt-8">
    <div class="max-w-6xl mx-auto text-center">
        <p class="text-gray-300 dark:text-gray-400">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</footer>

Componente del Foro de la Comunidad

Un componente simple del foro de la comunidad que utiliza los principios de Material Design, adaptado para el consumo de contenido del blog con una combinación de colores de tonos tierra y un diseño receptivo para la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Latest Discussions</h3>
        <ul class="list-disc list-inside space-y-3 mt-2">
            <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
                <div class="flex items-center">
                    <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
                    <div>
                        <p class="text-gray-800 dark:text-white font-bold">John Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">What are your thoughts on the new features?</p>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </li>
            <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
                <div class="flex items-center">
                    <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User 2">
                    <div>
                        <p class="text-gray-800 dark:text-white font-bold">Jane Smith</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">Can someone recommend a good blog to follow?</p>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
            </li>
        </ul>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Create a new topic</h3>
        <form class="mt-4">
            <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="What's on your mind?"></textarea>
            <button class="mt-2 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none" type="submit">Post</button>
        </form>
    </div>
</div>

Componente del formulario de registro

Un formulario de registro minimalista con un esquema de color en escala de grises y elementos interactivos ricos, responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
            <input 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" id="name" type="text" placeholder="John Doe" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
            <input 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" id="email" type="email" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input 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" id="password" type="password" placeholder="********" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Profile Picture</label>
            <div class="flex items-center justify-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-300 dark:border-gray-600">
            </div>
            <input 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" id="avatar" type="url" placeholder="https://picsum.photos/200" required>
        </div>
        <div class="flex items-center justify-between mb-4">
            <label class="flex items-center">
                <input class="mr-2 leading-tight" type="checkbox" required>
                <span class="text-sm text-gray-600 dark:text-gray-300">I agree to the terms and conditions</span>
            </label>
        </div>
        <div class="flex items-center justify-center">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
        </div>
    </form>
</div>

Componente de diseño de comercio electrónico

Un componente de diseño de comercio electrónico responsivo con soporte para temas oscuros, construido con Tailwind CSS siguiendo los principios de Material Design. Incluye una barra de navegación, un área de contenido principal con listados de productos y un pie de página. La combinación de colores es pastel.

Abrir Vista previa

                <div class="min-h-screen bg-pastel-100 dark:bg-pastel-900">
  <!-- Navigation Bar -->
  <nav class="bg-pastel-200 dark:bg-pastel-800 shadow">
    <div class="container mx-auto px-6 py-3">
      <div class="flex items-center justify-between">
        <div class="text-pastel-900 dark:text-pastel-100 font-semibold text-xl">My E-commerce</div>
        <div class="flex items-center space-x-4">
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Home</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Shop</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Cart</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content Area -->
  <main class="container mx-auto mt-6 px-6 py-3">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card (Repeat this block for multiple products) -->
      <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Product Name</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of the product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$19.99</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
      <!-- End Product Card -->

      <!-- Example of another product card -->
       <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Another Product</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of another product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$25.00</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-pastel-200 dark:bg-pastel-800 mt-6 py-6">
    <div class="container mx-auto text-center text-pastel-900 dark:text-pastel-100">
      <p>&copy; 2023 My E-commerce. All rights reserved.</p>
    </div>
  </footer>
</div>

Componente de menciones de usuario

Un componente de menciones de usuario responsivo con soporte para temas oscuros, diseñado para sitios web comerciales. Presenta microinteracciones usando Tailwind CSS y un esquema de color de tono tierra.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-md">
  <div class="flex items-center space-x-4">
    <img class="w-10 h-10 rounded-full ring-2 ring-amber-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    <div class="flex-1">
      <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>
      <p class="text-gray-700 dark:text-gray-300 mt-1">"Hey, check out this new feature!"</p>
    </div>
    <button class="text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-600 transition-colors duration-200 ease-in-out">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H3v2H2v2h10l2-2 1-1 1.573-1.573A6 6 0 0118 8zM4.293 15.707L10 9.999V7a1 1 0 012 0v.001h1a1 1 0 011 1v3l3.707 3.707A1 1 0 0117 17H5a1 1 0 01-.707-1.707z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
  <div class="flex justify-end mt-4 space-x-2">
    <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">Reply</button>
    <button class="px-4 py-2 text-sm font-medium text-white bg-amber-600 rounded-md hover:bg-amber-700 transition-colors duration-200 ease-in-out">View Post</button>
  </div>
</div>

Componentes de retroalimentación

Un componente de retroalimentación complejo diseñado para sitios web comerciales/corporativos en modo oscuro, que utiliza un esquema de color complementario.

Abrir Vista previa

                <div class="bg-gray-900 p-6 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-white mb-4">Feedback Component</h2>
    <form class="space-y-4">
        <div>
            <label for="name" class="block text-gray-300 dark:text-gray-200">Name</label>
            <input type="text" id="name" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Name" required />
        </div>
        <div>
            <label for="email" class="block text-gray-300 dark:text-gray-200">Email</label>
            <input type="email" id="email" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Email" required />
        </div>
        <div>
            <label for="feedback" class="block text-gray-300 dark:text-gray-200">Feedback</label>
            <textarea id="feedback" rows="4" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Feedback" required></textarea>
        </div>
        <div class="flex items-center mb-4">
            <input type="checkbox" id="subscribe" class="h-4 w-4 text-teal-500 border-gray-700 rounded dark:bg-gray-900 dark:border-gray-600" />
            <label for="subscribe" class="ml-2 text-gray-300 dark:text-gray-200">Subscribe to our newsletter</label>
        </div>
        <button type="submit" class="w-full bg-teal-600 hover:bg-teal-500 rounded-md text-white font-semibold py-2 transition duration-200 ease-in-out">Submit</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-400 dark:text-gray-300">Recent Feedback</h3>
        <div class="mt-2 bg-gray-800 p-4 rounded-md shadow-md dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
                <div>
                    <p class="text-gray-200 dark:text-gray-100 font-bold">John Doe</p>
                    <p class="text-gray-300 dark:text-gray-400">Great service! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
                <div>
                    <p class="text-gray-200 dark:text-gray-100 font-bold">Jane Smith</p>
                    <p class="text-gray-300 dark:text-gray-400">Loved the experience, will come back!</p>
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 193 194 195 196 197 ... 262

Categorías

Todos los componentes