Cerca componenti

Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

Componente della galleria dei prodotti

Un componente complesso e reattivo della galleria di prodotti con uno stile di design a nemorfismo e una combinazione di colori complementari, su misura per piattaforme musicali/audio. Include il supporto per la modalità oscura e funzionalità come elenchi di tracce, informazioni sull'artista e pulsanti di riproduzione.

Aperto Anteprima

                <div class="p-4 sm:p-8 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 min-h-screen font-sans transition-colors duration-300">

  <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 tracking-tight leading-tight pt-4 dark:text-orange-300 text-teal-700">
    Featured Albums & Tracks
  </h2>

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

    <!-- Album Card 1 -->
    <div class="relative bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1043/400/400" alt="Album Art - Chill Vibes" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 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>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Sunset Sessions</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Aurora Beats</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">50K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Golden Hour</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. Ocean Breeze</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Midnight Drive</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

    <!-- Album Card 2 -->
    <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1070/400/400" alt="Album Art - Cosmic Sounds" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 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>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Starlight Symphony</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Cosmic Cadence</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">75K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Nebula Drift</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. Pulsar Echoes</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Galactic Haze</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

    <!-- Album Card 3 -->
    <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1062/400/400" alt="Album Art - Indie Folk" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 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>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Forest Whispers</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Willow Creek</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">60K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Evergreen Path</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. River's Song</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Misted Dawn</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.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>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

  </div>

  <!-- Custom Styles for Neumorphism Shadows (usually in a CSS file or <style> block, but for a single HTML component, inline is shown for completeness) -->
  <style>
    .shadow-neumorphic {
      box-shadow: 7px 7px 15px rgba(174, 174, 192, 0.4), -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.4), -7px -7px 15px rgba(255, 255, 255, 0.05);
    }
    .shadow-neumorphic-pressed {
      box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.5), inset -5px -5px 10px #ffffff;
    }
    .dark .shadow-neumorphic-pressed-dark {
      box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.08);
    }

    .shadow-inner-neumorphic {
      box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.3), inset -3px -3px 6px #ffffff;
    }
    .dark .shadow-inner-neumorphic-dark {
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.03);
    }

    .shadow-neumorphic-button {
      box-shadow: 5px 5px 10px rgba(174, 174, 192, 0.4), -5px -5px 10px #ffffff;
    }
    .dark .shadow-neumorphic-button-dark {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.05);
    }
    .shadow-neumorphic-button-pressed {
      box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2), inset -3px -3px 8px rgba(255, 255, 255, 0.3);
    }
    .dark .shadow-neumorphic-button-pressed-dark {
      box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.1);
    }
    /* Complementary colors (teal and orange-ish) */
    .text-teal-700 { color: #0f766e; } /* Deeper Teal for headings */
    .dark .text-orange-300 { color: #fdba74; } /* Lighter Orange for headings */
    .bg-teal-500 { background-color: #14b8a6; } /* Primary Teal for buttons */
    .dark .bg-orange-500 { background-color: #f97316; } /* Primary Orange for buttons */
    .dark .bg-orange-600 { background-color: #ea580c; } /* Darker Orange for buttons */
    .text-teal-600 { color: #0d9488; } /* Teal for links/icons */
    .hover\:text-teal-800:hover { color: #065f46; } /* Darker Teal on hover */
    .dark .text-orange-400 { color: #fb923c; } /* Orange for links/icons */
    .dark .hover\:text-orange-bright:hover { color: #ffedd5; } /* Brighter Orange on hover */
  </style>

</div>

Skeuomorphic_Purple_Pagination

Un componente di impaginazione complesso e scheumorfico progettato per siti Web di consulenza/servizi, caratterizzato da una combinazione di colori viola/viola e piena reattività con supporto della modalità scura.

Aperto Anteprima

                <nav class="flex justify-center items-center py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-100 to-violet-200 dark:from-gray-900 dark:to-black rounded-xl shadow-xl border border-purple-300 dark:border-gray-700" aria-label="Pagination">
  <div class="flex flex-wrap gap-2 sm:gap-4 justify-center">
    <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 rounded-lg shadow-inner-lg shadow-purple-600/[.2] dark:shadow-purple-900/[.5] hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700" title="Previous Page">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.06 10l3.73 3.71a.75.75 0 11-1.06 1.06l-4.25-4.25a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z" clip-rule="evenodd" />
      </svg>
      <span class="hidden sm:inline ml-2">Previous</span>
    </a>
    <div class="hidden sm:flex rounded-lg shadow-md border border-purple-400 dark:border-purple-700">
      <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white dark:text-gray-100 bg-gradient-to-br from-purple-600 to-purple-700 dark:from-purple-700 dark:to-purple-800 rounded-l-lg shadow-inner-lg shadow-purple-900/[.3] dark:shadow-purple-950/[.6] ring-2 ring-purple-500 dark:ring-purple-600 ring-offset-2 ring-offset-purple-200 dark:ring-offset-gray-900 transition-all duration-300 ease-in-out transform scale-105 border border-purple-700 dark:border-purple-800 focus:outline-none">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        2
      </a>
      <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        3
      </a>
      <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-300 bg-gradient-to-br from-purple-200 to-purple-300 dark:from-purple-900 dark:to-gray-950 -ml-px" aria-disabled="true">
        ...
      </span>
      <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        9
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 -ml-px rounded-r-lg hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700">
        10
      </a>
    </div>
    <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-purple-700 dark:text-gray-200 bg-gradient-to-br from-purple-300 to-purple-400 dark:from-purple-800 dark:to-purple-900 rounded-lg shadow-inner-lg shadow-purple-600/[.2] dark:shadow-purple-900/[.5] hover:bg-gradient-to-tl hover:from-purple-400 hover:to-purple-500 dark:hover:from-purple-900 dark:hover:to-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-200 dark:focus:ring-offset-gray-900 focus:ring-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 active:shadow-inset-lg border border-purple-500 dark:border-purple-700" title="Next Page">
      <span class="hidden sm:inline mr-2">Next</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.94 10 7.21 6.29a.75.75 0 111.06-1.06l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

Luxury_Medical_Audio_Player

Un componente lettore audio complesso, reattivo e a tema lusso per applicazioni sanitarie, caratterizzato da una tipografia sofisticata, tavolozze di colori raffinate (triadiche) e supporto per la modalità scura.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 font-serif">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8 md:p-10">
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-6 sm:space-y-0 sm:space-x-8">
        <div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-52 md:h-52 rounded-2xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-600 group relative">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-600/70 via-purple-600/70 to-pink-600/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
            <p class="text-white text-xs text-center font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-150">Therapeutic Sounds</p>
          </div>
        </div>

        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white capitalize leading-snug mb-1 sm:mb-2">
            Mindfulness Meditation for Stress Relief
          </h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 font-medium opacity-90 mb-3 sm:mb-4 px-2 sm:px-0">
            Dr. Eleanor Vance, Clinical Psychologist
          </p>
          <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-500 dark:text-gray-400 text-xs sm:text-sm opaciy-80">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 0l-.707.707M6 18H4a2 2 0 01-2-2V8.307l2.748 1.924A2 2 0 007.5 9h10a2 2 0 011.5 1.076L22 8.307V16a2 2 0 01-2 2h-2M15 9V7a2 2 0 00-2-2H9a2 2 0 00-2 2v2m10 5a2 2 0 01-2 2H7a2 2 0 01-2-2v-2a2 2 0 012-2h6a2 2 0 012 2v2z"></path></svg>
            <span>Session 1 of 5</span>
            <span class="h-1 w-1 bg-gray-400 dark:bg-gray-500 rounded-full"></span>
            <span>30 min</span>
          </div>
        </div>
      </div>

      <div class="mt-8">
        <div class="relative h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full">
          <div class="absolute top-0 left-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-400 dark:to-purple-400 rounded-full" style="width: 45%;"></div>
          <div class="absolute top-1/2 -mt-2 -ml-2 w-4 h-4 bg-purple-600 dark:bg-purple-500 rounded-full shadow-lg cursor-pointer transform -translate-x-1/2" style="left: 45%;"></div>
        </div>
        <div class="flex justify-between text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium opacity-80">
          <span>0:14</span>
          <span>29:46</span>
        </div>
      </div>

      <div class="flex items-center justify-center space-x-6 sm:space-x-8 mt-6 sm:mt-8">
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg>
        </button>
        <button class="p-2 sm:p-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-600 dark:to-purple-700 text-white shadow-lg transform hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-purple-700">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75zM14.25 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>

      <div class="mt-8 border-t border-gray-100 dark:border-gray-700 pt-6 sm:pt-8">
        <h4 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white mb-4 opacity-95">Upcoming Sessions</h4>
        <ul class="space-y-4">
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=2" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-yellow-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Breathing Exercises for Anxiety</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 25 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <svg class="w-5 h-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="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=3" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-pink-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Guided Imagery for Pain Management</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 40 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <svg class="w-5 h-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="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
        </ul>
      </div>

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

Componente Messaggi di errore

Un componente di messaggio di errore semplice, pulito e reattivo con uno stile tipografico svizzero/internazionale e una combinazione di colori oceano/blu, adatto per la consegna di cibo a domicilio e i siti Web dei ristoranti. Include il supporto per la modalità oscura.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-sky-50 dark:bg-gray-900 p-4 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 border-t-4 border-blue-600 dark:border-blue-500 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="flex items-center space-x-4 mb-5">
      <svg class="h-10 w-10 text-blue-600 dark:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h2 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white capitalize tracking-tight">
        Oops! Order Failed
      </h2>
    </div>

    <p class="text-base md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
      We're sorry, but there was an issue processing your order. Please review the details below or try again.
    </p>

    <ul class="list-none p-0 space-y-3 mb-8">
      <li class="flex items-start text-gray-800 dark:text-gray-200">
        <svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm md:text-base">Payment authorization failed. Your bank might have declined the transaction.</span>
      </li>
      <li class="flex items-start text-gray-800 dark:text-gray-200">
        <svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm md:text-base">Item quantity exceeded restaurant stock for some items.</span>
      </li>
    </ul>

    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
      <button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out transform hover:scale-[1.02]">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 10.59V10m5.72-.94l-2.67 2.67m0 0l2.67 2.67m-2.67-2.67H7.72" />
        </svg>
        Retry Order
      </button>
      <button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 transition duration-150 ease-in-out transform hover:scale-[1.02]">
        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-9 2v4a1 1 0 001 1h3" />
        </svg>
        Back to Home
      </button>
    </div>
  </div>
</div>

RetroSessionTimeoutAlert

Un componente di avviso di timeout della sessione a tema retrò con toni della terra, progettato per blog/siti di contenuti. Presenta un look nostalgico con design reattivo e supporto per la modalità scura.

Aperto Anteprima

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/40 dark:bg-black/50 backdrop-blur-sm">
  <div class="relative p-6 rounded-lg shadow-xl max-w-sm w-full bg-stone-100 text-stone-800 border-4 border-stone-400 dark:bg-stone-800 dark:text-stone-100 dark:border-stone-600 font-mono animate-fade-in-down">
    <div class="absolute -top-4 -right-4 bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-100 px-3 py-1 rounded-full text-sm font-bold shadow-md transform rotate-2 origin-top-right border-2 border-stone-500 dark:border-stone-700">
      ALERT!
    </div>
    
    <div class="flex items-center space-x-4 mb-4">
      <div class="w-12 h-12 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-full text-white text-3xl font-bold border-2 border-red-700 dark:border-red-900 shadow-inner flex-shrink-0">
        !
      </div>
      <div>
        <h3 class="text-xl font-bold mb-1 uppercase tracking-wide text-stone-700 dark:text-stone-200">
          Session Expiring Soon
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-400">
          Due to inactivity, your session will expire in:
        </p>
      </div>
    </div>
    
    <div class="flex justify-center items-baseline mb-6 space-x-2">
      <span class="text-5xl font-extrabold text-red-600 dark:text-red-400 drop-shadow-lg leading-none" id="countdownMinutes">04</span>
      <span class="text-3xl font-bold text-red-600 dark:text-red-400 leading-none">:</span>
      <span class="text-5xl font-extrabold text-red-600 dark:text-red-400 drop-shadow-lg leading-none" id="countdownSeconds">59</span>
    </div>
    
    <p class="text-center text-sm mb-6 text-stone-600 dark:text-stone-400">
      Click 'Continue Session' to stay logged in and prevent data loss.
    </p>
    
    <div class="flex flex-col sm:flex-row gap-3">
      <button class="flex-1 py-3 px-6 rounded-md uppercase font-bold text-sm bg-lime-600 hover:bg-lime-700 text-white shadow-md transition duration-200 ease-in-out transform hover:scale-105 border-b-4 border-lime-800 active:border-b-0 dark:bg-lime-700 dark:hover:bg-lime-800 dark:border-lime-900">
        Continue Session
      </button>
      <button class="flex-1 py-3 px-6 rounded-md uppercase font-bold text-sm bg-stone-300 hover:bg-stone-400 text-stone-800 shadow-md transition duration-200 ease-in-out transform hover:scale-105 border-b-4 border-stone-500 active:border-b-0 dark:bg-stone-600 dark:hover:bg-stone-700 dark:text-stone-200 dark:border-stone-800">
        Logout
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
  }
</style>

Componente Art Deco News Tabs

Un componente complesso, reattivo e lussuoso in stile "Art Déco" progettato per siti Web di notizie e giornalismo, con motivi geometrici, colori analoghi ricchi e supporto per la modalità scura. Fornisce più elementi interattivi per la navigazione dei contenuti.

Aperto Anteprima

                <div class="font-sans bg-amber-50 dark:bg-zinc-900 min-h-screen p-4 sm:p-8 md:p-12 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-amber-100 dark:bg-zinc-800 shadow-xl rounded-lg overflow-hidden border-2 border-amber-300 dark:border-zinc-700 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border"></div>
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border-inverted"></div>

    <!-- Main Content Area -->
    <div class="p-6 md:p-10 lg:p-12 relative z-10">
      <h2 class="text-4xl sm:text-5xl md:text-6xl text-center font-bold mb-8 md:mb-12 text-zinc-800 dark:text-amber-50 drop-shadow-lg font-serif tracking-wide leading-tight">
        <span class="block">The Daily Dispatch</span>
        <span class="block text-2xl sm:text-3xl md:text-4xl text-amber-600 dark:text-sky-500 mt-2 font-normal">Global News at Your Fingertips</span>
      </h2>

      <!-- Tabs Navigation -->
      <div class="flex flex-wrap justify-center mb-8 border-b-4 border-amber-300 dark:border-zinc-700 bg-amber-200 dark:bg-zinc-700 rounded-t-lg shadow-inner">
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 first:rounded-tl-lg last:rounded-tr-lg active-tab transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Headlines</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">World</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Business</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Tech</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Culture</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
      </div>

      <!-- Tab Content Area -->
      <div class="tab-content bg-amber-50 dark:bg-zinc-900 p-6 md:p-8 lg:p-10 rounded-b-lg border-2 border-amber-300 dark:border-zinc-700 shadow-lg">
        <!-- Headline Tab Content -->
        <div class="tab-pane active-pane">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- News Card 1 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=1" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Revolutionary AI Breakthrough Achieves Human-Level Cognition</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Scientists at the Silicon Valley Institute announce a groundbreaking development in artificial intelligence, achieving unprecedented cognitive capabilities...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Technology</span>
                  <span>2 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 2 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=2" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Global Leaders Convene for Climate Emergency Summit</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Delegates from over 150 nations have gathered in Geneva to address the escalating climate crisis, proposing bold new targets and initiatives...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">World Affairs</span>
                  <span>5 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 3 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=3" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Art Market Boom: Rare Masterpiece Fetches Record Price</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">A previously unseen painting by a renowned Post-Impressionist artist sold for an astounding sum at Sotheby's, signaling a robust fine art market...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Culture</span>
                  <span>1 day ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 4 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden md:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=4" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">New Economic Policies Aim to Boost Small Businesses</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Government unveils a comprehensive stimulus package, including tax breaks and grants, designed to support and foster growth among small and medium enterprises...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Business & Finance</span>
                  <span>Yesterday</span>
                </div>
              </div>
            </article>

            <!-- News Card 5 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden lg:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=5" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Exploration Mission Discovers Ancient Underwater City</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Deep-sea archaeologists have uncovered ruins of a vast civilization beneath the Pacific, rewriting history and sparking new theories...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Science & Discovery</span>
                  <span>2 days ago</span>
                </div>
              </div>
            </article>

             <!-- Large News Card (Featured Headline - visible on all screens) -->
             <article class="col-span-1 md:col-span-2 lg:col-span-3 bg-amber-200 dark:bg-zinc-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border-4 border-amber-400 dark:border-sky-600 group relative flex flex-col md:flex-row">
                <div class="absolute inset-0 bg-gradient-to-br from-gold-500/30 to-yellow-700/30 dark:from-cyan-600/30 dark:to-blue-800/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
                <img src="https://picsum.photos/800/600?random=6" alt="Feature News Image" class="w-full md:w-1/2 h-64 md:h-auto object-cover rounded-t-lg md:rounded-l-lg md:rounded-tr-none border-b-4 md:border-r-4 border-amber-400 dark:border-sky-600">
                <div class="p-6 md:p-8 lg:p-10 flex flex-col justify-center w-full md:w-1/2">
                  <h3 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-zinc-900 dark:text-amber-50 mb-4 leading-tight font-serif drop-shadow-md">
                    <a href="#" class="hover:text-amber-800 dark:hover:text-sky-300 transition-colors duration-200">Exclusive: Geopolitical Tensions Rise Amidst Unprecedented Diplomatic Shuffle</a>
                  </h3>
                  <p class="text-zinc-800 dark:text-zinc-100 text-lg mb-6 line-clamp-4 leading-relaxed">Our senior correspondents provide an in-depth analysis of the recent shifts in international relations, exploring the ripple effects across continents and the potential for a new global order. Exclusive insights from top diplomats and analysts reveal complex motivations and hidden agendas...</p>
                  <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between text-md text-amber-700 dark:text-sky-300 font-semibold">
                    <span class="mb-2 sm:mb-0">Featured Analysis</span>
                    <div class="flex items-center">
                      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-amber-400 dark:border-sky-600">
                      <span>By Dr. Alistair Finch • 3 hours ago</span>
                    </div>
                  </div>
                </div>
              </article>

          </div>
        </div>

        <!-- Other Tab Contents (Hidden by default, for demonstration) -->
        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'World News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">European Union Reforms</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New parliamentary decisions reshape the future of the European economy and social policies...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Middle East Peace Talks</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Renewed diplomatic efforts aim to broker a lasting peace agreement in the troubled region...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Business News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Stock Market Volatility</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Analysts warn of impending corrections amid global economic uncertainties...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Tech Giant Acquisitions</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Major players in the tech industry are consolidating their power through strategic buyouts...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Tech News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Quantum Computing Leaps</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New advancements promise to revolutionize computation and data security...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">AI Ethics Debate</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Philosophers and engineers grapple with the moral implications of autonomous systems...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Culture News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Emerging Art Scenes</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Underground art movements are gaining mainstream recognition in major cities...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Literary Awards Season</h3>
              <p class="text-zinc-700 dark:text-zinc-300">The annual celebration of literary excellence unveils unexpected winners...</p>
            </article>
          </div>
        </div>

      </div>

      <div class="text-center mt-8 md:mt-12 text-zinc-600 dark:text-zinc-400 text-sm">
        <p>&copy; 2023 The Daily Dispatch. All rights reserved. Designed with Art Deco flair.</p>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Art Deco Geometric Patterns -->
<style>
  .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
  /* Dark mode specific adjustments for clip-path */
  .dark .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .dark .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
</style>

<!-- Simple JS for tab functionality (as per instructions, only HTML and Tailwind, but functional tabs require JS) -->
<!-- For a real-world scenario, this JS would be external or inline if absolutely necessary. -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabButtons = document.querySelectorAll('.flex.flex-wrap button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
      button.addEventListener('click', (event) => {
        // Remove active state from all buttons and panes
        tabButtons.forEach(btn => btn.classList.remove('active-tab'));
        tabPanes.forEach(pane => pane.classList.add('hidden'));

        // Add active state to the clicked button
        event.currentTarget.classList.add('active-tab');

        // Determine which tab content to show based on button index
        const index = Array.from(tabButtons).indexOf(event.currentTarget);
        if (tabPanes[index]) {
          tabPanes[index].classList.remove('hidden');
        }
      });
    });

    // Initialize first tab as active
    if (tabButtons.length > 0) {
      tabButtons[0].click();
    }
  });
</script>

Componente di visualizzazione dei contenuti Art Déco

Un componente di visualizzazione dei contenuti complesso e reattivo ispirato all'Art Déco per siti Web aziendali/aziendali, con motivi geometrici, ricche tonalità gioiello e supporto per la modalità scura. Include più sezioni per funzionalità, testimonianze e inviti all'azione.

Aperto Anteprima

                <div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 py-16 px-4 sm:px-6 lg:px-8 overflow-hidden">

  <!-- Header Section with Geometric Accent -->
  <div class="relative max-w-7xl mx-auto mb-16 text-center">
    <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-br from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 opacity-20 transform -skew-y-3 z-0"></div>
    <h1 class="relative text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-emerald-800 dark:text-emerald-300 mb-4 z-10">
      <span class="block">Elevating Your Vision</span>
      <span class="text-ruby-700 dark:text-ruby-400">With Unrivaled Precision</span>
    </h1>
    <p class="relative mt-4 text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto z-10">
      Discover the cornerstone of modern enterprise with our bespoke solutions, crafted for the discerning business.
    </p>
    <div class="relative w-24 h-1 items-center justify-center mx-auto mt-8 mb-4 bg-sapphire-600 dark:bg-sapphire-400 transform skew-x-12 z-10"></div>
  </div>

  <!-- Main Content Grid -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">

    <!-- Feature Card 1 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-lg mb-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.75 12L12 12V17L9.75 17ZM5.75 12L5.75 17L8 17L8 12L5.75 12ZM13.75 12L13.75 17L16 17L16 12L13.75 12ZM19.75 12L19.75 17L22 17L22 12L19.75 12ZM2 10L22 10V4L2 4V10ZM2 2L22 2L22 19L2 19V2Z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-4">Visionary Strategy</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Harness the power of foresight with our cutting-edge strategic insights, tailored to navigate the complexities of tomorrow's market.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Explore More
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>

    <!-- Feature Card 2 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up delay-200">
      <div class="absolute inset-0 bg-gradient-to-br from-sapphire-500 to-indigo-600 dark:from-sapphire-700 dark:to-indigo-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-sapphire-600 dark:bg-sapphire-500 text-white shadow-lg mb-6 transform rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" 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="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.007 6.38L21 17l-3-7h4L10 21v-7a5.002 5.002 0 00-6.007-6.38L3 6z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300 mb-4">Robust Implementation</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          From concept to execution, our meticulous implementation ensures seamless integration and unparalleled performance.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Learn How
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>

    <!-- Feature Card 3 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up delay-400">
      <div class="absolute inset-0 bg-gradient-to-br from-ruby-500 to-rose-600 dark:from-ruby-700 dark:to-rose-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-ruby-600 dark:bg-ruby-500 text-white shadow-lg mb-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.504A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.552M12 2.944V3m0 0V19.944m0-16.992a1.5 1.5 0 00-1.5 1.5V11.25a1.5 1.5 0 001.5 1.5 1.5 1.5 0 001.5-1.5V4.444A1.5 1.5 0 0012 2.944zm0 0L21 12M3 12l9 9"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-ruby-800 dark:text-ruby-300 mb-4">Sustainable Growth</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Cultivate lasting success with our growth-oriented strategies, designed for long-term prosperity and market leadership.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Start Growing
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Testimonial Section -->
  <div class="max-w-7xl mx-auto mt-24">
    <h2 class="text-center text-3xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-12 sm:mb-16">
      What Our Visionaries Say
    </h2>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">

      <!-- Testimonial 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 animate-fade-in-right">
        <div class="absolute inset-0 bg-gradient-to-br from-sapphire-500 to-indigo-600 dark:from-sapphire-700 dark:to-indigo-800 opacity-10 blur-sm rounded-lg"></div>
        <div class="flex-shrink-0 relative z-10">
          <img class="h-24 w-24 rounded-full object-cover border-4 border-sapphire-400 dark:border-sapphire-600 shadow-md" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="relative z-10 text-center md:text-left">
          <p class="text-lg text-gray-700 dark:text-gray-300 italic mb-4 leading-relaxed">“Partnering with them was a paradigm shift. Their meticulous approach led to unprecedented growth and market dominance.”</p>
          <p class="font-bold text-xl text-sapphire-800 dark:text-sapphire-300">Eleanor Vance</p>
          <p class="text-ruby-700 dark:text-ruby-400 text-sm">CEO, Global Innovations Corp.</p>
        </div>
      </div>

      <!-- Testimonial 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 animate-fade-in-left">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 opacity-10 blur-sm rounded-lg"></div>
        <div class="flex-shrink-0 relative z-10">
          <img class="h-24 w-24 rounded-full object-cover border-4 border-emerald-400 dark:border-emerald-600 shadow-md" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client Avatar">
        </div>
        <div class="relative z-10 text-center md:text-left">
          <p class="text-lg text-gray-700 dark:text-gray-300 italic mb-4 leading-relaxed">“Their strategic foresight is unparalleled. We've optimized our operations and expanded our reach beyond expectations.”</p>
          <p class="font-bold text-xl text-emerald-800 dark:text-emerald-300">Julian Thorne</p>
          <p class="text-ruby-700 dark:text-ruby-400 text-sm">CTO, Apex Dynamics</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Call to Action Section -->
  <div class="max-w-7xl mx-auto mt-24 relative overflow-hidden rounded-lg shadow-2xl animate-fade-in-up delay-600">
    <div class="absolute inset-0 bg-gradient-to-br from-ruby-600 to-rose-700 dark:from-ruby-800 dark:to-rose-900 opacity-90"></div>
    <div class="relative z-10 p-12 sm:p-16 lg:flex lg:items-center lg:justify-between">
      <div class="text-center lg:text-left">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-white mb-4">
          Ready to Redefine Your Future?
        </h2>
        <p class="text-xl text-ruby-200 dark:text-ruby-300 max-w-2xl mx-auto lg:mx-0">
          Join the elite who trust our expertise to carve their path to unparalleled success. Your journey begins now.
        </p>
      </div>
      <div class="mt-10 flex flex-col sm:flex-row items-center justify-center lg:mt-0 lg:ml-8 flex-shrink-0 space-y-4 sm:space-y-0 sm:space-x-4">
        <a href="#" class="w-full sm:w-auto px-8 py-4 border border-transparent text-lg font-medium rounded-full shadow-lg text-emerald-900 bg-emerald-300 hover:bg-emerald-200 dark:text-emerald-900 dark:bg-emerald-300 dark:hover:bg-emerald-200 transition-colors duration-300 transform hover:scale-105 active:scale-95">
          Get Started Now
        </a>
        <a href="#" class="w-full sm:w-auto px-8 py-4 border-2 border-white text-lg font-medium rounded-full text-white hover:bg-white hover:text-ruby-700 dark:hover:text-ruby-700 dark:hover:bg-white transition-colors duration-300 transform hover:scale-105 active:scale-95">
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom colors for Art Deco palette */
  .text-emerald-800 { color: #065F46; } /* Darker Emerald */
  .dark\:text-emerald-300 { color: #6EE7B7; } /* Lighter Emerald for Dark Mode */
  .bg-emerald-600 { background-color: #059669; }
  .dark\:bg-emerald-500 { background-color: #10B981; }
  .from-emerald-500 { --tw-gradient-from: #10B981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0)); }
  .to-teal-600 { --tw-gradient-to: #0D9488; }
  .dark\:from-emerald-700 { --tw-gradient-from: #047857; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(4, 120, 87, 0)); }
  .dark\:to-teal-800 { --tw-gradient-to: #0F766E; }

  .text-sapphire-800 { color: #1E40AF; } /* Darker Sapphire */
  .dark\:text-sapphire-300 { color: #93C5FD; } /* Lighter Sapphire for Dark Mode */
  .bg-sapphire-600 { background-color: #2563EB; }
  .dark\:bg-sapphire-500 { background-color: #3B82F6; }
  .from-sapphire-500 { --tw-gradient-from: #3B82F6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
  .to-indigo-600 { --tw-gradient-to: #4F46E5; }
  .dark\:from-sapphire-700 { --tw-gradient-from: #1D4ED8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 78, 216, 0)); }
  .dark\:to-indigo-800 { --tw-gradient-to: #3730A3; }

  .text-ruby-700 { color: #B91C1C; } /* Darker Ruby */
  .dark\:text-ruby-400 { color: #F87171; } /* Lighter Ruby for Dark Mode */
  .bg-ruby-600 { background-color: #DC2626; }
  .dark\:bg-ruby-500 { background-color: #EF4444; }
  .from-ruby-500 { --tw-gradient-from: #EF4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); }
  .to-rose-600 { --tw-gradient-to: #E11D48; }
  .dark\:from-ruby-700 { --tw-gradient-from: #B91C1C; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0)); }
  .dark\:to-rose-800 { --tw-gradient-to: #9F1239; }

  .from-emerald-600 { --tw-gradient-from: #059669; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0)); }
  .dark\:from-emerald-800 { --tw-gradient-from: #065F46; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 95, 70, 0)); }

  /* Animation keyframes */
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-right {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fade-in-left {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Apply animations to elements */
  .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; /* ensure initial state is hidden */ }
  .delay-200 { animation-delay: 0.2s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-600 { animation-delay: 0.6s; }
  .animate-fade-in-right { animation: fade-in-right 0.8s ease-out forwards; opacity: 0; }
  .animate-fade-in-left { animation: fade-in-left 0.8s ease-out forwards; opacity: 0; }

  /* Dark mode transition */
  body { transition: background-color 0.3s ease; }
  div, h1, h2, h3, p, a, img { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
</style>

Componente di autenticazione a due fattori

Componente di autenticazione a due fattori con un'estetica Art Déco, con motivi geometrici e una tavolozza di colori verde foresta, adatto per applicazioni di social media. Completamente reattivo con supporto per la modalità oscura.

Aperto Anteprima

                <div class="min-h-screen bg-[#F0F2EB] dark:bg-[#1A2C2A] flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-[#2F4F4F] shadow-2xl rounded-lg overflow-hidden max-w-sm w-full transform transition-all duration-300 hover:scale-105 border-4 border-[#3D695B] dark:border-[#74B7A4] p-6 lg:p-8 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <!-- Art Deco Bottom Border -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <div class="text-center mt-8 mb-4">
      <svg class="mx-auto h-16 w-16 text-[#3D695B] dark:text-[#74B7A4] mb-4 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.21 14.73C4.81 13.9 3 11.83 3 9.5a6.5 6.5 0 0113 0c0 2.33-1.81 4.4-4.21 5.23L12 18l-4.79-3.27zM17 11a5 5 0 00-10 0 5 5 0 0010 0zm-4.32-5.4A3.001 3.001 0 0012 3a3 3 0 00-2.68 1.6C7.59 4.7 6 6.94 6 9.5a6 6 0 0012 0c0-2.56-1.59-4.8-3.32-5.4zM12 21a1 1 0 01-1-1v-2h2v2a1 1 0 01-1 1zm-3-4a1 1 0 00-1 1v2a1 1 0 002 0v-2a1 1 0 00-1-1zM15 17a1 1 0 011-1v2a1 1 0 01-2 0v-2a1 1 0 011-1z" clip-rule="evenodd"/>
      </svg>
      <h2 class="text-3xl font-extrabold text-[#1A2C2A] dark:text-white mb-2 drop-shadow-md">Verify Your Identity</h2>
      <p class="text-md text-[#3D695B] dark:text-[#BACBC7]">Enter the 6-digit code from your authenticator app.</p>
    </div>

    <form class="space-y-6">
      <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50ransition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <div class="w-4 border-b-2 border-dashed border-[#74B7A4] dark:border-[#3D695B] self-center"></div>
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-[#3D695B] hover:bg-[#2E5245] dark:bg-[#74B7A4] dark:hover:bg-[#5C9482] focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 transform hover:scale-105">
          <svg class="-ml-1 mr-3 h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M15.75 5.5a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm-7.5 0a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm7.5 9h-1.5v-1.5h1.5v1.5zm-7.5 0h-1.5v-1.5h1.5v1.5z" clip-rule="evenodd" />
          </svg>
          Verify Code
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-[#3D695B] dark:text-[#BACBC7]">
        Didn't receive a code? <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Resend Code</a>
      </p>
      <p class="mt-2 text-sm text-[#3D695B] dark:text-[#BACBC7]">
        <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Need help?</a>
      </p>
    </div>
  </div>
</div>


<style>
  /* This is an optional style for better visual of Art Deco inputs, 
     though the core design is pure Tailwind */
  .ArtDecoInput {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    /* This clip-path attempts a more geometric shape; 
       Adjust values for desired effect. Pure CSS for complex shapes is limited. */
    /* For simpler rounded squares, remove clip-path */
  }
  .dark .ArtDecoInput {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
  }
</style>

Componente multimediale di viaggio Art Déco

Un complesso componente multimediale ispirato all'Art Déco per siti Web di viaggi e turismo, con punti salienti della destinazione con toni seppia/marrone e motivi geometrici. Completamente reattivo con supporto per la modalità oscura.

Aperto Anteprima

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

  <!-- Outer Deco Frame -->
  <div class="relative border-[6px] border-amber-900/60 dark:border-stone-700/60 p-4 sm:p-6 md:p-8 lg:p-10 shadow-2xl dark:shadow-stone-950/70 overflow-hidden">
    <div class="absolute inset-0 border-[3px] border-solid border-amber-800/40 dark:border-stone-800/40 opacity-70"></div>
    <div class="absolute inset-4 -m-[2px] border-[2px] border-dashed border-amber-700/30 dark:border-stone-600/30 opacity-50"></div>

    <!-- Background Geometric Pattern (Subtle) -->
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(255,247,237,0.3)_0%,transparent_100%)] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(60,60,60,0.3)_0%,transparent_100%)] z-0"></div>
    <div class="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:30px_30px] bg-[repeating-linear-gradient(45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px),repeating-linear-gradient(-45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px)] from-amber-700/30 to-amber-700/30 dark:from-stone-700/30 dark:to-stone-700/30 z-0"></div>

    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12 lg:gap-16">

      <!-- Left Section: Main Media Display -->
      <div class="lg:col-span-2 flex flex-col items-center">
        <div class="w-full aspect-video md:aspect-[16/9] bg-stone-200 dark:bg-stone-800 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50 overflow-hidden relative">
          <img src="https://picsum.photos/id/1010/1200/700" alt="Panoramic view of ancient city" class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent">
            <div class="absolute bottom-0 left-0 p-4 sm:p-6 text-white">
              <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-serif tracking-wider leading-tight text-amber-50 drop-shadow-lg">Mysteries of the Nile</h2>
              <p class="mt-2 text-base sm:text-lg opacity-90 max-w-lg hidden sm:block">Explore ancient wonders and timeless landscapes on a journey through history.</p>
            </div>
            <div class="absolute top-4 right-4 bg-amber-800/80 dark:bg-stone-800/80 text-white px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-semibold tracking-wider uppercase border border-amber-700 dark:border-stone-700 shadow-md">
              Featured Destination
            </div>
          </div>
        </div>

        <!-- Controls/Navigation (Optional: if this were interactive) -->
        <div class="mt-6 w-full flex justify-center space-x-4">
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md:h-8" 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="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Features -->
      <div class="lg:col-span-1">
        <div class="bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Journey Highlights</h3>

          <div class="grid gap-4">
            <!-- Highlight 1 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1020/80/80" alt="Pyramid" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Ancient Pyramids</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Unravel the secrets of Giza's majestic structures.</p>
              </div>
            </div>

            <!-- Highlight 2 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1025/80/80" alt="Desert Sunset" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Desert Safaris</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Experience the golden dunes at dusk.</p>
              </div>
            </div>

            <!-- Highlight 3 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1038/80/80" alt="River Boat" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Nile River Cruises</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Leisurely cruising through history.</p>
              </div>
            </div>
          </div>

          <div class="mt-8">
            <p class="text-sm sm:text-base text-stone-600 dark:text-stone-400 mb-2">Discover more about this exquisite journey:</p>
            <button class="w-full bg-amber-800 dark:bg-stone-700 text-white font-bold text-lg sm:text-xl py-3 px-6 rounded-md shadow-lg dark:shadow-stone-900/50 hover:bg-amber-700 dark:hover:bg-stone-600 transform hover:scale-105 transition-all duration-300 border-2 border-amber-700 dark:border-stone-600 tracking-wider uppercase">
              Book Your Adventure
            </button>
          </div>
        </div>

        <!-- Traveler Reviews/Profiles -->
        <div class="mt-8 bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Traveler's Voice</h3>
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Eleanor Vance</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"A truly unforgettable experience!"</p>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Arthur Sterling</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"Seamless and breathtaking."</p>
            </div>
          </div>
        </div>

      </div>

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

Retro_Alert_Messages_Component

Un componente di messaggi di avviso semplice e reattivo con una combinazione di colori retrò/vintage in nero, bianco e neon, adatto per un cruscotto. Include il supporto per la modalità oscura.

Aperto Anteprima

                <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="max-w-md mx-auto space-y-4">

    <!-- Success Alert -->
    <div class="relative p-4 border-2 border-green-500 bg-black text-green-500 shadow-neon-green overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-green-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Operation Success!</h3>
          <p class="text-sm">Your data has been successfully processed.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="relative p-4 border-2 border-blue-500 bg-black text-blue-500 shadow-neon-blue overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-blue-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Information Update</h3>
          <p class="text-sm">New dashboard features are available for testing.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="relative p-4 border-2 border-yellow-500 bg-black text-yellow-500 shadow-neon-yellow overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-yellow-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Caution Advised</h3>
          <p class="text-sm">Potential data discrepancies detected in report #345.</p>
        </div>
      </div>
    </div>

    <!-- Error Alert -->
    <div class="relative p-4 border-2 border-red-500 bg-black text-red-500 shadow-neon-red overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-red-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">System Error!</h3>
          <p class="text-sm">Failed to connect to the backend server. Please retry.</p>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* This is an example of including custom CSS for the retro effect within the HTML. */
  /* In a real scenario, this would ideally be in a separate CSS file or configured via Tailwind JIT/config */

  @keyframes pulse-border {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes glow {
    0% { filter: drop-shadow(0 0 0px var(--neon-color)); }
    100% { filter: drop-shadow(0 0 5px var(--neon-color)) drop-shadow(0 0 15px var(--neon-color)) drop-shadow(0 0 30px var(--neon-color)); }
  }

  .animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
  }

  /* Neon Glow Shadows (for retro effect) */
  .shadow-neon-green {
    --neon-color: theme('colors.green.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-blue {
    --neon-color: theme('colors.blue.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-yellow {
    --neon-color: theme('colors.yellow.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-red {
    --neon-color: theme('colors.red.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }

  /* Utility for dark mode background, not part of the component itself but for demonstration */
  body {
    transition: background-color 0.3s ease-in-out;
  }
  body.dark {
    background-color: theme('colors.gray.900');
  }
</style>

1 ... 107 108 109 110 111 ... 335