Componentes de búsqueda

Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de la galería de productos

Un componente complejo de la galería de productos inspirado en el papel/impresión con colores complementarios, diseñado para el consumo de contenido como un blog, con detalles ricos, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12">

  <!-- Component Wrapper -->
  <div class="max-w-7xl mx-auto py-8 lg:py-16">

    <!-- Header Section -->
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-blue-800 dark:text-orange-300 tracking-tight leading-tight mb-4 filter drop-shadow animate-fade-in-down">
        Featured Collection
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up">
        Discover our handcrafted selections, inspired by timeless artistry and sustainable practices.
      </p>
    </div>

    <!-- Gallery Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1018/600/400" alt="Vintage Typewriter" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">New Arrival</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Whispering Keys" Typewriter</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A beautifully restored vintage typewriter, perfect for the wordsmith in your life. Each click tells a story.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$450.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.8 (120 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 2 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1025/600/400" alt="Leather-bound Journal" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Eco-Friendly</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Explorer's" Leather Journal</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Hand-stitched leather journal with acid-free paper, perfect for thoughts, sketches, and adventures.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$85.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (230 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 3 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-up">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1033/600/400" alt="Artisan Ceramic Mug" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Limited Edition</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Morning Dew" Ceramic Mug</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Artisan-crafted ceramic mug, unique glaze, perfect for your morning brew or a cozy evening tea.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$45.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.7 (88 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 4 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-down">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1040/600/400" alt="Vintage Fountain Pen" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Bestseller</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Inkwell" Fountain Pen</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Elegantly crafted fountain pen, a joy to write with, perfect for calligraphy enthusiasts and professionals.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$120.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (310 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 5 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1044/600/400" alt="Wooden Desk Organizer" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-yellow-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Handmade</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Artisan" Desk Organizer</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Solid oak desk organizer to declutter your workspace with natural elegance.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$95.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.6 (95 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 6 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1054/600/400" alt="Vintage Camera" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-teal-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Collector's Item</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Timeless Lens" Vintage Camera</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A classic film camera, meticulously restored, ready to capture new memories with old charm.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$720.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (75 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

    </div>

    <!-- Pagination/Load More (Optional) -->
    <div class="mt-12 text-center">
      <button class="px-8 py-4 bg-blue-600 hover:bg-blue-700 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-full shadow-lg 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-orange-800">
        Load More Products
      </button>
    </div>

    <!-- Testimonial/Quote Section (to enhance blog/content feel) -->
    <div class="mt-20 border-t border-gray-300 dark:border-gray-700 pt-16">
      <figure class="max-w-3xl mx-auto bg-blue-50 dark:bg-gray-800 p-8 rounded-lg shadow-inner-xl shadow-gray-200/50 dark:shadow-black/20 text-center relative overflow-hidden">
        <blockquote class="text-xl md:text-2xl italic text-gray-800 dark:text-gray-200 leading-relaxed mb-6 relative z-10">
          "Every item tells a story, a testament to craftsmanship and passion. Our home feels more authentic with these timeless pieces."
        </blockquote>
        <figcaption class="flex items-center justify-center space-x-4 relative z-10">
          <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-4 border-orange-400 dark:border-blue-400 shadow-md">
          <div>
            <cite class="block text-lg font-semibold text-orange-700 dark:text-blue-300 not-italic">Eleanor Vance</cite>
            <span class="block text-gray-600 dark:text-gray-400 text-sm">Satisfied Customer</span>
          </div>
        </figcaption>
        <span class="absolute -bottom-10 -right-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">“</span>
        <span class="absolute -top-10 -left-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">”</span>
      </figure>
    </div>

  </div>

</div>

<!-- Just for demonstration purposes - Custom Styles for animations and pseudo-elements -->
<style>
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
  .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
  .animate-slide-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
  .animate-slide-in-right { animation: fadeInRight 0.8s ease-out forwards; }

  /* Stagger animations for better effect */
  .grid article:nth-child(1) { animation-delay: 0.1s; }
  .grid article:nth-child(2) { animation-delay: 0.2s; }
  .grid article:nth-child(3) { animation-delay: 0.3s; }
  .grid article:nth-child(4) { animation-delay: 0.4s; }
  .grid article:nth-child(5) { animation-delay: 0.5s; }
  .grid article:nth-child(6) { animation-delay: 0.6s; }

  /* Dark mode specific for testing purposes if not applying to whole page */
  /* Use 'dark' class on parent element (e.g., html or body) for actual dark mode activation */
  /* .dark .bg-gray-100 { background-color: rgb(17 24 39); } */
  /* .dark .text-gray-900 { color: rgb(229 231 235); } */
  .dark .bg-gray-850 { background-color: #2a2a2a; /* Slightly lighter than gray-900 for paper texture */ }

  /* Pseudo-elements for paper texture (optional, mostly visual flair) */
  .bg-white::before,
  .bg-white::after,
  .dark\:bg-gray-850::before,
  .dark\:bg-gray-850::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Behind content but above background */
  }
  
  .bg-white::before {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
  }

  .dark\:bg-gray-850::after {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
  }

  /* Shadow for paper-like elements */
  .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 4px 6px 0 rgba(0, 0, 0, 0.03);
  }
   .dark\:shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3), inset 0 4px 6px 0 rgba(0, 0, 0, 0.2);
  }

</style>

Componente de mensajes de alerta

