Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de galería

Un componente de galería de imágenes simple y receptivo diseñado para sitios web comerciales / corporativos, con un esquema de color triádico inspirado en los principios de Material Design. Incluye un tema oscuro para las preferencias del usuario y utiliza un diseño basado en cuadrículas.

Abrir Vista previa

                <div class="bg-blue-50 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de lista de deseos

Un componente de lista de deseos responsivo con elementos 3D y colores pastel, compatible con el tema oscuro. Incluye múltiples elementos interactivos aptos para el comercio electrónico. Sin JavaScript, solo HTML y Tailwind CSS.

Abrir Vista previa

                <div class="p-8 font-sans bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen">
  <h1 class="text-4xl font-extrabold mb-8 text-center text-gray-800 dark:text-white relative">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-300 dark:to-pink-300">My Wishlist</span>
    <div class="absolute inset-0 flex items-center justify-center transform -rotate-3 scale-105 z-[-1] opacity-20">
      <img src="https://picsum.photos/seed/wishlist/800/400" alt="3D background element" class="rounded-3xl shadow-2xl">
    </div>
  </h1>

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

    <!-- Wishlist Item 1 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-purple-200 dark:border-purple-600">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product1/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-purple-100 dark:border-purple-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Pastel Dream Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Experience serene sound with these beautifully designed pastel headphones. Perfect for relaxation.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-purple-600 dark:text-purple-300">$129.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-pink-300 dark:border-pink-500 transform rotate-6">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-pink-100 dark:bg-pink-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-purple-400 to-pink-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-purple-500 hover:to-pink-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-blue-200 dark:border-blue-600">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-green-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product2/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-blue-100 dark:border-blue-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Cloud-Nine Comfort Slippers</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Walk on air with these incredibly soft and stylish pastel slippers.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-blue-600 dark:text-blue-300">$49.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-green-300 dark:border-green-500 transform -rotate-6">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-100 dark:bg-green-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-blue-400 to-green-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-blue-500 hover:to-green-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-pink-200 dark:border-pink-600">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product3/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-pink-100 dark:border-pink-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Sunset Hues Scarf</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Wrap yourself in the warm, gentle colors of a sunset with this exquisite scarf.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-pink-600 dark:text-pink-300">$79.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-purple-300 dark:border-purple-500 transform rotate-3">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-100 dark:bg-purple-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-pink-400 to-purple-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-pink-500 hover:to-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

  </div>

</div>

Componente de autenticación de dos factores

Un componente de autenticación de dos factores simple y receptivo para comercio electrónico, con un diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 p-8 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 border-4 border-gray-500 dark:border-gray-600">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-lg">2FA Required</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Please enter the verification code to proceed.</p>
    </div>

    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-red-500 dark:focus:border-red-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-green-500 dark:focus:border-green-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
    </div>

    <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-600 text-white rounded-lg shadow-lg font-bold text-lg hover:from-blue-600 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transform transition-all duration-200 active:scale-95 border-b-4 border-blue-700 dark:border-blue-900">
      Verify Code
    </button>

    <p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
      Didn't receive a code? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend</a>
    </p>
  </div>
</div>

Componente de alerta de tiempo de espera de sesión

Un componente de alerta de tiempo de espera de sesión complejo y receptivo con un diseño minimalista en escala de grises, adecuado para sitios web comerciales e incluye soporte para temas oscuros.

Abrir Vista previa

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full divide-y divide-gray-200 dark:divide-gray-700">
    <div class="p-6">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4" id="modal-title">Your Session Will Expire Soon</h3>
      <p class="text-gray-700 dark:text-gray-300 text-lg mb-6">For your security, your session is about to expire due to inactivity. Please choose an option below to continue or log out.</p>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center mb-6">
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Time Remaining</p>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">01:45</p>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Last Activity</p>
          <p class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-1">5 minutes ago</p>
        </div>
      </div>

      <div class="space-y-4">
        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="flex items-center">
            <svg class="h-6 w-6 text-gray-500 dark:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="text-gray-800 dark:text-gray-200 font-medium">Auto-renew session?</span>
          </div>
          <label for="toggle-auto-renew" class="flex items-center cursor-pointer">
            <div class="relative">
              <input type="checkbox" id="toggle-auto-renew" class="sr-only">
              <div class="block bg-gray-300 dark:bg-gray-600 w-10 h-6 rounded-full"></div>
              <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition dark:bg-gray-400"></div>
            </div>
          </label>
          <style>
            input:checked ~ .dot {
              transform: translateX(100%);
              background-color: #4CAF50; /* A touch of green for

Componente de descripción emergente de Brutalismo

Componente de información sobre herramientas de estilo brutalismo para redes sociales, con un esquema de color en escala de grises y elementos interactivos complejos. Es responsivo y admite el modo oscuro usando Tailwind CSS, sin JavaScript.

Abrir Vista previa

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="group relative flex flex-col items-center">
    <!-- User Avatar (Trigger for Tooltip) -->
    <img class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 cursor-pointer object-cover" src="https://api.randomuser.me/portraits/men/32.jpg" alt="User Avatar">
    
    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-6 w-80 p-6 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 border-4 border-gray-700 dark:border-gray-300 transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:-translate-y-0 transition-all duration-300 ease-in-out pointer-events-none group-hover:pointer-events-auto shadow-[8px_8px_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_rgba(255,255,255,0.4)]">
      <h3 class="text-xl font-bold uppercase mb-2">User Profile</h3>
      <p class="text-sm border-b-2 border-gray-700 dark:border-gray-300 pb-2 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
      <div class="flex justify-between items-center text-sm mb-2">
        <span class="font-semibold">Followers:</span>
        <span>1.2M</span>
      </div>
      <div class="flex justify-between items-center text-sm mb-4">
        <span class="font-semibold">Following:</span>
        <span>345</span>
      </div>

      <div class="grid grid-cols-3 gap-2 mb-4">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social1/100/100" alt="Post 1">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social2/100/100" alt="Post 2">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social3/100/100" alt="Post 3">
      </div>

      <a href="#" class="block w-full py-2 text-center uppercase font-bold bg-gray-700 dark:bg-gray-300 text-gray-100 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-600 dark:hover:bg-gray-400 transition-colors duration-200">
        View Profile
      </a>
      
      <!-- Brutalist Arrow -->
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%-8px)] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[20px] border-t-gray-900 dark:border-t-gray-100 group-hover:translate-y-[calc(100%-12px)] transition-transform duration-300"></div>
    </div>
  </div>
