Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Brutalist_RealEstate_Product_Gallery

Un componente complejo de galería de productos de estilo brutalista para listados de bienes raíces, con tonos joya, colores saturados intensos, alto contraste y compatibilidad con modo oscuro. Diseñado para mostrar detalles de la propiedad con múltiples elementos interactivos.

Abrir Vista previa

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

  <!-- Section Header -->
  <div class="mb-8 md:mb-12 border-b-4 border-l-4 border-emerald-700 dark:border-red-700 p-4 bg-emerald-100 dark:bg-stone-800">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-tight text-emerald-900 dark:text-red-600 mb-2 leading-none">
      Hot Property Listings
    </h1>
    <p class="text-lg sm:text-xl md:text-2xl font-semibold text-emerald-800 dark:text-red-400">
      Explore our brutalist collection of available properties.
    </p>
  </div>

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

    <!-- Property Card 1 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-red-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
      <div class="absolute top-0 left-0 bg-red-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">FEATURED</div>
      <img src="https://picsum.photos/id/1018/600/400" alt="Modern Apartment Building" class="w-full h-64 object-cover border-b-4 border-red-700 dark:border-emerald-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-emerald-900 dark:text-emerald-500 mb-2 border-b-2 border-red-500 pb-2">Urban Loft Residence</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A striking, industrial-inspired loft in the heart of downtown. Concrete finishes and exposed ductwork provide a raw, authentic living experience.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 3 Beds</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 2 Baths</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 1,800 sqft</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> Built 1978</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$850K</span>
          <span class="text-xl font-bold text-emerald-700 dark:text-emerald-400">Negotiable</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-emerald-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-red-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-emerald-800 dark:text-emerald-300">Agent: John Smith</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Available 24/7</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-emerald-700 dark:text-emerald-400 hover:underline border-b-2 border-transparent hover:border-emerald-700 dark:hover:border-emerald-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

    <!-- Property Card 2 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-emerald-700 dark:border-red-700 shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] dark:shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)]">
      <div class="absolute top-0 right-0 bg-emerald-700 dark:bg-red-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider translate-x-2 -translate-y-2 -rotate-3 hover:rotate-0 transition-transform">NEW LISTING</div>
      <img src="https://picsum.photos/id/1041/600/400" alt="Scenic Countryside Home" class="w-full h-64 object-cover border-b-4 border-emerald-700 dark:border-red-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-red-900 dark:text-red-500 mb-2 border-b-2 border-emerald-500 pb-2">Brutalist Countryside Retreat</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">An unapologetic concrete masterpiece nestled in serene landscapes. Stripped-back design meets rural tranquility, offering profound escapism.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 4 Beds</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 3 Baths</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 2,500 sqft</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> Built 2005</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-emerald-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400">$1.2M</span>
          <span class="text-xl font-bold text-red-700 dark:text-red-400">Fixed Price</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-red-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-emerald-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-red-800 dark:text-red-300">Agent: Jane Doe</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Response time: 1hr</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-red-700 dark:text-red-400 hover:underline border-b-2 border-transparent hover:border-red-700 dark:hover:border-red-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

    <!-- Property Card 3 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-sapphire-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
      <div class="absolute top-0 left-0 bg-sapphire-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">PREMIUM</div>
      <img src="https://picsum.photos/id/1050/600/400" alt="Commercial Space" class="w-full h-64 object-cover border-b-4 border-sapphire-700 dark:border-emerald-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-sapphire-900 dark:text-sapphire-500 mb-2 border-b-2 border-red-500 pb-2">Commercial Block B</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A robust, imposing commercial building ready for redevelopment. Massive potential with a no-nonsense, concrete structure.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 5 Floors</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 10 Offices</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 10,000 sqft</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> Built 1960</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$3.5M</span>
          <span class="text-xl font-bold text-sapphire-700 dark:text-sapphire-400">Offer Welcome</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-sapphire-700 dark:bg-emerald-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-sapphire-900 dark:hover:bg-emerald-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-sapphire-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-sapphire-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-sapphire-800 dark:text-sapphire-300">Agent: Mike Ross</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Key Holder</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-sapphire-700 dark:text-sapphire-400 hover:underline border-b-2 border-transparent hover:border-sapphire-700 dark:hover:border-sapphire-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

  </div>

  <!-- Call to action/Footer space -->
  <div class="mt-12 md:mt-16 text-center border-t-4 border-r-4 border-emerald-700 dark:border-red-700 p-6 bg-emerald-100 dark:bg-stone-800">
    <p class="text-xl sm:text-2xl font-bold uppercase text-emerald-900 dark:text-red-500 mb-4">Ready to find your brutalist dream?</p>
    <button class="inline-block bg-red-700 dark:bg-sapphire-700 text-stone-50 px-8 py-4 text-xl font-bold uppercase border-4 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)]">
      Browse All Properties
    </button>
  </div>

  <!-- Custom Colors for Brutalism Jewel Tones -->
  <style>
    .dark .bg-ruby-700 { background-color: rgb(150, 40, 60); } /* Darker Ruby */
    .dark .hover\:bg-ruby-900:hover { background-color: rgb(110, 20, 40); } /* Even darker Ruby */
    .dark .bg-sapphire-700 { background-color: rgb(60, 80, 150); } /* Darker Sapphire */
    .dark .hover\:bg-sapphire-900:hover { background-color: rgb(40, 60, 110); } /* Even darker Sapphire */
    .text-emerald-900 { color: rgb(0, 50, 20); } /* Darker Emerald */
    .text-red-900 { color: rgb(70, 0, 0); } /* Darker Red */
    .text-sapphire-900 { color: rgb(0, 0, 40); } /* Darker Sapphire */

    /* Light mode custom colors */
    .bg-emerald-700 { background-color: rgb(5, 150, 105); } /* Emerald Green */
    .hover\:bg-emerald-900:hover { background-color: rgb(4, 120, 85); } /* Darker Emerald for hover */
    .border-emerald-700 { border-color: rgb(5, 150, 105); } /* Emerald Border */
    .text-emerald-700 { color: rgb(5, 150, 105); } /* Emerald Text */
    .text-emerald-800 { color: rgb(4, 130, 95); } /* Slightly darker Emerald Text */
    .text-emerald-900 { color: rgb(3, 100, 75); } /* Even darker Emerald Text */
    .border-emerald-500 { border-color: rgb(6, 175, 125); } /* Lighter Emerald Border */
    .text-emerald-400 { color: rgb(4, 185, 130); } /* Lighter Emerald Text */
    .text-emerald-300 { color: rgb(5, 200, 140); } /* Even lighter Emerald Text */

    .bg-red-700 { background-color: rgb(220, 38, 38); } /* Ruby Red */
    .hover\:bg-red-900:hover { background-color: rgb(180, 30, 30); } /* Darker Ruby for hover */
    .border-red-700 { border-color: rgb(220, 38, 38); } /* Ruby Border */
    .text-red-700 { color: rgb(220, 38, 38); } /* Ruby Text */
    .text-red-800 { color: rgb(190, 35, 35); } /* Slightly darker Ruby Text */
    .text-red-900 { color: rgb(150, 30, 30); } /* Even darker Ruby Text */
    .border-red-500 { border-color: rgb(239, 68, 68); } /* Lighter Ruby Border */
    .text-red-400 { color: rgb(248, 113, 113); } /* Lighter Ruby Text */
    .text-red-300 { color: rgb(252, 165, 165); } /* Even lighter Ruby Text */

    .bg-sapphire-700 { background-color: rgb(37, 99, 235); } /* Sapphire Blue */
    .hover\:bg-sapphire-900:hover { background-color: rgb(29, 78, 216); } /* Darker Sapphire for hover */
    .border-sapphire-700 { border-color: rgb(37, 99, 235); } /* Sapphire Border */
    .text-sapphire-700 { color: rgb(37, 99, 235); } /* Sapphire Text */
    .text-sapphire-800 { color: rgb(30, 80, 190); } /* Slightly darker Sapphire Text */
    .text-sapphire-900 { color: rgb(20, 60, 150); } /* Even darker Sapphire Text */
    .border-sapphire-500 { border-color: rgb(59, 130, 246); } /* Lighter Sapphire Border */
    .text-sapphire-400 { color: rgb(96, 165, 250); } /* Lighter Sapphire Text */
    .text-sapphire-300 { color: rgb(147, 197, 253); } /* Even lighter Sapphire Text */

  </style>
