Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente del menú de hamburguesas

Un componente de menú de hamburguesas complejo, receptivo y vibrante con microinteracciones para el comercio electrónico, con una navegación deslizable, enlaces de categoría, una barra de búsqueda e íconos de redes sociales. Es compatible con el modo oscuro y utiliza Lorem Picsum para las imágenes.

Abrir Vista previa

                <div class="relative">
  <input type="checkbox" id="menu-toggle" class="hidden peer" />
  <label for="menu-toggle" class="block cursor-pointer p-4 md:hidden focus:outline-none">
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:rotate-45 peer-checked:translate-y-2"></div>
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:opacity-0"></div>
    <div class="w-6 h-1 bg-fuchsia-500 transition-all duration-300 peer-checked:-rotate-45 peer-checked:-translate-y-2"></div>
  </label>

  <div class="fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-fuchsia-600 to-purple-700 text-white p-5 shadow-lg overflow-auto z-50 transform -translate-x-full peer-checked:translate-x-0 transition-transform duration-300 ease-in-out dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 md:relative md:w-auto md:h-auto md:bg-none md:shadow-none md:translate-x-0 md:flex md:flex-col md:overflow-visible">
    <div class="mb-8 md:hidden">
      <img src="https://www.picsum.photos/100/100" alt="Store Logo" class="rounded-full mx-auto mb-3" />
      <p class="text-center text-lg font-bold">E-Shop</p>
    </div>

    <nav class="md:flex md:flex-col md:space-y-2">
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Shop All</a>
      <div class="relative group">
        <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Categories</a>
        <div class="ml-5 text-sm absolute left-full top-0 w-48 bg-fuchsia-800 p-3 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-300 invisible group-hover:visible dark:bg-gray-700">
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Electronics</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Apparel</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Home Goods</a>
        </div>
      </div>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Deals</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Contact</a>
    </nav>

    <div class="mt-8 md:mt-4">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-fuchsia-700 bg-opacity-70 text-white placeholder-fuchsia-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-300 dark:bg-gray-700 dark:placeholder-gray-400" />
    </div>

    <div class="mt-8 pt-8 border-t border-fuchsia-500 border-opacity-50 text-center md:mt-4 md:pt-4 md:border-none">
      <p class="text-sm mb-4">Follow Us</p>
      <div class="flex justify-center space-x-4">
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</div>

360DegreeViewerComponent

Un componente de visor 360 simple con un diseño brutalista, colores complementarios y compatibilidad con el modo oscuro. Utiliza solo HTML y Tailwind CSS.

