Alle Komponenten

Alle verfügbaren Tailwind CSS-Komponenten durchsuchen

Brutalist_RealEstate_Product_Gallery

Eine komplexe, brutalistisch gestaltete Produktgaleriekomponente für Immobilienangebote mit Juwelentönen, satten, gesättigten Farben, hohem Kontrast und Unterstützung des Dunkelmodus. Entwickelt für die Anzeige von Immobiliendetails mit mehreren interaktiven Elementen.

Offen Vorschau

                <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>

Produktbewertungen Komponente - Bauhaus Rainbow Gradient

Eine einfache, funktionale Produktbewertungskomponente mit einem vom Bauhaus inspirierten Design und einem Regenbogen-Farbverlauf, der sich für Beratung/Dienstleistungen eignet. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen Vorschau

                <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>

Sitemap-Komponente - Finanzen, Bankwesen

Eine einfache, reaktionsschnelle Sitemap-Komponente für Finanz-/Banking-Schnittstellen mit einer Dark-Mode-Benutzeroberfläche mit Sepia-/Brauntönen. Optimiert für Desktops, Tablets und Mobilgeräte, mit vollständiger Unterstützung des Dunkelmodus.

Offen Vorschau

                <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>

Neon Glow Regierungsnavigation

Eine reaktionsschnelle Navigationskomponente für Behörden/öffentliche Dienste mit Neonlicht, süßem Farbschema und Unterstützung für den Dunkelmodus. Mit hellen, leuchtenden Elementen mit lebendigen Lichteffekten.

Offen Vorschau

                <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

Ein einfacher, reaktionsschneller "Follow"-Button mit 3D-Ästhetik und analogem Farbschema, geeignet für eine Portfolio-Site, der den Hell- und Dunkelmodus unterstützt.

Offen Vorschau

                <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

Eine einfache Grid-Layout-Komponente für Food-/Restaurant-Websites mit einem klaren Design und einem monochromen Farbschema mit Unterstützung für den Dunkelmodus.

Offen Vorschau

                <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>

Art Deco Social Login-Komponente

Eine komplexe Social-Login-Komponente, die mit einer Art-Déco-Ästhetik für CRM/Business-Tools entwickelt wurde, mit geometrischen Mustern, warmen Neutraltönen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen Vorschau

                <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>

Gradient Rainbow Video Player-Komponente

Eine saubere, minimalistische Videoplayer-Komponente für Dashboards mit einem Regenbogen-Farbschema mit Farbverlauf, responsivem Design und Unterstützung für den Dunkelmodus, die den schweizerischen/internationalen Typografie-Stil verkörpert.

Offen Vorschau

                <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

Eine einfache, reaktionsschnelle Tooltip-Komponente für Immobilienanwendungen, die sich durch eine vom Memphis Design inspirierte Ästhetik mit einer monochromen Basis und einer lebendigen Akzentfarbe auszeichnet. Enthält Unterstützung für den Dunkelmodus.

Offen Vorschau

                <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>

Sitemap-Komponente

Eine responsive Sitemap-Komponente für Unterhaltungs-/Medienplattformen mit dunkler Benutzeroberfläche und Erdton-Farbschema mit mehreren Abschnitten und einer Fußzeile, die den Dunkelmodus unterstützt.

Offen Vorschau

                <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

Kategorien

Alle Komponenten