</div>

Componentes de reseñas de productos - Bauhaus Rainbow Gradient

Un componente de reseñas de productos simple y funcional con un diseño inspirado en la Bauhaus y un esquema de colores degradados del arco iris, adecuado para consultoría / servicios. Totalmente receptivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-bold text-white uppercase tracking-wider text-center drop-shadow-md">Client Testimonials</h2>
    </div>
    
    <div class="p-6 sm:p-8 space-y-8">
      <!-- Review 1 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-green-500 shrink-0" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"The strategic guidance provided by this team was instrumental in our recent growth. Highly recommend their services!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">CEO, Tech Solutions Inc.</p>
        </div>
      </div>

      <!-- Review 2 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-purple-500 shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"Exceptional clarity and actionable insights. Our operations are far more efficient now. Five stars!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">John Smith</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Founder, Global Ventures</p>
        </div>
      </div>

      <!-- Review 3 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-pink-500 shrink-0" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"Professional, insightful, and truly transformative for our business strategy. A pleasure to work with!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">Sarah Chen</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Director, Creative Agency</p>
        </div>
      </div>
    </div>
    
    <div class="bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 p-6 sm:p-8 text-center">
      <p class="text-white text-md sm:text-lg font-medium">Ready to transform your business? <a href="#" class="underline font-bold hover:text-yellow-200 transition-colors">Contact us today!</a></p>
    </div>
  </div>