</div>

Componente Columnas

Un componente de columna simple y receptivo con un tema monocromático oscuro, adecuado para exhibir portafolios.

Abrir Vista previa

                <div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum1/400/300" alt="Project 1">
      <h3 class="text-xl font-semibold mb-2">Project One</h3>
      <p class="text-gray-400 text-sm">A brief description of project one, highlighting its key features and technologies used.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum2/400/300" alt="Project 2">
      <h3 class="text-xl font-semibold mb-2">Project Two</h3>
      <p class="text-gray-400 text-sm">Another project description, focusing on the impact and results of the work.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum3/400/300" alt="Project 3">
      <h3 class="text-xl font-semibold mb-2">Project Three</h3>
      <p class="text-gray-400 text-sm">Description for the third project, detailing the creative process and solutions.</p>
    </div>
  </div>
</div>

Componente del Foro de la Comunidad

Un componente del foro de la comunidad al estilo de Neumorphism para un portafolio, con un esquema de color pastel y un diseño complejo y receptivo con soporte para temas oscuros. Incluye una lista de foros, actividad reciente y perfiles de usuario, todo implementado usando Tailwind CSS sin JavaScript.

Abrir Vista previa

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar: Forum Categories/List -->
    <div class="lg:col-span-1 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Forum Categories</h2>
      <ul>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-blue-400 mr-3"></span> General Discussion
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-green-400 mr-3"></span> Project Feedback
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-purple-400 mr-3"></span> Tech Talk
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-red-400 mr-3"></span> Off-Topic
          </a>
        </li>
      </ul>
    </div>

    <!-- Main Content: Forum Threads -->
    <div class="lg:col-span-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Recent Threads</h2>

      <!-- Thread Card 1 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-blue-300 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Help needed with Neumorphism shadows</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-blue-500 dark:text-blue-400">John Doe</span></span>
            <span>2 hours ago</span>
             <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                15
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 2 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-pink-300 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Ideas for a portfolio redesign?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-pink-500 dark:text-pink-400">Jane Smith</span></span>
            <span>5 hours ago</span>
            <span class="ml-auto flex items-center">
                 <svg class="w-4 h-4 mr-1 text-green-500" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                27
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 3 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-green-300 dark:border-green-500" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Best practices for responsive typography?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-green-500 dark:text-green-400">Alice Johnson</span></span>
            <span>Yesterday</span>
            <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                12
            </span>
          </div>
        </div>
      </div>

      <button class="w-full py-3 mt-4 rounded-lg bg-blue-400 dark:bg-blue-600 text-white font-semibold shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark transition duration-300">
        Load More Threads
      </button>
    </div>

  </div>
</div>