Un componente de mensajes de alerta complejo y receptivo diseñado con los principios de Material Design, utilizando tonos océano/azul, adecuado para sitios web sin fines de lucro/caridad. Incluye múltiples tipos de alertas, funcionalidad de descarte y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-300 mb-8 text-center">Alert Messages</h2>

  <!-- Success Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-blue-50 dark:bg-blue-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-blue-200 dark:border-blue-800">
      <div class="flex-shrink-0 text-blue-600 dark:text-blue-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-800 dark:text-blue-200">Donation Successful!</h3>
        <p class="text-sm sm:text-base text-blue-700 dark:text-blue-300 mt-1">Thank you for your generous contribution. Your support helps us provide clean water to communities in need.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-blue-600 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-blue-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Info Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-indigo-50 dark:bg-indigo-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-indigo-200 dark:border-indigo-800">
      <div class="flex-shrink-0 text-indigo-600 dark:text-indigo-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-indigo-800 dark:text-indigo-200">Event Reminder</h3>
        <p class="text-sm sm:text-base text-indigo-700 dark:text-indigo-300 mt-1">Join us for our annual Charity Gala on November 15th! Purchase your tickets now to support education programs.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Learn More
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-indigo-700 dark:text-indigo-300 bg-white dark:bg-transparent border border-indigo-300 dark:border-indigo-700 hover:bg-indigo-100 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 hidden sm:block">
        <img src="https://picsum.photos/id/1084/100/100" alt="Event image" class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg object-cover shadow-sm">
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-orange-200 dark:border-orange-800">
      <div class="flex-shrink-0 text-orange-600 dark:text-orange-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-800 dark:text-orange-200">Urgent Action Required!</h3>
        <p class="text-sm sm:text-base text-orange-700 dark:text-orange-300 mt-1">Our emergency food drive ends in 48 hours. Please consider donating non-perishable items to help local families.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-orange-600 dark:text-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-orange-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-red-50 dark:bg-red-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-red-200 dark:border-red-800">
      <div class="flex-shrink-0 text-red-600 dark:text-red-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-red-800 dark:text-red-200">Payment Processing Error</h3>
        <p class="text-sm sm:text-base text-red-700 dark:text-red-300 mt-1">Oops! There was an issue processing your last donation. Please check your payment details or try again later.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-red-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Interactive Success Alert with Avatar -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg bg-emerald-50 dark:bg-emerald-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-emerald-200 dark:border-emerald-800">
      <div class="flex-shrink-0 flex justify-center items-center h-full text-emerald-600 dark:text-emerald-400 mb-4 sm:mb-0 sm:mr-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Supporter Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full object-cover shadow-sm border-2 border-emerald-300 dark:border-emerald-700">
      </div>
      <div class="flex-1 text-center sm:text-left">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200">Thank you, Sarah J.!</h3>
        <p class="text-sm sm:text-base text-emerald-700 dark:text-emerald-300 mt-1">Your recent contribution of $100 has been successfully received. We are incredibly grateful for your continued support.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:justify-start">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            View Impact
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-4a1 1 0 01-1.414-1.414L8.586 10l-1.293-1.293a1 1 0 111.414-1.414L10 8.586l1.293-1.293a1 1 0 111.414 1.414L11.414 10l1.293 1.293a1 1 0 01-1.414 1.414L10 11.414l-1.293 1.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-emerald-700 dark:text-emerald-300 bg-white dark:bg-transparent border border-emerald-300 dark:border-emerald-700 hover:bg-emerald-100 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            Share on Social
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 self-start hidden sm:block">
         <button type="button" class="flex-shrink-0 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

</div>

Componente de gráfico de Cyberpunk - Gobierno/Público