</div>

Componente Mapa del Sitio - Finanzas Banca

Un componente de mapa del sitio simple y receptivo para interfaces financieras/bancarias, con una interfaz de usuario de modo oscuro con tonos sepia/marrón. Optimizado para computadoras de escritorio, tabletas y dispositivos móviles, con soporte completo para el modo oscuro.

Abrir Vista previa

                <footer class="bg-stone-800 text-stone-300 py-8 px-4 dark:bg-stone-900 dark:text-stone-400 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-y-8 gap-x-4">

    <!-- Column 1: Company -->
    <div>
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Company</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">About Us</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Careers</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Press</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Blog</a></li>
      </ul>
    </div>

    <!-- Column 2: Products -->
    <div>
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Products</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Checking Accounts</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Savings Accounts</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Credit Cards</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Loans</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Investments</a></li>
      </ul>
    </div>

    <!-- Column 3: Support -->
    <div>
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Support</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Help Center</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Contact Us</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">FAQs</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Security</a></li>
      </ul>
    </div>

    <!-- Column 4: Legal & Compliance -->
    <div>
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Legal</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Disclosures</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Cookie Policy</a></li>
      </ul>
    </div>

    <!-- Column 5: Social Media (Optional, hidden on smaller screens for simplicity) -->
    <div class="col-span-full md:col-span-2 lg:col-span-1 lg:block hidden">
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" aria-label="Facebook" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c1.378 0 2.518-.616 3.125-1.579L13.882 17.5c-1.391-.456-2.617-.92-3.83-1.428-.847-1.341-1.347-2.73-1.556-4.148C7.575 8.785 8.775 7.5 10.22 7.5h.398c.957-2.355 2.378-4.328 4.28-5.719C16.892 1.346 18.5 0 20.25 0h.008l-2.023 2.148c-1.353.947-2.457 2.05-3.35 3.322C13.864 7.28 13.5 8.946 13.5 10.5c0 1.258.291 2.451.8 3.5-.06.012-.12.02-.18.026-.826.082-1.68-.006-2.495-.262-1.996.657-3.921 1.29-5.77 1.905-.62.208-1.284.407-1.92.595-1.503.447-3.08.384-4.57.172v.008C3.12 17.652 2 19.336 2 20.25c0 1.05.908 1.758 2.022 1.758h14.075c1.07 0 1.953-.615 1.953-1.758 0-.486-.334-.94-.852-1.32-.239-.17-.506-.318-.792-.47-.468-.242-.988-.45-1.543-.635-1.97-.65-3.92-1.28-5.83-1.89-1.25-.4-2.49-.8-3.706-1.18-.86-.27-1.69-.53-2.49-.8z" />
          </svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" 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.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

  </div>

  <div class="mt-8 pt-6 border-t border-stone-700 dark:border-stone-700 text-center text-sm text-stone-400 dark:text-stone-500">
    &copy; 2023 YourBank. All rights reserved.
  </div>
