Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Saltar al enlace de contenido

Un enlace minimalista de salto al contenido para la accesibilidad en aplicaciones web, diseñado para paneles.

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-1/2 focus:-translate-x-1/2 focus:bg-gray-800 focus:text-white focus:px-4 focus:py-2 focus:rounded-b-lg focus:z-50 dark:focus:bg-gray-100 dark:focus:text-gray-900">Skip to main content</a>

Componente de cargadores

Un componente de carga de Material Design receptivo con esquema de color triádico, adecuado para un portafolio, con soporte para temas oscuros y múltiples elementos interactivos.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Component: Complex Material Design Loader for Portfolio -->
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-8 animate-fade-in">

    <!-- Header/Title Section -->
    <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 capitalize">Portfolio Showcase Loading</h2>
      <div class="flex space-x-2">
        <div class="w-8 h-8 bg-purple-500 dark:bg-purple-600 rounded-full animate-pulse"></div>
        <div class="w-8 h-8 bg-green-500 dark:bg-green-600 rounded-full animate-pulse delay-75"></div>
      </div>
    </div>

    <!-- Project/Item Loading Cards (Grid Layout) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Loading Card 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-150">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 3 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-300">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 4 (for larger screens) -->
      <div class="hidden lg:block bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-[450ms]">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

    </div>

    <!-- Progress Bar Section -->
    <div class="space-y-4">
      <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div class="h-full w-2/3 bg-gradient-to-r from-blue-500 to-green-400 dark:from-blue-600 dark:to-green-500 rounded-full animate-progress-fill"></div>
      </div>
      <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Loading portfolio items... Please wait.</p>
    </div>

    <!-- Call to Action / Interactive Elements (Placeholder) -->
    <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="w-full sm:w-auto px-8 py-3 bg-fuchsia-500 dark:bg-fuchsia-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 animate-bounce-slow">
        <div class="flex items-center justify-center space-x-2">
          <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span>Processing Data</span>
        </div>
      </button>
      <button class="w-full sm:w-auto px-8 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
        <span class="animate-pulse">Fetching Assets</span>
      </button>
    </div>

  </div>

  <!-- Tailwind CSS Customizations (Animations) -->
  <style>
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fade-in 0.8s ease-out forwards; 
    }

    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s infinite ease-in-out;
    }

    @keyframes progress-fill {
      0% { width: 0%; }
      100% { width: 66.66%; } /* Simulating 2/3 progress */
    }
    .animate-progress-fill {
      animation: progress-fill 1.5s ease-out forwards;
    }
    
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      25% { transform: translateY(-5px); }
      50% { transform: translateY(0); }
      75% { transform: translateY(-2px); }
      100% { transform: translateY(0); }
    }
    .animate-bounce-slow {
        animation: bounce-slow 4s infinite ease-in-out;
    }

  </style>

</div>

Componente de cuadro de búsqueda

Un componente de cuadro de búsqueda receptivo para sitios web comerciales / corporativos, con microinteracciones y un esquema de color análogo. Incluye una entrada de búsqueda, un botón y un menú desplegable de resultados dinámicos con avatares de usuario y texto, compatible con el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md">
    <div class="relative flex items-center w-full h-12 rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden group">
      <div class="grid place-items-center h-full w-12 text-gray-300 dark:text-gray-600">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>

      <input
        class="peer h-full w-full outline-none text-sm text-gray-700 dark:text-gray-200 pr-2 bg-white dark:bg-gray-800 transition-all duration-300 focus:w-[calc(100%-3rem)]"
        type="text"
        id="search-input"
        placeholder="Search for services, products, or people..." />

      <button class="absolute right-0 h-full w-12 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white rounded-r-lg flex items-center justify-center transition-all duration-300 group-focus-within:w-24 group-focus-within:bg-blue-600 group-focus-within:dark:bg-blue-800">
        <span class="hidden group-focus-within:block text-sm">Search</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 group-focus-within:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>
    </div>

    <!-- Search Results Dropdown -->
    <div class="absolute w-full mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden opacity-0 scale-y-0 transform origin-top transition-all duration-300 group-focus-within:opacity-100 group-focus-within:scale-y-100">
        <ul class="py-2">
            <!-- Result Item 1 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Software Engineer at TechCorp</p>
                </div>
            </li>
            <!-- Result Item 2 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Marketing Manager at GlobalBiz</p>
                </div>
            </li>
            <!-- Result Item 3 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Company XYZ Services</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Cloud Computing Solutions</p>
                </div>
            </li>
            <!-- Result Item 4 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1018/100/100" alt="Product Image">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Product A</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Advanced Analytics Platform</p>
                </div>
            </li>
            <!-- Result Item 5 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1015/100/100" alt="Service Image">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Consulting Services</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Strategic Business Consultation</p>
                </div>
            </li>
        </ul>
    </div>
  </div>