Abrir Vista previa

                <div class="dark:bg-stone-900 bg-amber-50 relative h-screen flex flex-col items-center justify-center font-mono">
  
  <!-- Brutalist Border -->
  <div class="absolute inset-0 border-8 border-stone-950 dark:border-amber-50"></div>

  <div class="relative z-10 p-8 md:p-12 lg:p-16 bg-fuchsia-700 dark:bg-teal-700 text-amber-50 dark:text-stone-900 
                      border-4 border-stone-950 dark:border-amber-50 
                      shadow-[8px_8px_0_0_#1c1917] dark:shadow-[8px_8px_0_0_#fcd34d]">
    
    <h1 class="text-4xl md:text-5xl lg:text-6xl 
               font-extrabold mb-6 
               uppercase 
               border-b-4 border-amber-50 dark:border-stone-900 
               pb-2">
      360° Viewer
    </h1>
    
    <div class="relative w-full aspect-video 
                bg-stone-950 dark:bg-amber-50 
                border-4 border-stone-950 dark:border-amber-50 
                overflow-hidden
                mb-6">
      <!-- Placeholder for 360 image - in a real scenario, this would be a JS-powered viewer -->
      <img src="https://picsum.photos/seed/360view/800/450" 
           alt="360 degree view placeholder" 
           class="w-full h-full object-cover opacity-70">
      <div class="absolute inset-0 flex items-center justify-center">
        <p class="text-amber-50 dark:text-stone-900 text-xl md:text-2xl lg:text-3xl font-bold detection-sm:hidden">
          Content Placeholder
        </p>
      </div>
    </div>
    
    <p class="text-lg md:text-xl leading-relaxed mb-6">
      Explore this object from every angle. 
      This brutalist design emphasizes raw functionality and stark contrasts. 
      A complementary color scheme of deep fuchsia and teal (or amber and dark stone in dark mode) enhances the visual tension.
    </p>
    
    <div class="flex justify-between items-center">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" 
             alt="Author Avatar" 
             class="w-12 h-12 md:w-16 md:h-16 rounded-full 
                    border-4 border-stone-950 dark:border-amber-50 
                    shadow-[4px_4px_0_0_#1c1917] dark:shadow-[4px_4px_0_0_#fcd34d]">
        <span class="text-xl font-bold">J. Doe</span>
      </div>
      <a href="#" class="inline-block px-6 py-3 
                           bg-stone-950 dark:bg-amber-50 
                           text-amber-50 dark:text-stone-900 
                           uppercase font-bold 
                           border-4 border-stone-950 dark:border-amber-50 
                           shadow-[6px_6px_0_0_#8B0000] dark:shadow-[6px_6px_0_0_#2F4F4F]
                           hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all duration-200">
        Learn More
      </a>
    </div>

  </div>
</div>

Componente de cuadro de búsqueda

Un componente de cuadro de búsqueda complejo de estilo Glassmorphism con un esquema de color análogo, adecuado para un portafolio, con diseño receptivo y soporte de temas oscuros que usa solo HTML y Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="relative w-full max-w-2xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-2xl p-6 border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700"><div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-blue-500 dark:from-purple-700 dark:to-blue-900 opacity-20 rounded-2xl"></div><div class="relative z-10 flex items-center space-x-4"><svg class="h-8 w-8 text-gray-800 dark:text-gray-200" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><input type="text" placeholder="Search your projects, skills, or articles..." class="flex-1 p-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-xl text-gray-900 dark:text-white placeholder-gray-700 dark:placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300 ease-in-out border border-gray-300 dark:border-gray-600"></div><div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Recent Searches</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#WebDesign</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#FrontEndDev</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#UIUX</span></div><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Popular Categories</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Development</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Design</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Marketing</span></div></div><div class="mt-6 text-center"><button class="px-6 py-3 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold rounded-full shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">Advanced Search</button></div></div></div>

Componente de carrito de compras

Un componente de carrito de compras simple y receptivo con soporte para temas oscuros, diseñado con Tailwind CSS siguiendo los principios de Material Design con un esquema de color en escala de grises. Utiliza picsum.photos para las imágenes de productos.

Abrir Vista previa

                <div class="container mx-auto p-4">
  <div class="dark:bg-gray-800 bg-white shadow-md rounded-lg p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Your Shopping Cart</h1>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
        <p class="text-gray-800 dark:text-white font-bold">$299.99</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 1
      </div>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Books</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.50</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 2
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
      <span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
    </div>

    <div class="mt-6 flex justify-end">
      <button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
        Checkout
      </button>
    </div>
  </div>
</div>

Componente del sistema de clasificación

Un complejo componente del sistema de clasificación de temática retro para las redes sociales, con un esquema de color monocromático. Es totalmente responsivo y admite un modo oscuro. Este componente utiliza solo HTML y Tailwind CSS, sin JavaScript.

Abrir Vista previa

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">

  <!-- Retro Rating System Component -->
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <div class="mb-6 text-center">
      <h2 class="text-3xl font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wider">Rate This Post</h2>
      <p class="text-gray-500 dark:text-gray-400 text-sm">Share your thoughts with the community!</p>
    </div>

    <!-- User Avatar and Post Info -->
    <div class="flex items-center mb-6">
      <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-100">Galactic Traveler</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
      </div>
    </div>

    <!-- Rating Stars -->
    <div class="flex justify-center items-center mb-6">
      <input type="radio" id="star5" name="rating" value="5" class="hidden" />
      <label for="star5" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star4" name="rating" value="4" class="hidden" />
      <label for="star4" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star3" name="rating" value="3" class="hidden" />
      <label for="star3" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star2" name="rating" value="2" class="hidden" />
      <label for="star2" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star1" name="rating" value="1" class="hidden" />
      <label for="star1" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
    </div>

    <!-- Textarea for comments -->
    <div class="mb-6">
      <textarea class="w-full p-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-all duration-200 resize-y" rows="4" placeholder="Leave your comment here..."></textarea>
    </div>

    <!-- Buttons -->
    <div class="flex justify-between space-x-4">
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-700 hover:bg-gray-800 text-white dark:bg-gray-600 dark:hover:bg-gray-700 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Submit Rating
      </button>
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-300 hover:bg-gray-400 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Cancel
      </button>
    </div>

    <!-- Popular Reviews Section (Responsive) -->
    <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4 text-center">Popular Reviews</h3>
      <div class="grid gap-4 md:grid-cols-2">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Pixel Pioneer</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★★</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Absolutely loved this! Brings back so many memories of old forums."</p>
        </div>
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Data Diver</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★☆</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Great design, very nostalgic. A bit slow on my old phone though."</p>
        </div>
      </div>
       <div class="mt-4 text-center">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:underline text-sm">View all reviews</a>
      </div>
    </div>

  </div>

</div>

Componente de información sobre herramientas

Un componente de información sobre herramientas de diseño de materiales receptivo con esquema de color monocromático para comercio electrónico, con soporte para modo oscuro. No solo JavaScript, HTML y Tailwind CSS.

Abrir Vista previa

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

  <!-- Product Card (Example to show tooltip in context) -->
  <div class="group relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <div class="p-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Stylish Headphones</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Immerse yourself in rich, clear sound with these premium headphones.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-gray-50">$149.99</span>
        
        <!-- Tooltip Trigger (e.g., Add to Cart Button) -->
        <button class="relative bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-medium py-2 px-4 rounded-full transition-colors duration-300 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          Add to Cart

          <!-- Tooltip Content -->
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
            Add item to your shopping cart
            <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 0L0 10h20L10 0z"/>
            </svg>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Another Tooltip Example (e.g., Info Icon) -->
  <div class="group relative ml-12">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500 dark:text-gray-400 cursor-pointer transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-500" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2h1a1 1 0 001-1V9a1 1 0 00-1-1H9zm6 3a1 1 0 100 2h2a1 1 0 100-2h-2z" clip-rule="evenodd" />
    </svg>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
      More information about the product
      <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0L0 10h20L10 0z"/>
      </svg>
    </div>
  </div>

</div>

GlassmorphismModalComponent

Un componente modal de estilo Glassmorphism con un esquema de color análogo, complejidad moderada, adecuado para la visualización de blog/contenido. Cuenta con un diseño responsivo con soporte para temas oscuros utilizando Tailwind CSS.

Abrir Vista previa

                <div class="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center p-4 z-50 dark:bg-opacity-80"> <div class="relative bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-6 md:p-8 lg:p-10 max-w-2xl w-full m-4 border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 text-gray-900 dark:text-white transform transition-all scale-100 opacity-100"> <!-- Close Button --> <button class="absolute top-4 right-4 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition duration-300 ease-in-out focus:outline-none"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Modal Header --> <div class="mb-6"> <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">The Wonders of Glassmorphism</h3> <p class="text-lg text-gray-800 dark:text-gray-200">Embrace the beauty of translucent design.</p> </div> <!-- Modal Content - Article Preview --> <div class="space-y-6 text-gray-800 dark:text-gray-200"> <img src="https://picsum.photos/600/350?random=1" alt="Abstract Glassmorphism Background" class="rounded-lg mb-4 shadow-md object-cover w-full h-auto"> <p class="leading-relaxed"> Glassmorphism is a design trend characterized by a frosted-glass effect, where backgrounds are blurred to create a sense of depth and translucency. This aesthetic often involves vibrant colors, light borders, and distinct layering, giving UI elements a sense of floating on the screen. It

Componente del formulario de registro

Un componente de formulario de registro interactivo con un estilo de glassmorphism, combinación de colores en tonos tierra y compatibilidad con temas oscuros. Diseñado para plataformas de redes sociales, con un diseño simple y elementos mínimos. Utiliza Tailwind CSS para aplicar estilo e incluye marcadores de posición de imagen de ejemplo.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative p-8 rounded-lg shadow-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-stone-300 to-stone-500 opacity-30 dark:from-stone-700 dark:to-stone-900"></div>
    
    <h2 class="text-3xl font-bold text-center text-stone-800 dark:text-stone-100 mb-6">Register</h2>
    
    <form>
      <div class="mb-4">
        <label for="username" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-6">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <button type="submit" class="w-full bg-stone-600 dark:bg-stone-700 text-white p-3 rounded-lg font-semibold hover:bg-stone-700 dark:hover:bg-stone-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
        Register
      </button>
    </form>
    
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      Already have an account? <a href="#" class="text-stone-800 dark:text-stone-200 font-semibold hover:underline">Login here</a>
    </p>
  </div>
</div>

Componente de Componentes Sociales

Componentes sociales Componente con un diseño esqueuomórfico, combinación de colores complementaria y complejidad moderada. Está diseñado para sitios web comerciales/corporativos, es responsivo y admite temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans"><div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full transform transition duration-500 hover:scale-105 group" style="box-shadow: 0 15px 30px rgba(0,0,0,0.2), inset 0 -5px 10px rgba(0,0,0,0.1), inset 0 5px 10px rgba(255,255,255,0.7);"> <div class="flex justify-center mb-6"><img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 group-hover:border-purple-500 transition duration-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="box-shadow: 0 0 15px rgba(0,0,0,0.2);"></div><h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-4 group-hover:text-purple-600 transition duration-500" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">John Doe</h2><p class="text-gray-600 dark:text-gray-300 text-center mb-8" style="text-shadow: 0.5px 0.5px 1px rgba(255,255,255,0.4);">Software Engineer at Acme Corp</p><div class="flex justify-around items-center mb-8"><div class="text-center"><p class="text-2xl font-bold text-blue-600 dark:text-blue-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">5.2K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Followers</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-green-600 dark:text-green-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">1.8K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Following</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-red-600 dark:text-red-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">250</p><p class="text-gray-500 dark:text-gray-400 text-sm">Posts</p></div></div><div class="flex flex-col space-y-4"><button class="bg-gradient-to-br from-purple-600 to-indigo-700 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-purple-700 hover:to-indigo-800 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Follow</button><button class="bg-gradient-to-br from-yellow-500 to-orange-600 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-yellow-600 hover:to-orange-700 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Message</button></div></div></div>

Componente de nube de etiquetas

Un componente de nube de etiquetas receptivo con estilos de diseño de materiales, un esquema de color complementario y una complejidad moderada para fines de comercio electrónico, con soporte para temas oscuros.

Abrir Vista previa

                <div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-md max-w-4xl mx-auto">
  <h2 class="text-2xl font-semibold mb-4 dark:text-white text-gray-800">Popular Tags</h2>
  <div class="flex flex-wrap gap-3">
    <!-- Tag Item 1 -->
    <a href="#" class="dark:bg-purple-700 dark:text-purple-100 bg-indigo-500 text-indigo-50 px-4 py-2 rounded-full hover:bg-indigo-600 dark:hover:bg-purple-800 transition duration-300 shadow-md text-sm">
      Electronics
    </a>
    <!-- Tag Item 2 -->
    <a href="#" class="dark:bg-teal-700 dark:text-teal-100 bg-green-500 text-green-50 px-4 py-2 rounded-full hover:bg-green-600 dark:hover:bg-teal-800 transition duration-300 shadow-md text-sm">
      Apparel
    </a>
    <!-- Tag Item 3 -->
    <a href="#" class="dark:bg-orange-700 dark:text-orange-100 bg-red-500 text-red-50 px-4 py-2 rounded-full hover:bg-red-600 dark:hover:bg-orange-800 transition duration-300 shadow-md text-sm">
      Home Goods
    </a>
    <!-- Tag Item 4 -->
    <a href="#" class="dark:bg-blue-700 dark:text-blue-100 bg-blue-500 text-blue-50 px-4 py-2 rounded-full hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 shadow-md text-sm">
      Books
    </a>
    <!-- Tag Item 5 -->
    <a href="#" class="dark:bg-red-700 dark:text-red-100 bg-pink-500 text-pink-50 px-4 py-2 rounded-full hover:bg-pink-600 dark:hover:bg-red-800 transition duration-300 shadow-md text-sm">
      Sporting Goods
    </a>
    <!-- Tag Item 6 -->
    <a href="#" class="dark:bg-lime-700 dark:text-lime-100 bg-yellow-500 text-yellow-50 px-4 py-2 rounded-full hover:bg-yellow-600 dark:hover:bg-lime-800 transition duration-300 shadow-md text-sm">
      Outdoors
    </a>
    <!-- Tag Item 7 -->
    <a href="#" class="dark:bg-cyan-700 dark:text-cyan-100 bg-teal-500 text-teal-50 px-4 py-2 rounded-full hover:bg-teal-600 dark:hover:bg-cyan-800 transition duration-300 shadow-md text-sm">
      Kitchen
    </a>
    <!-- Tag Item 8 -->
    <a href="#" class="dark:bg-fuchsia-700 dark:text-fuchsia-100 bg-purple-500 text-purple-50 px-4 py-2 rounded-full hover:bg-purple-600 dark:hover:bg-fuchsia-800 transition duration-300 shadow-md text-sm">
      Toys
    </a>
    <!-- Tag Item 9 -->
    <a href="#" class="dark:bg-emerald-700 dark:text-emerald-100 bg-green-600 text-green-50 px-4 py-2 rounded-full hover:bg-green-700 dark:hover:bg-emerald-800 transition duration-300 shadow-md text-sm">
      Gaming
    </a>
    <!-- Tag Item 10 -->
    <a href="#" class="dark:bg-rose-700 dark:text-rose-100 bg-red-600 text-red-50 px-4 py-2 rounded-full hover:bg-red-700 dark:hover:bg-rose-800 transition duration-300 shadow-md text-sm">
      Automotive
    </a>
  </div>
</div>

1 ... 96 97 98 99 100 ... 282

Categorías

Todos los componentes