</footer>

Navegación gubernamental de Neon Glow

Un componente de navegación receptivo para el gobierno/servicios públicos con un brillo de neón, una combinación de colores dulces y compatibilidad con el modo oscuro. Cuenta con elementos brillantes y resplandecientes con efectos de iluminación vibrantes.

Abrir Vista previa

                <nav class="bg-gradient-to-r from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-gray-800 dark:to-teal-950 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- Logo/Brand Section -->
    <a href="#" class="flex items-center space-x-2 text-lg font-bold text-purple-700 dark:text-cyan-400 group relative">
      <svg class="h-8 w-8 text-pink-500 dark:text-teal-400 group-hover:drop-shadow-[0_0_8px_pink] dark:group-hover:drop-shadow-[0_0_8px_teal] transition-all duration-300" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
      </svg>
      <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_rgba(192,38,211,0.8)] dark:group-hover:drop-shadow-[0_0_8px_rgba(45,212,191,0.8)] transition-all duration-300">PublicPulse</span>
      <div class="absolute inset-0 bg-transparent rounded-lg blur-sm group-hover:bg-purple-300/30 dark:group-hover:bg-cyan-600/30 transition-all duration-300 scale-x-0 group-hover:scale-x-100 origin-left"></div>
    </a>

    <!-- Mobile Toggle Button (Hidden on larger screens) -->
    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="cursor-pointer lg:hidden block text-purple-700 dark:text-cyan-400 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-cyan-500 rounded p-2 relative z-20">
      <svg class="h-6 w-6 peer-checked:hidden" 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 6h16M4 12h16M4 18h16"></path>
      </svg>
      <svg class="h-6 w-6 hidden peer-checked:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </label>

    <!-- Navigation Links -->
    <div class="w-full lg:flex lg:items-center lg:w-auto mt-4 lg:mt-0 hidden peer-checked:block transition-all duration-500 ease-in-out" id="navbar-default">
      <ul class="flex flex-col lg:flex-row lg:space-x-8 text-sm font-medium w-full lg:w-auto">
        <li>
          <a href="#" class="relative block py-2 px-3 text-pink-600 dark:text-teal-300 rounded hover:bg-pink-200 dark:hover:bg-teal-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-teal-500">
            Home
            <span class="absolute inset-0 z-0 bg-gradient-to-r from-pink-300/30 to-purple-300/30 dark:from-teal-600/30 dark:to-cyan-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_pink] dark:group-hover:drop-shadow-[0_0_8px_teal]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-purple-600 dark:text-orange-300 rounded hover:bg-purple-200 dark:hover:bg-orange-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-orange-500">
            Services
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-purple-300/30 to-yellow-300/30 dark:from-orange-600/30 dark:to-amber-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_purple] dark:group-hover:drop-shadow-[0_0_8px_orange]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-green-600 dark:text-lime-300 rounded hover:bg-green-200 dark:hover:bg-lime-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-lime-500">
            About Us
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-green-300/30 to-blue-300/30 dark:from-lime-600/30 dark:to-emerald-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_green] dark:group-hover:drop-shadow-[0_0_8px_lime]"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative block py-2 px-3 text-blue-600 dark:text-cyan-300 rounded hover:bg-blue-200 dark:hover:bg-cyan-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-cyan-500">
            Contact
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-blue-300/30 to-indigo-300/30 dark:from-cyan-600/30 dark:to-sky-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_blue] dark:group-hover:drop-shadow-[0_0_8px_cyan]"></span>
          </a>
        </li>
         <li>
          <a href="#" class="relative block py-2 px-3 text-yellow-600 dark:text-amber-300 rounded hover:bg-yellow-200 dark:hover:bg-amber-800 transition-all duration-300 group overflow-hidden focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-amber-500">
            FAQ
             <span class="absolute inset-0 z-0 bg-gradient-to-r from-yellow-300/30 to-orange-300/30 dark:from-amber-600/30 dark:to-orange-600/30 backdrop-blur-sm scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left rounded"></span>
            <span class="relative z-10 group-hover:drop-shadow-[0_0_8px_yellow] dark:group-hover:drop-shadow-[0_0_8px_amber]"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

