Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente Paneles

Un componente de tablero receptivo diseñado con elementos 3D y tonos Tierra, que muestra visualización de datos y paneles de control con soporte para temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
    <div class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Dashboard</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Card 1 -->
            <div class="bg-yellow-100 dark:bg-yellow-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=1" alt="Data Visualization" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
                    <p class="text-gray-600 dark:text-gray-400">Current sales data and trends.</p>
                </div>
            </div>
            <!-- Card 2 -->
            <div class="bg-green-100 dark:bg-green-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=2" alt="User Engagement" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h2>
                    <p class="text-gray-600 dark:text-gray-400">Track user interactions and engagement metrics.</p>
                </div>
            </div>
            <!-- Card 3 -->
            <div class="bg-blue-100 dark:bg-blue-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=3" alt="Performance Metrics" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Performance Metrics</h2>
                    <p class="text-gray-600 dark:text-gray-400">Analyze performance against key metrics.</p>
                </div>
            </div>
            <!-- Card 4 -->
            <div class="bg-red-100 dark:bg-red-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/200/150?random=4" alt="Visitor Statistics" class="rounded-t-lg">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Visitor Statistics</h2>
                    <p class="text-gray-600 dark:text-gray-400">Monitor visitor statistics and behavior.</p>
                </div>
            </div>
        </div>
        <div class="mt-6">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Users</h2>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
                <ul class="space-y-4">
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 2 days ago</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 1 week ago</p>
                        </div>
                    </li>
                    <li class="flex items-center space-x-4">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</h3>
                            <p class="text-gray-600 dark:text-gray-400">Joined 3 weeks ago</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Componente de filtros

Un componente de filtros responsivo para el comercio electrónico con microinteracciones atractivas y un esquema de color triádico, compatible con el modo oscuro.

Abrir Vista previa

                <div class="flex flex-col p-6 space-y-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Filters</h2>
    <div class="space-y-4">
        <div class="flex items-center justify-between">
            <span class="text-lg text-gray-600 dark:text-gray-300">Category</span>
            <div class="flex space-x-3">
                <button class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" aria-label="Select Electronics">Electronics</button>
                <button class="px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-lg hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all duration-300" aria-label="Select Clothing">Clothing</button>
                <button class="px-4 py-2 text-sm font-semibold text-white bg-purple-600 rounded-lg hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300" aria-label="Select Home Goods">Home Goods</button>
            </div>
        </div>
        <div>
            <label class="block text-gray-600 dark:text-gray-300" for="price">Price Range</label>
            <input type="range" min="0" max="100" class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" id="price" aria-label="Price Range" />
        </div>
        <div>
            <label class="block text-gray-600 dark:text-gray-300">Brand</label>
            <select class="block w-full p-2 mt-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:border-gray-600 dark:focus:ring-blue-500" aria-label="Select Brand">
                <option>Brand A</option>
                <option>Brand B</option>
                <option>Brand C</option>
            </select>
        </div>
        <div>
            <p class="text-gray-600 dark:text-gray-300">Available Products:</p>
            <div class="grid grid-cols-3 gap-4 mt-4">
                <img src="https://picsum.photos/200/200" alt="Product Image 1" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
                <img src="https://picsum.photos/200/200?random=1" alt="Product Image 2" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
                <img src="https://picsum.photos/200/200?random=2" alt="Product Image 3" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
            </div>
        </div>
    </div>
</div>

Botones Me gusta/Reacción

Componente de botones de Me gusta/Reacción con microinteracciones, combinación de colores complementaria, complejidad simple, para fines de redes sociales.

Abrir Vista previa

                <div class="flex items-center justify-center space-x-4">
  <!-- Light mode: Like button -->
  <button class="flex items-center space-x-1 text-blue-600 dark:text-blue-400 focus:outline-none">
    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
    </svg>
    <span>Like</span>
  </button>

  <!-- Dark mode: Like button -->
  <button class="flex items-center space-x-1 text-gray-400 dark:text-gray-600 dark:hover:text-blue-400 focus:outline-none">
    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
    </svg>
    <span>Like</span>
  </button>

  <button class="flex items-center space-x-1 text-red-600 dark:text-red-400 focus:outline-none">
    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
    </svg>
    <span>Love</span>
  </button>
</div>

Componente de restablecimiento de contraseña Brutalismo complejo Tablero análogo

Un componente de restablecimiento de contraseña de estilo brutalista para un tablero, con un diseño complejo, combinación de colores análoga, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-6">
  <div class="w-full max-w-md bg-yellow-300 dark:bg-yellow-700 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-8 space-y-6">
    <h2 class="text-2xl font-bold text-black dark:text-white uppercase border-b-4 border-black dark:border-white pb-4">Reset Password</h2>
    <p class="text-black dark:text-white text-sm font-mono">Enter your email address to receive a password reset link. This action cannot be undone.</p>
    <div class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-bold text-black dark:text-white uppercase mb-2">Email Address</label>
        <input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-orange-300 dark:bg-orange-700 text-black dark:text-white focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white" placeholder="[email protected]">
      </div>
      <div class="flex items-center">
        <input type="checkbox" id="remember" class="h-5 w-5 text-black dark:text-white border- काले dark:border-white focus:ring-0 rounded-none">
        <label for="remember" class="ml-2 block text-sm text-black dark:text-white font-mono">Remember me (not recommended on shared computers)</label>
      </div>
    </div>
    <button class="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-4 border-4 border-black dark:border-white shadow-[6px_6px_0_0_#000] dark:shadow-[6px_6px_0_0_#fff] uppercase transition duration-300 ease-in-out transform active:translate-x-1 active:translate-y-1">
      Send Reset Link
    </button>
    <div class="text-center text-sm">
      <a href="#" class="font-bold text-red-700 dark:text-red-300 hover:underline uppercase">Back to Login</a>
    </div>
  </div>