Un componente de gráfico moderadamente complejo con estética cyberpunk, adecuado para sitios web gubernamentales y de servicio público. Cuenta con un fondo oscuro, acentos de neón brillantes y una paleta de colores retro / vintage. Responsivo e incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="font-mono text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-950 dark:to-black rounded-lg shadow-xl overflow-hidden border-2 border-purple-700 dark:border-teal-400 transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
    <div class="p-6 sm:p-8 lg:p-10 border-b-2 border-purple-600 dark:border-teal-500 flex flex-col sm:flex-row justify-between items-start sm:items-center">
      <div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-300 tracking-wider mb-2 drop-shadow-[0_0_5px_rgba(252,211,77,0.7)] dark:text-teal-400 dark:drop-shadow-[0_0_5px_rgba(45,212,191,0.7)]">Public Service Metrics</h2>
        <p class="text-purple-300 dark:text-gray-400 text-sm sm:text-base">Real-time data visualization for key public indicators.</p>
      </div>
      <div class="mt-4 sm:mt-0 flex gap-2">
        <button class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white dark:bg-teal-600 dark:hover:bg-teal-700 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105 shadow-md border-2 border-purple-400 dark:border-teal-500">View Details</button>
        <button class="px-4 py-2 bg-transparent border-2 border-yellow-300 text-yellow-300 hover:bg-yellow-300 hover:text-purple-900 dark:border-teal-400 dark:text-teal-400 dark:hover:bg-teal-400 dark:hover:text-gray-900 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105">Export Data</button>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Chart 1: Bar Chart Placeholder -->
      <div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Citizen Engagement Index</h3>
        <div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md flex items-end overflow-hidden border border-purple-600 dark:border-teal-500">
          <div class="w-1/5 bg-yellow-400 h-3/4 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">75%</span></div>
          <div class="w-1/5 bg-yellow-400 h-2/3 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">68%</span></div>
          <div class="w-1/5 bg-yellow-400 h-4/5 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">82%</span></div>
          <div class="w-1/5 bg-yellow-400 h-1/2 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">50%</span></div>
          <div class="w-1/5 bg-yellow-400 h-full rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">90%</span></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
          <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Avg</span>
        </div>
      </div>

      <!-- Chart 2: Line Chart Placeholder with Data Points -->
      <div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Service Request Trend</h3>
        <div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md relative border border-purple-600 dark:border-teal-500">
          <!-- Grid lines -->
          <div class="absolute inset-0 grid grid-rows-4 grid-cols-6 opacity-30 text-purple-400 dark:text-gray-500">
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full"></div>
          </div>
          <!-- Line path placeholders -->
          <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#FCD34D" />
                <stop offset="100%" stop-color="#8B5CF6" />
              </linearGradient>
              <linearGradient id="gradient1_dark" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#2DD4BF" />
                <stop offset="100%" stop-color="#6EE7B7" />
              </linearGradient>
            </defs>
            <polyline 
              points="0,80 20,40 40,60 60,30 80,50 100,20" 
              fill="none" 
              stroke="url(#gradient1)" 
              stroke-width="2" 
              class="dark:stroke-[url(#gradient1_dark)]"/>
            <!-- Data Points -->
            <circle cx="0" cy="80" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="20" cy="40" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="40" cy="60" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="60" cy="30" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="80" cy="50" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="100" cy="20" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
          </svg>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
          <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
        </div>
      </div>

      <!-- Key Performance Indicators -->
      <div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Key Indicators</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Average Response Time</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">2h 15m</p>
            </div>
            <span class="text-green-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg> Good</span>
          </div>
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Citizen Satisfaction Avg</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">4.7 <span class="text-base font-normal">/ 5</span></p>
            </div>
            <span class="text-yellow-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7" />
            </svg> Stable</span>
          </div>
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Active Users Monthly</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">1.2M+</p>
            </div>
            <span class="text-sky-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
            </svg> Growing</span>
          </div>
        </div>
      </div>

      <!-- Recent Activity Feed -->
      <div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Recent System Activities</h3>
        <ul class="space-y-4">
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">System Admin</strong> updated 'Service Outage Protocol'. <span class="text-purple-400 dark:text-gray-500 text-xs">5 mins ago</span></p>
            </div>
          </li>
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Data Analyst</strong> generated 'Q2 Performance Report'. <span class="text-purple-400 dark:text-gray-500 text-xs">1 hour ago</span></p>
            </div>
          </li>
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Network Security</strong> detected 'Unusual Login Attempt'. <span class="text-red-400 dark:text-red-300 text-xs">3 hours ago</span></p>
            </div>
          </li>
        </ul>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t-2 border-purple-600 dark:border-teal-500 text-center text-purple-400 dark:text-gray-500 text-xs sm:text-sm">
      &copy; 2077 Public Data Systems. All rights reserved. Data refreshed every 30 seconds.
    </div>
  </div>
  <style>
    .shadow-neon {
      box-shadow: 0 0 5px rgba(252, 211, 77, 0.7), 0 0 10px rgba(252, 211, 77, 0.4), 0 0 15px rgba(252, 211, 77, 0.2);
    }
    .dark .shadow-neon {
      box-shadow: 0 0 5px rgba(45, 212, 191, 0.7), 0 0 10px rgba(45, 212, 191, 0.4), 0 0 15px rgba(45, 212, 191, 0.2);
    }
    /* Custom placeholder for bar chart values to be readable on bars */
    .w-1\/5 span {
        font-size: 0.75rem; /* 12px */
        transform: translateY(-0.75rem); /* Adjust position if needed */
        position: relative;
        width: 100%;
        text-align: center;
    }
  </style>
</div>

Tarjeta de producto Art Deco Geometric Marketplace

Un componente de tarjeta de producto para un mercado de múltiples proveedores, diseñado con patrones geométricos Art Deco y un esquema de colores de arco iris degradado. Las características incluyen diseño receptivo, soporte para modo oscuro y elementos interactivos.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-950 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl rounded-2xl overflow-hidden shadow-xl dark:shadow-2xl border-4 border-transparent bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-1.5 transform transition-transform duration-500 hover:scale-[1.01] animate-gradient-border">
    <div class="bg-white dark:bg-gray-800 rounded-xl relative p-4 sm:p-6 lg:p-8 flex flex-col h-full">

      <!-- Seller Info & Art Deco Border -->
      <div class="absolute inset-0 border-8 border-transparent pointer-events-none rounded-xl">
        <div class="absolute top-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-l-4 rounded-tl-xl border-indigo-600 dark:border-indigo-400"></div>
        <div class="absolute top-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-r-4 rounded-tr-xl border-purple-600 dark:border-purple-400"></div>
        <div class="absolute bottom-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-l-4 rounded-bl-xl border-pink-600 dark:border-pink-400"></div>
        <div class="absolute bottom-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-r-4 rounded-br-xl border-red-600 dark:border-red-400"></div>
      </div>

      <div class="flex items-center mb-4 sm:mb-5 lg:mb-6 z-10">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-400 dark:ring-purple-600 mr-3" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Seller Avatar">
        <div>
          <p class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-100">Artisan Emporium</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Verified Seller</p>
        </div>
      </div>

      <!-- Product Image -->
      <div class="w-full aspect-w-16 aspect-h-9 relative mb-4 sm:mb-5 lg:mb-6 rounded-lg overflow-hidden border-2 border-gray-200 dark:border-gray-700 shadow-sm">
        <img src="https://picsum.photos/id/111/600/400" alt="Product Image" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <span class="absolute top-2 right-2 bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs px-2.5 py-1 rounded-full font-bold shadow-md">NEW</span>
      </div>

      <!-- Product Details -->
      <h3 class="text-xl sm:text-2xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 leading-tight gradient-text-effect">
        Geometric Abstract Pendant
      </h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 line-clamp-2 mb-4 sm:mb-5 lg:mb-6">
        Handcrafted Art Deco inspired pendant with intricate geometric patterns, perfect for adding a touch of vintage elegance.
      </p>

      <div class="flex items-center justify-between mb-4 sm:mb-5 lg:mb-6">
        <div class="flex items-baseline">
          <span class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mr-2">$129.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$149.99</span>
        </div>
        <div class="flex items-center text-yellow-500 dark:text-yellow-400 text-sm sm:text-base">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.729c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <span>4.8</span>
          <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-1">(128)</span>
        </div>
      </div>

      <!-- Call to Action Buttons -->
      <div class="mt-auto grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 border-transparent rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       bg-gradient-to-r from-teal-500 to-cyan-500 text-white shadow-lg 
                       hover:scale-[1.02] hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3.056-6.112A1 1 0 0019 3H4.32L4 1H3zM6 16a2 2 0 11-4 0 2 2 0 014 0zM16 16a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          Add to Cart
        </button>
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       border-fuchsia-500 text-fuchsia-600 dark:border-fuchsia-400 dark:text-fuchsia-400 
                       hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 
                       hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.586l1.172-1.172a4 4 0 115.656 5.656L10 17.656l-6.828-6.828a4 4 0 010-5.656z" clip-rule="evenodd"></path>
          </svg>
          Wishlist
        </button>
      </div>

    </div>
  </div>