3D_Analogous_Simple_Follow_Button_Component

Un botón 'Seguir' simple y receptivo con una estética 3D y un esquema de color análogo, adecuado para un sitio de portafolio, que admite modos claro y oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
  <button class="relative group w-32 h-12 rounded-lg overflow-hidden font-semibold transition-all duration-300 ease-in-out
                     bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800
                     text-white shadow-lg dark:shadow-xl
                     active:translate-y-0.5 active:shadow-sm
                     hover:from-indigo-600 hover:to-purple-700 dark:hover:from-indigo-800 dark:hover:to-purple-900">
    
    <!-- Front face of the button -->
    <div class="absolute inset-0 flex items-center justify-center
                bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800
                rounded-lg
                transition-all duration-300 ease-in-out
                group-hover:opacity-0 group-hover:translate-y-full
                group-active:translate-y-0.5 group-active:shadow-sm">
      Follow
    </div>

    <!-- Back face (pressed state) / Alternative state -->
    <div class="absolute inset-0 flex items-center justify-center
                bg-gradient-to-br from-purple-600 to-pink-500 dark:from-purple-800 dark:to-pink-700
                rounded-lg
                transition-all duration-300 ease-in-out
                origin-top
                group-hover:translate-y-0 group-hover:opacity-100 group-hover:scale-y-1
                -translate-y-full opacity-0 scale-y-0
                transform-gpu
                z-10">
      Following!
    </div>

    <!-- Shadow/Depth effect -->
    <div class="absolute inset-x-2 bottom-0 h-2 bg-gradient-to-br from-indigo-700 to-purple-800 dark:from-indigo-900 dark:to-purple-900 rounded-b-lg
                filter blur-sm opacity-70 transition-all duration-300 ease-in-out
                group-hover:h-0 group-hover:opacity-0
                group-active:h-0 group-active:opacity-0"></div>

  </button>
</div>

Monospace_Developer_Food_Grid_Layout

Un componente de diseño de cuadrícula simple con temática monoespaciada para sitios web de alimentos / restaurantes, con un diseño limpio y un esquema de color monocromático con soporte para modo oscuro.

Abrir Vista previa

                <div class="font-['JetBrains_Mono',_monospace] bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 min-h-screen">
  <h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center text-gray-900 dark:text-gray-100 uppercase tracking-widest">
    <span class="block">/MENU/</span><span class="block text-xl sm:text-2xl mt-2 lowercase text-gray-700 dark:text-gray-300">[select]</span>
  </h2>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-7xl mx-auto">

    <!-- Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1080/400/300" alt="Spicy Noodles">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('spicy_noodles');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">A fiery delight, perfect for those who crave a kick. Fresh noodles with chili oil and special sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$12.99;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Vegetable Curry">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('veg_curry');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Hearty and wholesome, packed with fresh garden vegetables in a rich, aromatic sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$10.50;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1/400/300" alt="Chicken Burger">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('chicken_burger');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Classic grilled chicken patty with fresh lettuce, tomato, and special burger sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$8.75;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/400/400/300" alt="Fresh Salad">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('fresh_salad');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Light and refreshing, a mix of seasonal greens, vibrant vegetables, and a tangy dressing.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$7.00;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/10/400/300" alt="Pepperoni Pizza">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('pepperoni_pizza');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Classic pepperoni, melted cheese, and a crispy crust. A timeless favorite.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$15.99;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/141/400/300" alt="Chocolate Cake">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('chocolate_cake');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Rich, decadent chocolate cake, a perfect end to any meal or a sweet treat on its own.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$6.25;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

Componente de inicio de sesión social Art Deco