</div>

Brutalismo Barra lateral Navegación

Componente de navegación de barra lateral receptivo con diseño brutalista, combinación de colores vibrantes y diseño simple para fines de blog / contenido. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Sidebar -->
  <div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
    <nav class="mt-8">
      <ul>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
    <p class="text-gray-700 dark:text-gray-300">
      This is where the main content of your blog or article would go.
      The sidebar provides navigation on the left.
    </p>
  </div>

</div>

Componente de navegación de redes sociales

Un componente de navegación responsivo diseñado para interfaces de redes sociales, con una estética de Material Design que utiliza un tema oscuro con Tailwind CSS.

Abrir Vista previa

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg">
    <div class="flex items-center justify-between">
        <a href="#" class="text-white text-lg font-semibold">Logo</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-300 hover:text-white">Explore</a>
            <a href="#" class="text-gray-300 hover:text-white">Notifications</a>
            <a href="#" class="text-gray-300 hover:text-white">Messages</a>
            <a href="#" class="text-gray-300 hover:text-white">Profile</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:text-white focus:outline-none" aria-label="Menu">
                <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="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white">Explore</a>
        <a href="#" class="block text-gray-300 hover:text-white">Notifications</a>
        <a href="#" class="block text-gray-300 hover:text-white">Messages</a>
        <a href="#" class="block text-gray-300 hover:text-white">Profile</a>
    </div>
</nav>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Friends</h2>
    <div class="flex space-x-4 mt-2">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 1</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 2</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 3</span>
        </div>
    </div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Trending Posts</h2>
    <div class="flex flex-col space-y-4 mt-2">
        <div class="flex space-x-2">
            <img src="https://picsum.photos/50/50" alt="Post Image" class="rounded-lg">
            <div>
                <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <div class="flex space-x-2">
            <img src="https://picsum.photos/50/50?random=1" alt="Post Image" class="rounded-lg">
            <div>
                <p class="text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <span class="text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
</div>\n<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Explore More</h2>
    <ul class="mt-2 space-y-1">
        <li><a href="#" class="text-gray-300 hover:text-white">#Nature</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Travel</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Food</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Technology</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Lifestyle</a></li>
    </ul>
</div>

Componente de mensajes de alerta

Un componente de mensajes de alerta con estilo Glassmorphism para la visualización de datos del tablero, con efectos de vidrio esmerilado, colores complementarios y diseño receptivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="flex flex-col space-y-4 p-6">
    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
                <p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
            </div>
            <button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
                <p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
            </div>
            <button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
                <p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
            </div>
            <button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
        </div>
    </div>
</div>

Componente de navegación de pie de página

Un componente de navegación de pie de página de estilo neomorfismo complejo y receptivo para sitios web corporativos que utiliza un esquema de color en escala de grises con soporte para modo oscuro. Sin JavaScript.

Abrir Vista previa

                <footer class="bg-gray-200 dark:bg-gray-800 py-10 px-5 neumorphism-light dark:neumorphism-dark">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Company</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">About Us</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Careers</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Press</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Products</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Features</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Pricing</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Integrations</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Status</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Resources</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Documentation</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Support</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Guides</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">API Reference</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact</h3>
      <p class="text-gray-600 dark:text-gray-400 mb-4">123 Corporate Ave, Suite 456<br>Business City, BC 78901</p>
      <p class="text-gray-600 dark:text-gray-400 mb-2">Email: [email protected]</p>
      <p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
    </div>
  </div>
  <div class="mt-10 border-t border-gray-300 dark:border-gray-700 pt-8 text-center text-gray-600 dark:text-gray-400">
    <p>&copy; 2023 Your Company. All rights reserved.</p>
  </div>
</footer>

<style>
.neumorphism-light {
  box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

.neumorphism-dark {
  box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 1a1a1a;
}
</style>

Componente del formulario de registro

Componente de formulario de registro con modo oscuro, colores vibrantes y complejidad moderada para fines de blog / contenido.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-gray-800">
  <div class="bg-gray-800 dark:bg-gray-900 p-10 rounded-lg shadow-xl w-full max-w-md">
    <h1 class="text-2xl font-bold text-teal-400 dark:text-teal-500 mb-6 text-center">Register</h1>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Username</label>
        <input type="text" id="username" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Password</label>
        <input type="password" id="password" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your password">
      </div>
      <button type="submit" class="w-full bg-gradient-to-r from-teal-500 to-cyan-600 text-white font-bold py-2 px-4 rounded-md hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">Register</button>
    </form>
  </div>
</div>

Componente de contenedor

Un contenedor de modo oscuro responsivo para el contenido del blog con un diseño simple en escala de grises.

Abrir Vista previa

                <div class="container mx-auto p-4 dark:bg-gray-900 bg-white text-gray-800 dark:text-gray-200 rounded-lg shadow-lg">
  <h1 class="text-2xl font-bold mb-4 text-center">Blog Post Title</h1>
  <img src="https://picsum.photos/seed/unsplash/800/400" alt="Blog Post Image" class="w-full h-auto rounded-md mb-4">
  <div class="prose dark:prose-invert max-w-none">
    <p>This is an example of a blog post content paragraph within the container. It demonstrates a simple layout for reading and content consumption in dark mode.</p>
    <p>The container is designed to be responsive and uses Tailwind CSS classes for styling, including dark mode support with the <code class="language-text">dark:</code> prefix.</p>
    <p>Grayscale colors are used for a clean and minimalist look.</p>
  </div>
</div>

1 ... 132 133 134 135 136 ... 242

Categorías

Todos los componentes