</div>

Información sobre herramientas del panel de control de Skeuomorphic

Un componente de información sobre herramientas complejo y esqueuomórfico para un tablero, con un esquema de color triádico y un diseño receptivo con soporte para modo oscuro, creado con Tailwind CSS y 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="relative group">
    <!-- Trigger Element (e.g., a button or icon) -->
    <button class="px-6 py-3 text-white rounded-lg shadow-lg bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 transform hover:scale-105">
      Hover for Dashboard Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-80 p-6 rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 group-hover:visible transition-all duration-500 transform scale-90 group-hover:scale-100
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                border-4 border-gray-300 dark:border-gray-600
                hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-800
                flex flex-col space-y-4
                pointer-events-none group-hover:pointer-events-auto">

      <!-- Top Bar with Icon and Title -->
      <div class="flex items-center pb-3 border-b-2 border-gray-300 dark:border-gray-600">
        <svg class="w-8 h-8 mr-3 text-indigo-700 dark:text-indigo-400" 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.75 17L12 21.75l2.25-4.75M12 17V3m-4.5 9h9"></path>
        </svg>
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Dashboard Overview</h3>
      </div>

      <!-- Key Metrics Section -->
      <div class="grid grid-cols-2 gap-4">
        <div class="p-3 rounded-lg bg-gradient-to-br from-red-300 to-red-500 dark:from-red-700 dark:to-red-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Revenue</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">$12,450</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-green-300 to-green-500 dark:from-green-700 dark:to-green-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Users</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">8,900</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-700 dark:to-yellow-900 shadow-inner">
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">Completion</p>
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">75%</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-700 dark:to-purple-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Avg. Time</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">4:30 min</p>
        </div>
      </div>

      <!-- Recent Activity / News Feed Mock-up -->
      <div class="p-3 rounded-lg bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-inner border border-gray-200 dark:border-gray-700">
        <h4 class="mb-2 text-md font-semibold text-gray-700 dark:text-gray-200">Recent Activity</h4>
        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex items-center">
            <img class="object-cover w-6 h-6 mr-2 rounded-full shadow" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <span>New user

Caja de luz de imagen esqueuomórfica

Un componente de caja de luz de imagen receptivo con un diseño de escala de grises esqueuomórfico para carteras, compatible con el modo oscuro.

Abrir Vista previa

                
<div class="p-4 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Lightbox Item 1 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=1" alt="Portfolio Image 1" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Lightbox Item 2 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=2" alt="Portfolio Image 2" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Lightbox Item 3 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=3" alt="Portfolio Image 3" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Add more lightbox items as needed -->

  </div>
</div>

Redes SocialesPostModal

Un componente modal simple, receptivo, inspirado en Material Design con un esquema de color análogo, adecuado para aplicaciones de redes sociales. Admite tema oscuro.