Un complejo componente de inicio de sesión social diseñado con una estética Art Deco para CRM/Business Tools, con patrones geométricos, neutros cálidos y capacidad de respuesta total con soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-serif dark:from-stone-900 dark:to-stone-950">
  <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-2xl dark:bg-stone-800 transition-all duration-300 transform scale-100 opacity-100">
    <div class="relative mb-8 text-center">
      <h2 class="text-4xl font-bold text-stone-800 dark:text-stone-100 mb-2 tracking-wider">Login</h2>
      <p class="text-stone-600 dark:text-stone-300 mb-6">Access your CRM dashboard</p>

      <!-- Art Deco Pattern Top -->
      <div class="absolute -top-6 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-gradient-to-r from-yellow-700 to-yellow-900 rounded-b-lg shadow-md"></div>
      <div class="absolute -top-8 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-stone-300 dark:bg-stone-600 rounded-b-lg"></div>

      <!-- Art Deco geometric lines -->
      <div class="absolute inset-x-0 bottom-0 text-stone-300 dark:text-stone-600 text-sm opacity-50">
        <svg class="mx-auto" width="100%" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 10H100" stroke="currentColor" stroke-width="0.5"/>
          <path d="M10 5L90 5" stroke="currentColor" stroke-width="0.5"/>
          <path d="M20 0L80 0" stroke="currentColor" stroke-width="0.5"/>
        </svg>
      </div>
    </div>

    <div class="space-y-4 mb-6">
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-stone-100 border border-stone-300 text-stone-700 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-200 shadow-sm hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-300">
        <img src="https://www.svgrepo.com/show/512317/google-177.svg" alt="Google logo" class="h-5 w-5 mr-3 filter dark:invert">
        <span class="font-medium">Sign in with Google</span>
      </button>
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-stone-100 border border-stone-300 text-stone-700 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-200 shadow-sm hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-300">
        <img src="https://www.svgrepo.com/show/303126/facebook-1-logo.svg" alt="Facebook logo" class="h-5 w-5 mr-3 filter dark:invert">
        <span class="font-medium">Sign in with Facebook</span>
      </button>
    </div>

    <div class="relative flex py-5 items-center">
      <div class="flex-grow border-t border-stone-300 dark:border-stone-600"></div>
      <span class="flex-shrink mx-4 text-stone-500 dark:text-stone-400 font-sans text-sm">Or continue with</span>
      <div class="flex-grow border-t border-stone-300 dark:border-stone-600"></div>
    </div>

    <form class="space-y-5">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-1">Email Address</label>
        <input type="email" id="email" name="email" class="mt-1 block w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-yellow-800 focus:border-yellow-800 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-yellow-700 dark:focus:border-yellow-700 shadow-sm text-base" placeholder="[email protected]">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-1">Password</label>
        <input type="password" id="password" name="password" class="mt-1 block w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-yellow-800 focus:border-yellow-800 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-yellow-700 dark:focus:border-yellow-700 shadow-sm text-base" placeholder="••••••••">
      </div>

      <div class="flex items-center justify-between text-sm">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-yellow-800 focus:ring-yellow-700 border-stone-300 rounded dark:border-stone-600 dark:bg-stone-700 dark:checked:bg-yellow-700 dark:focus:ring-offset-stone-800">
          <label for="remember-me" class="ml-2 block text-stone-700 dark:text-stone-300">Remember me</label>
        </div>
        <a href="#" class="font-medium text-yellow-800 hover:text-yellow-700 dark:text-yellow-600 dark:hover:text-yellow-500 transition-colors duration-200">Forgot your password?</a>
      </div>

      <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-medium text-white bg-yellow-800 hover:bg-yellow-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-offset-stone-800 transition-colors duration-300 tracking-wide">
        Sign In
      </button>
    </form>

    <p class="mt-8 text-center text-sm text-stone-600 dark:text-stone-300">
      Don't have an account?
      <a href="#" class="font-medium text-yellow-800 hover:text-yellow-700 dark:text-yellow-600 dark:hover:text-yellow-500 transition-colors duration-200">Sign up</a>
    </p>

    <!-- Art Deco Pattern Bottom -->
    <div class="relative mt-8">
      <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-gradient-to-r from-yellow-700 to-yellow-900 rounded-t-lg shadow-md"></div>
      <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-stone-300 dark:bg-stone-600 rounded-t-lg"></div>

      <!-- Art Deco geometric lines -->
      <div class="absolute inset-x-0 top-0 text-stone-300 dark:text-stone-600 text-sm opacity-50 rotate-180">
        <svg class="mx-auto" width="100%" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 10H100" stroke="currentColor" stroke-width="0.5"/>
          <path d="M10 5L90 5" stroke="currentColor" stroke-width="0.5"/>
          <path d="M20 0L80 0" stroke="currentColor" stroke-width="0.5"/>
        </svg>
      </div>
    </div>

  </div>