<style>
  /* Neumorphic Shadows - Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-flat-light {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-pressed-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphic Shadows - Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #4a4a4a, -8px -8px 15px #2c2c2c;
  }
  .dark .shadow-neumorphic-flat-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }

  /* Pastel Colors for Light Mode */
  .bg-gray-200 { background-color: #e0e5ec; } /* Light background */
  .bg-gray-300 { background-color: #dae0e8; } /* Slightly darker accent */
  .text-gray-700 { color: #5c6a7e; }
  .text-gray-600 { color: #7f8fa5; }
  .text-blue-400 { color: #87ceeb; } /* Sky Blue */
  .text-green-400 { color: #98fb98; } /* Pale Green */
  .text-purple-400 { color: #dda0dd; } /* Plum */
  .text-red-400 { color: #f08080; } /* Light Coral */
  .border-blue-300 { border-color: #a7d9f7; }
  .border-pink-300 { border-color: #f7a7d9; }
  .border-green-300 { border-color: #b3f7a7; }

  /* Pastel Colors for Dark Mode */
  .dark\:bg-gray-800 { background-color: #2c2c2c; }
  .dark\:bg-gray-700 { background-color: #3a3a3a; }
  .dark\:bg-gray-600 { background-color: #4a4a4a; }
  .dark\:text-gray-200 { color: #e0e0e0; }
  .dark\:text-gray-300 { color: #c0c0c0; }
  .dark\:text-gray-400 { color: #a0a0a0; }
  .dark\:text-gray-100 { color: #f0f0f0; }
  .dark\:text-blue-600 { color: #6495ed; } /* Cornflower Blue */
  .dark\:text-pink-600 { color: #ff69b4; } /* Hot Pink */
  .dark\:text-green-600 { color: #3cb371; } /* Medium Sea Green */
  .dark\:border-blue-500 { border-color: #4682b4; }
  .dark\:border-pink-500 { border-color: #c71585; }
  .dark\:border-green-500 { border-color: #2e8b57; }
  .dark\:focus\:ring-blue-500 { --tw-ring-color: #6495ed; }

</style>

<script>
  // You can toggle dark mode with a simple script if needed,
  // for example, by adding/removing the "dark" class to the root element.
  // This example assumes a mechanism for dark mode toggling is already in place or will be added externally.
</script>

Componente Tarjetas de producto

Tarjetas de producto responsivas con efecto de vidrio esmerilado Glassmorphism usando colores pastel, con soporte para modo oscuro. Adecuado para interfaces de redes sociales.

Abrir Vista previa

                <div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black items-center justify-center p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Product Card 1 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=1" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Pastel Dreams</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Embrace the soft hues and gentle vibes with this serene collection.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">John Doe</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-purple-700 dark:text-purple-300">$29.99</span>
        <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Whispering Lilacs</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Delicate and enchanting, perfect for a touch of elegance in your feed.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">Jane Smith</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-pink-700 dark:text-pink-300">$35.50</span>
        <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=3" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Misty Mornings</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Soft and inviting, ideal for sharing peaceful moments with your followers.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">Peter Jones</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-green-700 dark:text-green-300">$22.00</span>
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>
  </div>
</div>

Componente del Foro de la Comunidad

Un componente minimalista del foro de la comunidad con soporte para el modo oscuro. Este componente está diseñado para carteras y presenta un diseño simple con colores en tonos tierra.

Abrir Vista previa

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-4 flex flex-col items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-200 mb-6 text-center">Community Forum</h1>

    <!-- New Post Section -->
    <div class="mb-6">
      <textarea class="w-full p-3 rounded-md bg-stone-50 dark:bg-stone-700 text-stone-700 dark:text-stone-300 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400" rows="3" placeholder="Write a new post..."></textarea>
      <div class="flex justify-end mt-2">
        <button class="px-4 py-2 bg-stone-600 text-white rounded-md hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500">Post</button>
      </div>
    </div>

    <!-- Forum Posts -->
    <div class="space-y-4">
      <!-- Post 1 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">2 hours ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">This is a great community! I just wanted to share my latest project. Feedback is welcome!</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>5 Likes</span>
          <span>3 Comments</span>
        </div>
      </div>

      <!-- Post 2 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Jane Smith</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">Yesterday</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Looking for collaborators on an exciting new open-source project. Anyone interested in web development?</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>12 Likes</span>
          <span>7 Comments</span>
        </div>
      </div>

      <!-- Post 3 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Peter Jones</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">3 days ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Just launched my new portfolio! Check it out and let me know what you think. [Link to portfolio]</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>8 Likes</span>
          <span>2 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de autenticación de dos factores

Un componente simple de autenticación de dos factores con estética de Material Design, combinación de colores análoga y compatibilidad con temas oscuros receptivos.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div
      class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"
    ></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Two-Factor Authentication</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>Please enter the 6-digit code sent to your device.</p>
            <div class="relative">
              <input
                autocomplete="off"
                id="code"
                name="code"
                type="text"
                class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:outline-none focus:borer-rose-600"
                placeholder="XXXXXX"
                maxlength="6"
              />
              <label
                for="code"
                class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all"
                >Verification Code</label
              >
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400">Can't find your code? Check your spam folder.</p>
          </div>
          <div class="pt-6 text-base leading-6 space-y-4 sm:text-lg sm:leading-7">
            <button
              class="bg-cyan-500 dark:bg-cyan-600 text-white rounded-md px-6 py-2 hover:bg-cyan-600 dark:hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
            >
              Verify
            </button>
            <a href="#" class="ml-4 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
              >Resend Code</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 83 84 85 86 87 ... 282

Categorías

Todos los componentes