Abrir Vista previa

                
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center">
  <div class="relative p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Post Created!</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-400">Your post has been successfully shared with your followers.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder image for social media post">
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-900">Awesome!</button>
      </div>
    </div>
  </div>
</div>

Componente Mega Menú

Componente de mega menú con interfaz de usuario de modo oscuro, combinación de colores análoga y complejidad compleja para fines de tablero, utilizando Tailwind CSS. Debe ser responsivo y admitir el tema oscuro mediante el prefijo Tailwind dark:. No se necesita código JavaScript, solo HTML con clases de Tailwind. Las imágenes son de picsum.photos y los avatares de randomuser.me.

Abrir Vista previa

                <nav class="relative bg-[#1a202c] dark:bg-[#0e131d] shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
            <div class="flex">
                <div class="flex-shrink-0 flex items-center">
                    <a href="#" class="text-white text-2xl font-bold">Dashboard</a>
                </div>
                <div class="hidden md:ml-6 md:flex md:space-x-8">
                    <a href="#" class="border-b-2 border-indigo-500 text-white dark:text-gray-300 px-3 py-2 text-sm font-medium">Home</a>
                    <a href="#" class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium">Analytics</a>
                    <a href="#" class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium">Reports</a>
                    <div class="relative group">
                        <button class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium flex items-center">
                            Products
                            <svg class="ml-2 h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                        <div class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 hidden group-hover:block">
                            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                                <div class="relative grid gap-6 bg-gray-800 dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
                                    <a href="#" class="flex items-start -m-3 p-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
                                        <div class="flex-shrink-0 h-6 w-6 text-indigo-400">
                                            <!-- Heroicon name: light bulb -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 20v-3m0 0l-1.673-1.673M12 17l1.673-1.673M11 10V6m0 0L8.327 7.673M11 6l1.673 1.673m-1.673 4h4.673" />
                                            </svg>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-base font-medium text-white">Product A</p>
                                            <p class="mt-1 text-sm text-gray-400">Description for Product A.</p>
                                        </div>
                                    </a>
                                    <a href="#" class="flex items-start -m-3 p-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
                                        <div class="flex-shrink-0 h-6 w-6 text-indigo-400">
                                            <!-- Heroicon name: light bulb -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                                            </svg>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-base font-medium text-white">Product B</p>
                                            <p class="mt-1 text-sm text-gray-400">Description for Product B.</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden md:ml-6 md:flex md:items-center">
                <button class="bg-gray-700 dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
                <div class="ml-3 relative">
                    <div>
                        <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                            <span class="sr-only">Open user menu</span>
                            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                        </button>
                    </div>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <!-- Mobile menu button -->
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!--
                        Icon when menu is closed.

                        Heroicon name: outline/menu

                        Menu open: "hidden", Menu closed: "block"
                    -->
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!--
                        Icon when menu is open.

                        Heroicon name: outline/x

                        Menu open: "block", Menu closed: "hidden"
                    -->
                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->
    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Analytics</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Products</a>
        </div>
        <div class="pt-4 pb-3 border-t border-gray-700">
            <div class="flex items-center px-5">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                </div>
                <div class="ml-3">
                    <div class="text-base font-medium text-white">John Doe</div>
                    <div class="text-sm font-medium text-gray-400">[email protected]</div>
                </div>
                <button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
            </div>
            <div class="mt-3 px-2 space-y-1">
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
            </div>
        </div>
    </div>
</nav>

Componente de tablas de datos

Un componente de tabla de datos receptivo con diseño de neumorfismo, un esquema de color triádico y compatibilidad con modo oscuro, adecuado para un blog o sitio de contenido.