</div>

Componente del reproductor de vídeo Gradient Rainbow

Un componente de reproductor de video limpio y minimalista para tableros, con un esquema de colores de arco iris degradado, diseño receptivo y compatibilidad con modo oscuro, que encarna el estilo de tipografía suiza / internacional.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans flex items-center justify-center">
  <div class="w-full max-w-4xl rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out
              bg-gradient-to-br from-purple-400 via-pink-500 to-red-500
              dark:from-purple-800 dark:via-pink-900 dark:to-red-900
              p-1 sm:p-1.5 md:p-2">
    <div class="bg-white dark:bg-gray-800 rounded-md flex flex-col md:flex-row relative z-10 p-4 sm:p-6 lg:p-8">

      <!-- Video Player Section -->
      <div class="w-full md:w-3/5 lg:w-2/3 flex-shrink-0 mb-6 md:mb-0 md:mr-6 lg:mr-8 relative aspect-video overflow-hidden rounded-md group">
        <video class="w-full h-full object-cover rounded-md" poster="https://picsum.photos/seed/video-thumb/800/450">
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        <!-- Play Button Overlay -->
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 rounded-md opacity-100 group-hover:opacity-0 transition-opacity duration-300 ease-in-out cursor-pointer">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <!-- Video Info & Controls Section -->
      <div class="flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 leading-tight">
            Dashboard Data Visualization Overview
          </h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 sm:mb-6">
            A concise walkthrough of our latest dashboard features and key data insights.
          </p>

          <div class="flex items-center text-sm mb-4">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Presenter avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
              <p class="text-gray-500 dark:text-gray-400">Analytics Lead</p>
            </div>
          </div>

          <div class="text-xs text-gray-500 dark:text-gray-400 mb-4">
            <p>Published: 3 days ago</p>
            <p>Views: 1.2M</p>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="mt-auto flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 py-3 px-6 rounded-lg text-sm font-semibold
                         bg-gradient-to-r from-blue-500 to-teal-500 text-white dark:text-gray-100
                         hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
                         shadow-md hover:shadow-lg transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
            <svg class="inline-block w-4 h-4 mr-2 -mt-0.5" 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>
            Download Report
          </button>
          <button class="flex-1 py-3 px-6 rounded-lg text-sm font-semibold
                         bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200
                         hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                         shadow-md hover:shadow-lg transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
            <svg class="inline-block w-4 h-4 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
            </svg>
            Leave Feedback
          </button>
        </div>
      </div>

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

Memphis_Real_Estate_Tooltip