</div>

<style>
  @keyframes gradient-border-animation {
    0% { border-color: #a78bfa; }
    25% { border-color: #f472b6; }
    50% { border-color: #ef4444; }
    75% { border-color: #f97316; }
    100% { border-color: #a78bfa; }
  }
  .animate-gradient-border {
    animation: gradient-border-animation 6s ease-in-out infinite alternate;
  }

  .gradient-text-effect {
    background-image: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradientText 3s ease infinite;
  }

  .dark .gradient-text-effect {
    background-image: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
  }

  @keyframes gradientText {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
  }
</style>

NeonGlowPagination

Un componente de paginación responsivo con efectos de neón/resplandor, que utiliza una paleta de colores bosque/verde adecuada para aplicaciones de criptomonedas y blockchain. Cuenta con soporte de modo oscuro y HTML semántico.

Abrir Vista previa

                <nav class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans" aria-label="Pagination">
  <ul class="flex list-none p-0 m-0">
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-3 py-2 mr-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-3.75a.75.75 0 010-1.06l3.75-3.75a.75.75 0 011.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-semibold
        text-white bg-emerald-600 dark:bg-emerald-700 border border-emerald-600 dark:border-emerald-700 rounded-lg shadow-md
        ring-2 ring-emerald-500 ring-offset-1 ring-offset-transparent dark:ring-offset-transparent
        glow-emerald
        transition-all duration-300 ease-in-out
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-400 dark:bg-emerald-500 opacity-20 blur-md animate-pulse"></span>
        <span class="relative z-10">1</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">2</span>
      </a>
    </li>
    <li class="hidden sm:block">
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">3</span>
      </a>
    </li>
    <li class="hidden md:block">
      <span class="px-4 py-2 mx-1 text-sm font-medium text-gray-500Dark:text-gray-400">...</span>
    </li>
    <li class="hidden md:block">
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">9</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">10</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-3 py-2 ml-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

<style>
  /* This is a simple pseudo-element glow. For a more advanced glow, consider using multiple box-shadows with different opacities and offsets, or SVG filters. */
  .glow-emerald {
    position: relative;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5), /* emerald-500 */
                0 0 10px rgba(16, 185, 129, 0.4),
                0 0 15px rgba(16, 185, 129, 0.3);
  }
  .dark .glow-emerald {
    box-shadow: 0 0 5px rgba(5, 150, 105, 0.6), /* emerald-600 */
                0 0 10px rgba(5, 150, 105, 0.5),
                0 0 15px rgba(5, 150, 105, 0.4);
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.4;
    }
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

Componente de botones para compartir en redes sociales

Un conjunto de botones para compartir en redes sociales diseñados con una estética monoespaciada/de desarrollador, combinación de colores azul corporativo y capacidad de respuesta completa. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="font-['Menlo',_monospace] bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-2xl mx-auto rounded-lg shadow-xl overflow-hidden border border-blue-200 dark:border-blue-800 bg-white dark:bg-gray-800">
    <div class="p-6 border-b border-blue-100 dark:border-blue-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2 leading-tight">
        <span class="text-blue-600 dark:text-blue-400">//</span> Share this article
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base">Spread the word about our latest insights and news.</p>
    </div>
    <div class="p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8.29 20.44c-1.39 0-2.5-1.12-2.5-2.5s1.11-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.11 2.5-2.5 2.5zm11.71-8.56c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-4.75-.41c-2.32 0-4.22 1.84-4.25 4.16.89-.96 2.11-1.5 3.39-1.5 1.28 0 2.5.54 3.39 1.51-.03-2.32-1.93-4.17-4.25-4.17zm1.75-6c-1.63 0-2.95 1.32-2.95 2.95s1.32 2.95 2.95 2.95 2.95-1.32 2.95-2.95-1.32-2.95-2.95-2.95zm-9.5 0c-1.63 0-2.95 1.32-2.95 2.95s1.32 2.95 2.95 2.95 2.95-1.32 2.95-2.95-1.32-2.95-2.95-2.95zM12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Twitter</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12a10.001 10.001 0 008.883 9.957v-7.042h-2.35V12h2.35V9.42c0-2.324 1.416-3.593 3.49-3.593 1.002 0 1.868.075 2.12.108v2.441l-1.448.001c-1.132 0-1.353.538-1.353 1.326V12h2.7v2.915h-2.7V22C17.523 22 22 17.523 22 12S17.523 2 12 2z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Facebook</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
          <path fill-rule="evenodd" d="M9.208 2.047a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm.5 16.5a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25zm5.5-16.5a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm.5 16.5a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25zM12 4a8 8 0 100 16 8 8 0 000-16zM3 12a9 9 0 119 9A9.004 9.004 0 013 12zm2 0a7 7 0 1014 0 7 7 0 00-14 0zm10.5-5.5a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm-5.5 0a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm5.5 11a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm-5.5 0a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Instagram</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.564-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">LinkedIn</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 3.5c-4.99 0-9.04 4.05-9.04 9.04 0 4.98 4.05 9.04 9.04 9.04 4.98 0 9.04-4.06 9.04-9.04C21.08 7.55 17.03 3.5 12.04 3.5zM15.42 16.5c-.32.06-.5-.17-.6-.24l-2.07-1.42c-.22-.15-.43-.3-.43-.65V8.5h.01c.28 0 .42-.14.42-.42 0-.29-.14-.42-.42-.42-.29 0-.42.14-.42.42v5.77c0 .12.04.23.08.31.05.07.13.1.28.21.14.09.28.18.42.26l2.1 1.44c.48.33.67.55.51.9-.19.4-.55.52-.92.42zm-3.38-2.61c.42-.29.54-.78.29-1.2l-2.82-4.9c-.29-.5-.88-.65-1.39-.36-.5.29-.65.88-.36 1.39l2.82 4.9c.29.5.88.65 1.39.36z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Email</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19.9 22.4L20 22.5c.3.3.4.7.4 1.1s-.1.8-.4 1.1L20 25c-.2.2-.4.4-.7.4s-.5.0-.7-.1c0 0-.1-.1-.1-.1-.1-.1-.1-.2-.2-.3-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.2-.3-.1-.1-.1-.2-.1-.2s-.1-.2-.1-.3c-.1-.1-.1-.2-.1-.3s-.1-.2-.1-.3c0-.1-.1-.2-.1-.2s0-.2-.1-.3c0 0-.1.0-.1.0-.1 0-.1.0-.1-.1-.1-.1-.1-.1 0-.1s.1-.1.2-.1c0-.1.1-.1.2-.1.1-.1.1-.1.2-.1s.1-.1.2-.1h.2c0 0-.1 0-.1.1-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.1-.1.1-.1.1-.2.1-.1.1-.1.1-.2.1-.1-.1-.1-.2-.2-.2-.1-.1-.1-.1-.2-.1h-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.2-.1s.1-.1.2-.1c.1 0 .1-.1.2-.1h.2c.1-.1.2-.1.3-.1.1-.1.1-.1.2-.1h.2c.1 0 .1-.1.2-.1.1 0 .2-.1.3-.1h.3c.1 0 .2-.1.3-.1h.3c.1 0 .2-.1.2-.1h.2c.1 0 .2-.1.2-.1h.2c.1 0 .2-.1.2-.1h.1c.1 0 .2-.1.2-.1h.1c.1 0 .2-.1.1 0h-.1c0 0-.1.0-.1.0-.1.0-.1.0-.1.0-.1.1-.1.1-.1.1-.1.0-.1.0-.2.0-.1.1-.1.1-.2.1-.1.0-.1.0-.1.1-.1.0-.1.0-.1.1c-.1.0-.1.0-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1-.0.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1c-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-1.2-1.2h-11.8v-20.1h15v11.8c.0.0.1.1.1.1.1.1.2.2.2.3.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.2.1.1.2.1.2.2.1.1.2.1.2.2.1.1.2.1.2.2.1.1.1.2.1.2.1.1.1.2.1.2.1 0 .2.0.2.1.1.0.1.0.2.1.1 0 .1.0.2.0.1.0.1.0.2.0.2-.1.1.0.1.0.2-.1.0-.1.0-.2.0-.1-.1-.1.0-.2-.1-.1-.0-.1-.1-.2-.1-.0-.1-.1-.2-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1h-.1c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2h-.2c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2s-.1-.1-.1-.2c-.1-.1-.1-.1-.1-.2s-.1-.1-.1-.2c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2L0 12l2.3-2.3C2.1 9.5 2.1 9.4 2.1 9.4c.1-.1.1-.1.1-.1.1-.1.1-.1.1-.2.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1l-.1-.1h-5.2v2.3h5.1l-.1.1c.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.3.1.2.2.3.3.4.1.1.2.2.4.3.1.1.3.2.4.2.1.1.3.2.4.2.1 0 .2.0.3.1.1.0.2.0.3.1.1.0.2.0.3.1.1.0.2.0.2.0.1.0.1-.1.1-.1.1-.0.1-.1.1-.1 0-.1.0-.1.0-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1zM11.6 4.3L12 4.7l-7.7 7.7L4 12V2.5c0-.6.5-1.1 1.1-1.1h5.8c.6 0 1.1.5 1.1 1.1v.8l-.4.4c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.3-.1.4s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 0 0 .1-.1.1zM22.5 1.1H16.7L19 3.4l-.1.1c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.0-.1.1-.1.1s-.1.1-.1.1l-.1.1h-2.3c-.6 0-1.1.5-1.1 1.1v5.8c0 .6.5 1.1 1.1 1.1h10.9c.6 0 1.1-.5 1.1-1.1V2.5c.0-.6-.5-1.1-1.1-1.1z" transform="translate(0 -1)"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Copy Link</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.336 8.797c.367-.206.634-.482.784-.797.15-.316.225-.67.225-1.063 0-.393-.075-.742-.225-1.047-.15-.305-.417-.572-.784-.797C17.969 5.097 17.59 5 17.16 5c-.43 0-.79.097-1.08.293-.29.195-.514.467-.674.816-.16.349-.24.717-.24 1.104 0 .38.08.739.24 1.077.16.338.394.615.704.838.31.223.655.334 1.034.334.33 0 .614-.075.852-.224zM16.89 12.015c-1.396 0-2.529.479-3.414 1.436-.886.957-1.329 2.15-1.329 3.58 0 1.43.443 2.625 1.329 3.581.885.956 2.018 1.434 3.414 1.434 1.39 0 2.518-.479 3.385-1.432.868-.953 1.302-2.147 1.302-3.583 0-1.423-.434-2.618-1.302-3.588-.867-.97-1.995-1.45-3.385-1.45zm0-.5c.78 0 1.49.208 2.13.626.63.417 1.11 1.01 1.44 1.776.33.766.495 1.579.495 2.433 0 .848-.165 1.66-.495 2.43-.33.77-.81 1.36-1.44 1.78-.64.417-1.35.625-2.13.625-.78 0-1.49-.208-2.13-.625-.63-.418-1.11-1.01-1.44-1.78-.33-.77-.495-1.57-.495-2.43 0-.854.165-1.667.495-2.433.33-.766.81-1.359 1.44-1.776.64-.418 1.35-.626 2.13-.626zm-16.89 5c.78 0 1.49.208 2.13.626.63.417 1.11 1.01 1.44 1.776.33.766.495 1.579.495 2.433 0 .848-.165 1.66-.495 2.43-.33.77-.81 1.36-1.44 1.78-.64.417-1.35.625-2.13.625-.78 0-1.49-.208-2.13-.625-.63-.418-1.11-1.01-1.44-1.78-.33-.77-.495-1.57-.495-2.43 0-.854.165-1.667.495-2.433.33-.766.81-1.359 1.44-1.776.64-.418 1.35-.626 2.13-.626zm-.5-5c.367-.206.634-.482.784-.797.15-.316.225-.67.225-1.063 0-.393-.075-.742-.225-1.047-.15-.305-.417-.572-.784-.797C5.969 5.097 5.59 5 5.16 5c-.43 0-.79.097-1.08.293-.29.195-.514.467-.674.816-.16.349-.24.717-.24 1.104 0 .38.08.739.24 1.077.16.338.394.615.704.838.31.223.655.334 1.034.334.33 0 .614-.075.852-.224zM12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM5.16 3.5c-.328 0-.62.062-.876.185-.257.124-.469.297-.636.52-.168.223-.277.47-.327.74-.05.27-.075.54-.075.81 0 .27.025.54.075.81.05.27.158.517.327.74.167.223.38.396.636.52.256.123.548.185.876.185.32 0 .61-.06.87-.18s.47-.29.63-.52c.16-.23.27-.47.32-.74.05-.27.075-.54.075-.81 0-.27-.025-.54-.075-.81-.05-.27-.16-.52-.32-.74-.16-.23-.38-.4-.63-.52s-.55-.18-.87-.18zm11.734 0c-.328 0-.62.062-.876.185-.257.124-.47.297-.636.52-.168.223-.277.47-.327.74-.05.27-.075.54-.075.81 0 .27.025.54.075.81.05.27.158.517.327.74.167.223.38.396.636.52.256.123.548.185.876.185.32 0 .61-.06.87-.18s.47-.29.63-.52c.16-.23.27-.47.32-.74.05-.27.075-.54.075-.81 0-.27-.025-.54-.075-.81-.05-.27-.16-.52-.32-.74-.16-.23-.38-.4-.63-.52s-.55-.18-.87-.18zM12 9.015c-.78 0-1.49.208-2.13.626-.63.417-1.11 1.01-1.44 1.776-.33.766-.495 1.579-.495 2.433 0 .848.165 1.66.495 2.43.33.77.81 1.36 1.44 1.78.64.417 1.35.625 2.13.625.78 0 1.49-.208 2.13-.625.63-.418 1.11-1.01 1.44-1.78.33-.77.495-1.57.495-2.43 0-.854-.165-1.667-.495-2.433-.33-.766-.81-1.359-1.44-1.776-.64-.418-1.35-.626-2.13-.626z"/>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">WhatsApp</span>
      </a>
    </div>
    <div class="p-6 border-t border-blue-100 dark:border-blue-700 text-sm text-gray-500 dark:text-gray-400">
      <p>Tip: Click to share. More options coming soon.</p>
      <p class="mt-2 text-blue-500 dark:text-blue-400"><span class="text-blue-600 dark:text-blue-500">guest@website</span>:$ <span class="animate-pulse">_</span></p>
    </div>
  </div>
</div>

Componente del panel de control de criptomonedas

Un componente de tablero de criptomonedas complejo y receptivo con un estilo de diseño de tipografía suiza / internacional, con elementos degradados multicolores y soporte para modo oscuro. Incluye varias secciones, como una descripción general de la cartera, tendencias del mercado, transacciones recientes y un gráfico.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans p-4 sm:p-6 lg:p-8">

  <!-- Header Section -->
  <header class="flex flex-col sm:flex-row justify-between items-center mb-6 lg:mb-8 font-mono">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-4 sm:mb-0 bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 dark:from-red-300 dark:via-yellow-300 dark:to-blue-300">
      CRYPTO DASHBOARD
    </h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 px-4 rounded-full bg-white dark:bg-gray-800 border dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base">
        <svg class="w-5 h-5 absolute right-3 top-1/2 -translate-y-1/2 text-gray-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <button class="p-2 rounded-full bg-white dark:bg-gray-800 border dark:border-gray-700 hover:ring-2 hover:ring-blue-500 focus:outline-none">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
      </button>
    </div>
  </header>

  <!-- Main Content Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">

    <!-- Portfolio Overview Card -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 flex flex-col">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-300 dark:to-pink-300 capitalize">My Portfolio</h2>
        <button class="text-sm text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">View All</button>
      </div>
      <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="p-4 rounded-lg border-2 border-transparent bg-gradient-to-br from-green-400 to-blue-500 dark:from-green-600 dark:to-blue-700 shadow-lg group">
          <p class="text-lg sm:text-xl font-semibold text-white">Total Balance</p>
          <p class="text-3xl sm:text-4xl font-bold text-white mt-1">$12,345.67</p>
          <span class="text-green-100 text-sm sm:text-base">+5.21% Today</span>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Bitcoin (BTC)</p>
            <p class="text-xl font-bold dark:text-gray-50">$34,567.89</p>
          </div>
          <div class="text-right">
            <span class="text-green-500 dark:text-green-400 text-sm sm:text-base">+1.23%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~0.5 BTC</p>
          </div>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Ethereum (ETH)</p>
            <p class="text-xl font-bold dark:text-gray-50">$2,100.25</p>
          </div>
          <div class="text-right">
            <span class="text-red-500 dark:text-red-400 text-sm sm:text-base">-0.87%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~2.0 ETH</p>
          </div>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Ripple (XRP)</p>
            <p class="text-xl font-bold dark:text-gray-50">$0.75</p>
          </div>
          <div class="text-right">
            <span class="text-green-500 dark:text-green-400 text-sm sm:text-base">+3.45%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~1000 XRP</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Market Trends / Price Chart Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 flex flex-col">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-300 dark:to-red-300 capitalize">Market Trends</h2>
        <select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none focus:outline-none">
          <option>1 Day</option>
          <option>1 Week</option>
          <option>1 Month</option>
        </select>
      </div>
      <div class="flex-grow flex items-center justify-center">
        <!-- Placeholder for Chart -->
        <img src="https://picsum.photos/400/300?random=1" alt="Placeholder Chart" class="w-full h-auto rounded-md shadow-inner object-cover dark:filter dark:brightness-75">
      </div>
      <div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">BTC/USD Price Chart</div>
    </div>

    <!-- Recent Transactions Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 lg:col-span-2">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-cyan-500 dark:from-teal-300 dark:to-cyan-300 capitalize">Recent Transactions</h2>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Type</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Currency</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-green-500 dark:text-green-400">Buy</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">+0.012 BTC</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">BTC</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-26</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
              </td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-red-500 dark:text-red-400">Sell</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">-0.5 ETH</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">ETH</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-25</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
              </td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-green-500 dark:text-green-400">Buy</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">+100 XRP</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">XRP</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-24</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Quick Actions Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-300 dark:to-purple-300 capitalize">Quick Actions</h2>
      <div class="grid grid-cols-2 gap-4">
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-700 text-blue-800 dark:text-blue-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-2" 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 8h6m-5 0H7M9 8V5a2 2 0 012-2h4a2 2 0 012 2v3m-7 0L4 16m4-8l-.75 4M14 5v10m-3-4h.01M12 16l4-8m-3 8h.01"></path></svg>
          Buy
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-700 text-red-800 dark:text-red-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-2" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
          Sell
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-yellow-100 hover:bg-yellow-200 dark:bg-yellow-900 dark:hover:bg-yellow-700 text-yellow-800 dark:text-yellow-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-2" 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 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
          Send
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-green-100 hover:bg-green-200 dark:bg-green-900 dark:hover:bg-green-700 text-green-800 dark:text-green-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-2" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          Receive
        </button>
      </div>
    </div>

  </div>

  <!-- Footer/Disclaimer (Optional) -->
  <footer class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
    <p>&copy; 2023 Crypto Dashboard. All rights reserved. Data is for informational purposes only. </p>
  </footer>
</div>

Componente de fuente de actividad

Un componente de alimentación de actividad complejo y monocromático en modo oscuro para aplicaciones de deportes/fitness, que muestra diversas interacciones, logros y actualizaciones del usuario de forma receptiva.

Abrir Vista previa

                <div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50 p-4 sm:p-6 lg:p-8 font-sans">
  <div class="max-w-4xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden dark:bg-gray-900">
    <div class="p-6 border-b border-gray-800 dark:border-gray-800">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-400 mb-2">Activity Feed</h2>
      <p class="text-gray-400 text-sm sm:text-base">Keep up with your team's latest achievements and updates.</p>
    </div>

    <div class="space-y-6 p-6">

      <!-- Activity Item: Workout Completion -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">John Doe</a> <span class="text-gray-400">completed a</span> <span class="text-blue-400 font-medium">HIIT Workout</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Duration: 45 min · Calories Burned: 550 kcal</p>
          <div class="flex flex-wrap gap-2 mb-3">
            <span class="bg-blue-600/20 text-blue-300 text-xs px-2.5 py-1 rounded-full font-medium">#FitnessGoal</span>
            <span class="bg-blue-600/20 text-blue-300 text-xs px-2.5 py-1 rounded-full font-medium">#HIIT</span>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 12 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 5 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">2 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: New Personal Best -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">Jane Smith</a> <span class="text-gray-400">set a new Personal Best in</span> <span class="text-blue-400 font-medium">Cycling (10k sprint)</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Time: 18:30 min · Previous PB: 19:15 min</p>
          <img src="https://picsum.photos/600/300?random=1" alt="Cycling Route" class="rounded-md w-full h-32 object-cover mb-3">
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 28 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 9 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">4 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: Team Challenge Update -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-xl font-bold text-white">⚽</div>
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            The <span class="text-blue-300 hover:text-blue-400">Team Alpha</span> <span class="text-gray-400">advanced to the next round in the</span> <span class="text-blue-400 font-medium">Winter League Cup</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Next Match: Dec 15, 7 PM vs Team Omega</p>
          <div class="flex items-center space-x-2 text-gray-400 text-sm mb-3">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Team Member">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Team Member">
            <span class="text-xs text-gray-500">+5 members involved</span>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 40 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 15 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">8 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: New Achievement Unlocked -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">Mike Ross</a> <span class="text-gray-400">unlocked the achievement:</span> <span class="text-blue-400 font-medium">'Marathon Finisher'</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Congratulations on finishing your first full marathon!</p>
          <div class="relative w-full h-32 rounded-md overflow-hidden mb-3">
            <img src="https://picsum.photos/600/300?random=2" alt="Marathon run" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent flex items-end p-3">
              <span class="text-2xl font-extrabold text-blue-300 drop-shadow-lg">🏅 Achievement Unlocked!</span>
            </div>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 55 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 20 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">1 day ago</span>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 text-center border-t border-gray-800 dark:border-gray-800">
      <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        Load More Activities
      </button>
    </div>
  </div>
</div>

Barra de progreso profesional de comercio electrónico

Un componente de barra de progreso complejo y sensible diseñado para el comercio electrónico, con una combinación de colores otoñales (naranjas, marrones, burdeos intensos) y compatible con el modo oscuro. Proporciona un aspecto limpio y profesional para entornos corporativos.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-lg shadow-xl max-w-4xl mx-auto font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">Your Order Progress</h2>

  <div class="flex justify-between items-center mb-4 text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300">
    <span>Order ID: <span class="font-medium text-gray-900 dark:text-white">#CUST-2023-98765</span></span>
    <span>Estimated Delivery: <span class="font-medium text-gray-900 dark:text-white">Oct 26, 2023</span></span>
  </div>

  <nav class="flex items-center justify-between relative mb-8">
    <div class="absolute left-0 top-1/2 -mt-0.5 w-full h-1 bg-gray-200 dark:bg-gray-700 rounded-full z-0"></div>
    <div class="absolute left-0 top-1/2 -mt-0.5 w-3/4 rounded-full h-1 bg-orange-700 dark:bg-orange-600 transition-all duration-700 ease-out z-10"></div>

    <ol class="flex justify-between w-full relative z-20">
      <li class="flex flex-col items-center flex-1 min-w-0 pr-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          1
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-900 dark:text-white leading-tight">Order Placed</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 px-1">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          2
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">Processing</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 px-1">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          3
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">Shipped</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 pl-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 font-bold text-lg mb-2 sm:mb-3 border-2 border-gray-400 dark:border-gray-500">
          4
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 leading-tight">Out for Delivery</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 pl-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 font-bold text-lg mb-2 sm:mb-3 border-2 border-gray-400 dark:border-gray-500">
          5
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 leading-tight">Delivered</span>
      </li>
    </ol>
  </nav>

  <div class="bg-orange-50 dark:bg-gray-700 p-4 sm:p-5 rounded-lg border border-orange-200 dark:border-gray-600 flex flex-col sm:flex-row items-start sm:items-center justify-between transition-colors duration-300">
    <div class="flex items-start sm:items-center mb-3 sm:mb-0">
      <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg mr-4 object-cover border border-orange-300 dark:border-gray-500" src="https://picsum.photos/100/100?random=1" alt="Product Image">
      <div>
        <p class="font-semibold text-base sm:text-lg text-brown-900 dark:text-white mb-0.5">Autumn Comfort Scarf</p>
        <p class="text-sm text-gray-700 dark:text-gray-300">Qty: 1 | Color: Burgundy</p>
        <p class="text-sm font-bold text-orange-800 dark:text-orange-400">$29.99</p>
      </div>
    </div>
    <div class="text-right sm:text-left">
      <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Current Status:</p>
      <p class="text-base font-bold text-orange-700 dark:text-orange-500">Shipped</p>
      <p class="text-xs text-gray-600 dark:text-gray-400">Last updated: Oct 24, 2023, 10:30 AM PST</p>
    </div>
  </div>

  <div class="mt-8 text-center">
    <button class="bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-full inline-flex items-center transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
      <svg class="w-5 h-5 mr-2" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      View Order Details
    </button>
  </div>
</div>

Menú desplegable de Glassmorphism

Un menú desplegable simple y responsivo con un diseño de glassmorphism, que utiliza tonos morados/violetas, adecuado para aplicaciones de tecnología/SaaS. Soporta el modo oscuro.

Abrir Vista previa

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-sm font-medium text-white hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gradient-to-r dark:from-purple-700 dark:to-indigo-800 dark:hover:from-purple-800 dark:hover:to-indigo-900 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" 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>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform transition ease-out duration-200 scale-100 opacity-100" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1 rounded-md bg-white/30 backdrop-blur-lg border border-white/40 dark:bg-gray-800/30 dark:border-gray-700/40" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">
        Account settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">
        Support
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">
        License
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-red-100 hover:text-red-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-red-900 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

Componentes de búsqueda

Categorías

Todos los componentes