Abrir Vista previa

                <div class="p-8 font-sans antialiased text-gray-700 bg-gray-200 dark:bg-gray-900 dark:text-gray-200 transition-all duration-500">
  <div class="p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="mb-6 text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">Our Latest Posts</h2>
    <div class="overflow-x-auto">
      <table class="w-full text-left table-auto">
        <thead>
          <tr>
            <th class="p-4 rounded-tl-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Title</th>
            <th class="p-4 bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Category</th>
            <th class="p-4 rounded-tr-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post1/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Exploring Neumorphism in UI Design                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-200 rounded-full dark:text-blue-200 dark:bg-blue-800">Design</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-15</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post2/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                The Future of Web Development                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">Technology</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-20</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post3/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Mastering Tailwind CSS                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-red-800 bg-red-200 rounded-full dark:text-red-200 dark:bg-red-800">Front-end</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-25</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post4/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                A Journey into Minimalist Art                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">Art</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-02-01</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows for light theme */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a6a6a6, -8px -8px 16px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a6a6a6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows for dark theme */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #2e2e2e;
  }

</style>

<script>
  // This script is for demonstration purposes to toggle dark mode.
  // In a real application, you might use a theme switcher or OS preference.
  document.documentElement.classList.add('dark');
</script>

Componente de visualización de precios

Un componente de visualización de precios de estilo Neumorphism con un esquema de color complementario (naranja suave y azul claro), complejidad moderada para el comercio electrónico. Cuenta con un diseño responsivo con soporte para temas oscuros. El componente muestra una imagen, un título y un precio del producto con un botón "Agregar al carrito". El modo oscuro utiliza colores complementarios desaturados.

Abrir Vista previa

                <div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
    
    <!-- Product Image (Placeholder) -->
    <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
    </div>

    <!-- Product Title -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
    
    <!-- Product Description (Optional - Uncomment if needed) -->
    <!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->

    <!-- Price and Add to Cart -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Add to Cart
      </button>
    </div>

    <!-- Additional Details (Optional) -->
    <div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
      </div>
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
      </div>
    </div>

  </div>

  <!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
  <div style="display: none;">
    <!-- You would typically add this to your tailwind.config.js file under 'extend' -->
    <pre>
      module.exports = {
        theme: {
          extend: {
            boxShadow: {
              'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
              'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
              'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
              'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
              'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
              'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
              'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
              'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
            }
          }
        }
      }
    </pre>
  </div>

</div>

Componente Deslizador de carrusel

Un componente deslizante de carrusel receptivo con soporte para modo oscuro. Este componente utiliza solo HTML y Tailwind CSS, sin JavaScript. Cuenta con un diseño simple con colores vibrantes para la diapositiva activa, adecuado para el blog o el consumo de contenido.

Abrir Vista previa

                <div class="relative w-full max-w-3xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden">
  <!-- Carousel wrapper -->
  <div class="relative h-64 md:h-80 lg:h-96 overflow-hidden rounded-lg">
    <!-- Item 1 -->
    <div id="carousel-item-1" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0">
      <img src="https://picsum.photos/seed/1/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Simple Dark Mode Carousel</h3>
        <p class="text-sm md:text-base">A clean and vibrant carousel for your blog.</p>
      </div>
    </div>
    <!-- Item 2 -->
    <div id="carousel-item-2" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/2/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Engaging Content Display</h3>
        <p class="text-sm md:text-base">Showcase your articles with vibrant highlights.</p>
      </div>
    </div>
    <!-- Item 3 -->
    <div id="carousel-item-3" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/3/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Responsive Across Devices</h3>
        <p class="text-sm md:text-base">Looks great on desktop, tablet, and mobile.</p>
      </div>
    </div>
  </div>
  <!-- Slider indicators (Dots) -->
  <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2 rtl:space-x-reverse">
    <button type="button" class="w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-600" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 2"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 3"></button>
  </div>
  <!-- Slider controls -->
  <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
      </svg>
      <span class="sr-only">Previous</span>
    </span>
  </button>
  <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
      </svg>
      <span class="sr-only">Next</span>
    </span>
  </button>
</div>

1 ... 85 86 87 88 89 ... 282

Categorías

Todos los componentes