Un componente de información sobre herramientas simple y receptivo para aplicaciones inmobiliarias, con una estética inspirada en Memphis Design con una base monocromática y un color de acento vibrante. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="relative flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 overflow-hidden">
  <!-- Outer decorative elements for Memphis style -->
  <div class="absolute top-10 left-10 w-20 h-20 bg-blue-500 transform rotate-45 hidden md:block"></div>
  <div class="absolute bottom-10 right-10 w-24 h-24 bg-red-500 rounded-full hidden md:block"></div>
  <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-gradient-to-br from-yellow-300 to-orange-400 rotate-12 transform hidden md:block"></div>

  <div class="group relative z-10 p-2">
    <button class="px-6 py-3 bg-gray-800 text-white font-bold uppercase tracking-wider rounded-lg shadow-md transition-transform duration-200 ease-in-out hover:scale-105 active:scale-95
                   dark:bg-gray-100 dark:text-gray-900 dark:border-2 dark:border-blue-500
                   focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75">
      Property Details
    </button>

    <!-- Tooltip content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-72 md:w-80 p-4
                bg-gray-900 border-4 border-blue-500 text-white rounded-lg shadow-lg
                opacity-0 invisible group-hover:opacity-100 group-hover:visible
                transform translate-y-2 group-hover:translate-y-0 
                transition-all duration-300 ease-in-out origin-bottom
                dark:bg-gray-100 dark:border-blue-500 dark:text-gray-900
                relative md:static md:w-auto md:max-w-2xl lg:max-w-3xl lg:w-96
                before:content-[''] before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-8 before:border-t-gray-900 before:border-x-transparent before:border-b-transparent
                dark:before:border-t-gray-100">

      <div class="relative flex flex-col gap-3">
        <h3 class="text-xl font-extrabold text-blue-500 dark:text-blue-600 uppercase tracking-wide">Luxury Villa</h3>
        <p class="text-sm text-gray-200 dark:text-gray-700">Spacious 4-bedroom villa with ocean views.</p>

        <div class="flex items-center gap-2 text-sm text-gray-300 dark:text-gray-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          <span>123 Ocean Dr, Miami</span>
        </div>

        <ul class="grid grid-cols-2 gap-2 text-sm">
          <li class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 rounded-full"></span><span class="font-medium">Beds:</span> 4</li>
          <li class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 rounded-full"></span><span class="font-medium">Baths:</span> 3.5</li>
          <li class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 rounded-full"></span><span class="font-medium">Area:</span> 3200 sqft</li>
          <li class="flex items-center gap-2"><span class="w-2 h-2 bg-blue-500 rounded-full"></span><span class="font-medium">Price:</span> $1.2M</li>
        </ul>

        <a href="#" class="mt-3 block text-center px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition-colors duration-200 dark:bg-blue-600 dark:hover:bg-blue-700">
          View Listing
        </a>
      </div>

      <!-- Triangle pointer (mimicking Memphis sharp angles) -->
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-[calc(100%+0px)] transform rotate-45 w-6 h-6 bg-blue-500 group-hover:opacity-0 group-hover:invisible transition-opacity duration-300 pointer-events-none hidden md:block">
        <div class="absolute -inset-1 border-2 border-dashed border-white dark:border-gray-900"></div>
      </div>

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

Componente de mapa del sitio

Un componente de mapa del sitio responsivo para plataformas de entretenimiento/medios con una interfaz de usuario oscura y un esquema de color de tono tierra, con múltiples secciones y un pie de página, que admite el modo oscuro.

Abrir Vista previa

                <div class="bg-gray-900 text-gray-200 font-sans p-6 md:p-10 lg:p-16 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">

    <!-- Section 1: Categories -->
    <div class="flex flex-col space-y-4">
      <h3 class="text-lg font-semibold text-amber-500 mb-2">Categories</h3>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Movies</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">TV Shows</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Originals</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Kids & Family</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Documentaries</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Sport Events</a>
    </div>

    <!-- Section 2: Explore -->
    <div class="flex flex-col space-y-4">
      <h3 class="text-lg font-semibold text-amber-500 mb-2">Explore</h3>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Trending Now</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">New Releases</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Coming Soon</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Browse by Genre</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Watchlist</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Top 10</a>
    </div>

    <!-- Section 3: Account & Support -->
    <div class="flex flex-col space-y-4">
      <h3 class="text-lg font-semibold text-amber-500 mb-2">Account & Support</h3>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">My Account</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Help Center</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">FAQ</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Contact Us</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Manage Devices</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Privacy Settings</a>
    </div>

    <!-- Section 4: Company & Legal -->
    <div class="flex flex-col space-y-4">
      <h3 class="text-lg font-semibold text-amber-500 mb-2">Company & Legal</h3>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">About Us</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Careers</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Terms of Service</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Privacy Policy</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Cookie Settings</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Investors</a>
    </div>

  </div>

  <hr class="border-gray-700 my-10">

  <!-- Footer Bottom -->
  <div class="max-w-7xl mx-auto text-center md:flex md:justify-between md:items-center text-sm text-gray-500">
    <div class="mb-4 md:mb-0">
      &copy; 2023 EntertainmentCo. All rights reserved.
    </div>
    <div class="flex justify-center space-x-6">
      <a href="#" class="hover:text-amber-300 transition duration-300">Facebook</a>
      <a href="#" class="hover:text-amber-300 transition duration-300">Twitter</a>
      <a href="#" class="hover:text-amber-300 transition duration-300">Instagram</a>
      <a href="#" class="hover:text-amber-300 transition duration-300">YouTube</a>
    </div>
  </div>
</div>

1 ... 44 45 46 47 48 ... 282

Categorías

Todos los componentes