Cerca componenti

Categorie

Componenti Componenti funzionali

Componenti funzionali

Componenti che forniscono funzionalità specifiche del sito Web

Componenti funzionali Componente

Un componente dashboard complesso e reattivo con un'estetica monospace/developer, che utilizza neutri freddi. Dispone di elementi di visualizzazione dei dati, sezioni simili a terminali e supporto per la modalità oscura.

Aperto Anteprima

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

  <!-- Header -->
  <header class="flex flex-col md:flex-row items-center justify-between p-4 mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-2xl md:text-3xl font-bold text-blue-700 dark:text-blue-400 mb-2 md:mb-0">SYSTEM_DASHBOARD:/&gt;</h1>
    <div class="flex items-center space-x-4">
      <span class="text-sm text-gray-600 dark:text-gray-400">STATUS: <span class="text-green-500 dark:text-green-400">ONLINE</span></span>
      <button class="p-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v2.102a1 1 0 01-.817.986l-3.238.162a1 1 0 00-.785.647L5.787 9.87a1 1 0 01-.194.275l-2.091 2.215a1 1 0 00-.071 1.488l2.946 3.682A1 1 0 008.3 18h7.42a1 1 0 00.999-.817l-.84-7.557a1 1 0 00-.916-.957L13 8.358V5.5c0-.682-.315-1.32-.862-1.745l-3.468-2.67c-.201-.155-.444-.24-.698-.24z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <img class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
    </div>
  </header>

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

    <!-- Left Column (Status & Logs) -->
    <div class="lg:col-span-2 space-y-6">

      <!-- System Overview Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">SYSTEM OVERVIEW://</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">CPU_LOAD:</span> <span class="font-bold text-orange-500 dark:text-orange-400">67%</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-orange-500 h-2 rounded-full" style="width: 67%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">MEM_USAGE:</span> <span class="font-bold text-yellow-500 dark:text-yellow-400">45% (8GB/16GB)</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">DISK_IO:</span> <span class="font-bold text-purple-500 dark:text-purple-400">120MB/s</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-purple-500 h-2 rounded-full" style="width: 70%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">NETWORK_LATENCY:</span> <span class="font-bold text-green-500 dark:text-green-400">18ms</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-green-500 h-2 rounded-full" style="width: 90%;"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- Recent Activity / Command Log -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">COMMAND_LOG://</h2>
        <div class="bg-gray-900 dark:bg-black text-gray-100 p-4 rounded-lg overflow-y-auto h-64 text-sm relative">
          <span class="absolute top-2 left-2 text-green-400 text-xs">>$ _</span>
          <pre class="whitespace-pre-wrap mt-4">
            <span class="text-gray-400">[0x1A2B]</span> <span class="text-green-400">SUCCESS</span>: Initializing core modules...
            <span class="text-gray-400">[0x3C4D]</span> <span class="text-yellow-400">WARN</span>: Data integrity check running, 0.5% errors detected.
            <span class="text-gray-400">[0x5E6F]</span> <span class="text-green-400">SUCCESS</span>: System update applied. Reboot required.
            <span class="text-gray-400">[0x7081]</span> <span class="text-red-400">ERROR</span>: Service 'AuthModule' failed to start on port 8080. Port in use.
            <span class="text-gray-400">[0x92A3]</span> <span class="text-green-400">SUCCESS</span>: User 'admin' logged in from 192.168.1.100.
            <span class="text-gray-400">[0xB4C5]</span> <span class="text-yellow-400">WARN</span>: High network traffic detected from external source. Blocked.
            <span class="text-gray-400">[0xD6E7]</span> <span class="text-green-400">SUCCESS</span>: Database backup initiated. Progress: 75%.
            <span class="text-gray-400">[0xF8G9]</span> <span class="text-blue-400">INFO</span>: Sensor array 'Alpha' reporting normal parameters.
            <span class="text-gray-400">[0x10H1]</span> <span class="text-red-400">ERROR</span>: Critical temperature detected in 'ServerRack-3'. Initiating shutdown.
            <span class="text-gray-400">[0x22I3]</span> <span class="text-green-400">SUCCESS</span>: Log rotation completed successfully.
            <span class="text-gray-400">[0x44J5]</span> <span class="text-yellow-400">WARN</span>: Disk space low on '/dev/sda1'. 10GB remaining.
            <span class="text-gray-400">[0x66K7]</span> <span class="text-green-400">SUCCESS</span>: Scheduled task 'DataPurge' executed.
          </pre>
        </div>
      </section>

    </div>

    <!-- Right Column (Components & Controls) -->
    <div class="space-y-6">

      <!-- Active Components Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">ACTIVE_COMPONENTS://</h2>
        <ul class="space-y-3">
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>NETWORK_MONITOR_v2.1</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1024</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>DATABASE_ENGINE_SQL_9</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1025</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-yellow-500 dark:text-yellow-400">&#x2714;</span>
            <span>SECURE_SHELL_DAEMON_SSH</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1026</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-red-500 dark:text-red-400">&#x2716;</span>
            <span>PAYMENT_GATEWAY_API_PHP</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: <span class="text-red-500 dark:text-red-400">STOPPED</span></span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>LOG_AGGREGATOR_v1.5</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1028</span>
          </li>
        </ul>
        <button class="mt-4 w-full p-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">VIEW ALL PROCESSES</button>
      </section>

      <!-- Quick Actions Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">QUICK_ACTIONS://</h2>
        <div class="grid grid-cols-2 gap-3">
          <button class="p-3 bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.102a2 2 0 03.487 1.343L9.5 10l-1.5 5.25a1 1 0 00.324 1.013l.836.671L10 18h2v-2.102a2 2 0 00-.487-1.343L8.5 10l1.5-5.25a1 1 0 00-.324-1.013l-.836-.671L10 2H8z" clip-rule="evenodd"></path></svg>
            REBOOT_SYSTEM
          </button>
          <button class="p-3 bg-red-100 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></svg>
            HALT_SERVICE
          </button>
          <button class="p-3 bg-green-100 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-200 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" 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 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
            ADD_NEW_TASK
          </button>
          <button class="p-3 bg-yellow-100 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
            EDIT_CONFIG
          </button>
        </div>
      </section>

      <!-- System Performance Chart Placeholder -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">PERFORMANCE_TREND://</h2>
        <div class="bg-gray-200 dark:bg-gray-700 h-48 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400 text-sm">
          [GRAPH_PLACEHOLDER: Data Visualization Here]
          <img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Placeholder chart">
        </div>
      </section>

    </div>

  </div>

  <!-- Footer -->
  <footer class="text-center mt-8 text-gray-500 dark:text-gray-400 text-xs">
    SYSTEM_DASHBOARD_v1.0 &copy; 2023 // All rights reserved. &gt;_
  </footer>

</div>

Caratteristiche di gioco in evidenza

Una funzione di gioco reattiva evidenzia il componente con un design pulito e minimalista che enfatizza la tipografia e un sistema a griglia, utilizzando neutri caldi e supportando la modalità oscura. Presenta un'immagine di grandi dimensioni, un titolo, una descrizione e un pulsante di azione.

Aperto Anteprima

                <div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12 items-center">

    <!-- Main Feature Card -->
    <div class="md:col-span-1 lg:col-span-2 bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
      <img src="https://picsum.photos/1200/600?random=1" alt="Epic Game Scene" class="w-full h-60 sm:h-80 md:h-96 object-cover object-center" loading="lazy">
      <div class="p-6 sm:p-8 lg:p-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight tracking-tight mb-4 text-stone-900 dark:text-stone-50">
          Immersive Worlds. Unforgettable Adventures.
        </h2>
        <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 lg:mb-8 leading-relaxed">
          Dive into breathtaking landscapes, embark on perilous quests, and redefine your gaming experience with unparalleled graphics and captivating storylines.
        </p>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-semibold rounded-md shadow-sm text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition duration-200 ease-in-out dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-400 dark:focus:ring-offset-stone-900">
          Explore Games
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

    <!-- Side Feature Cards Wrapper -->
    <div class="md:col-span-1 lg:col-span-1 flex flex-col gap-6 md:gap-8">

      <!-- Smaller Feature Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img src="https://picsum.photos/600/300?random=2" alt="Multiplayer" class="w-full h-36 object-cover object-center" loading="lazy">
        <div class="p-5">
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50">
            Connect Global Gamers
          </h3>
          <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-snug">
            Join millions worldwide in competitive and cooperative play. Build alliances, conquer rivals.
          </p>
        </div>
      </div>

      <!-- Smaller Feature Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img src="https://picsum.photos/600/300?random=3" alt="Exclusive Content" class="w-full h-36 object-cover object-center" loading="lazy">
        <div class="p-5">
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50">
            Exclusive Content Unlocked
          </h3>
          <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-snug">
            Access unique in-game items, early betas, and member-only events. Enhance your journey.
          </p>
        </div>
      </div>

    </div>

  </div>
</div>

Skeuomorphic_Analogous_Simple_Business_Component

Un semplice componente aziendale progettato con uno stile scheumorfico utilizzando colori analoghi, reattivo per desktop, tablet e dispositivi mobili, con supporto per la modalità scura.

Aperto Anteprima

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-900 dark:to-zinc-800 font-sans">
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-amber-200 to-orange-300 dark:from-zinc-700 dark:to-stone-700 p-6 rounded-3xl shadow-xl dark:shadow-2xl-dark transform transition-transform duration-300 hover:scale-[1.01] border-t border-l border-white/50 dark:border-stone-600/50 border-r border-b border-orange-400/50 dark:border-zinc-800/50 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-radial from-transparent via-transparent to-amber-200/30 dark:to-zinc-700/30 pointer-events-none rounded-3xl"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-orange-400/20 dark:bg-zinc-600/20 rounded-full blur-xl pointer-events-none"></div>
    <div class="absolute -top-10 -left-10 w-40 h-40 bg-orange-300/20 dark:bg-zinc-500/20 rounded-full blur-xl pointer-events-none"></div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-orange-800 dark:text-zinc-200 mb-4 tracking-tight drop-shadow-md dark:drop-shadow-sm-dark">
        <span class="block">Our Business Solutions</span>
        <span class="text-orange-600 dark:text-zinc-400">for Your Success</span>
      </h2>
      <p class="text-base sm:text-lg text-orange-700 dark:text-zinc-300 mb-8 max-w-2xl leading-relaxed">
        We combine innovative strategies with a deep understanding of your needs to deliver unparalleled results.
        Experience the difference of a partnership built on trust and excellence.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">

        <div class="p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
          <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
          <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L12 20.25M12 20.25L14.25 17M12 20.25V4M5.75 12H18.25"></path></svg>

          <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Strategic Vision</h3>
          <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
            We help you define clear, actionable strategies to navigate the future and achieve long-term growth.
          </p>
        </div>

        <div class="p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
            <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
            <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 10.5h19.5m-19.5 0a2.25 2.25 0 01-2.25-2.25V6.75M21.75 10.5a2.25 2.25 0 002.25-2.25V6.75m0 0a2.25 2.25 0 00-2.25-2.25H2.25A2.25 2.25 0 000 6.75v10.5a2.25 2.25 0 002.25 2.25h19.5a2.25 2.25 0 002.25-2.25V10.5m-19.5 0a2.25 2.25 0 00-2.25 2.25V17.25m4.5-6.75a.75.75 0 01.75-.75h.008v.008h-.008a.75.75 0 01-.75-.75V10.5zM12 17.25h.008v.008H12V17.25z"></path></svg>

            <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Innovative Solutions</h3>
            <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
              We craft custom, cutting-edge solutions tailored to overcome your unique business challenges.
            </p>
        </div>

        <div class="md:col-span-2 p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
            <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
            <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0zM12 10.5a.75.75 0 00-.75.75v3.75a.75.75 0 00.75.75h.008v.008h-.008v-.008z"></path></svg>

            <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Guaranteed Results</h3>
            <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
              Our commitment to excellence translates into measurable outcomes, ensuring your investment yields significant returns.
            </p>
        </div>

      </div>

      <a href="#" class="mt-10 px-8 py-3 bg-orange-500 dark:bg-stone-500 text-white dark:text-zinc-100 font-semibold rounded-full shadow-lg hover:shadow-xl dark:hover:shadow-2xl-dark transform transition-transform duration-300 hover:scale-105 active:scale-95 text-lg
        border-t border-l border-orange-200 dark:border-stone-400
        border-r border-b border-orange-600 dark:border-zinc-600
        relative overflow-hidden group">
        <span class="relative z-10">Learn More</span>
        <span class="absolute inset-0 bg-orange-600/20 dark:bg-zinc-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></span>
      </a>
    </div>
  </div>

  <style>
    .shadow-2xl-dark {
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    .drop-shadow-sm-dark {
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.7));
    }
    .drop-shadow-xs-dark {
      filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.6));
    }
    .bg-dots {
      background-image: radial-gradient(circle, #fcd34d 1px, transparent 1px);
      background-size: 8px 8px;
      background-position: 0 0;
    }
    .dark .bg-dots {
      background-image: radial-gradient(circle, #71717a 1px, transparent 1px);
    }
    .bg-gradient-radial {
        background-image: radial-gradient(circle at center, var(--tw-gradient-stops));
    }
  </style>
</div>

Componente governativo monocromatico ispirato alla carta/stampa

Un componente di media complessità che imita la carta fisica e i materiali di stampa, progettato per siti Web governativi/di servizio pubblico con una combinazione di colori monocromatica e una reattività completa, incluso il supporto della modalità scura.

Aperto Anteprima

                <div class="font-sans bg-gray-100 text-gray-800 p-4 sm:p-6 md:p-8 dark:bg-gray-900 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-850 transition-colors duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
    <!-- Header Section (simulating a document header) -->
    <div class="bg-gray-200 p-4 border-b border-gray-300 dark:bg-gray-800 dark:border-gray-700 flex justify-between items-center">
      <h1 class="text-xl sm:text-2xl font-bold uppercase tracking-wide text-gray-700 dark:text-gray-300">Official Notice</h1>
      <span class="text-sm text-gray-600 dark:text-gray-400">Ref. ID: GVT-01-2023</span>
    </div>

    <!-- Document Body -->
    <div class="p-4 sm:p-6 md:p-8 space-y-6">
      <!-- Important Announcement/Title -->
      <div class="text-center">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 border-b-2 border-gray-400 pb-2 inline-block leading-tight">Public Service Announcement</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm italic">Issued: November 15, 2023</p>
      </div>

      <!-- Main Content Block 1 -->
      <section class="space-y-4">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-300 flex items-center">
          <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400" 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 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          Key Information
        </h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          This is an urgent public service announcement regarding changes to <strong class="font-bold">local community guidelines for waste management</strong>. Effective immediately, residents are advised to adhere to the revised sorting procedures to ensure efficient recycling and reduce landfill impact.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-1 ml-4">
          <li>Separate plastics and glass from general waste.</li>
          <li>Compost organic materials where facilities are available.</li>
          <li>Dispose of hazardous waste at designated collection points only.</li>
        </ul>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed italic text-sm">Your cooperation is vital for the sustainability of our community.</p>
      </section>

      <!-- Interactive Section (e.g., links to resources/forms) -->
      <section class="bg-gray-50 dark:bg-gray-800 p-4 rounded-md border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
          <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2a1 1 0 100-2h-2z"/><path d="M10 7a1 1 0 110-2 1 1 0 010 2zm.707 1a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 14.414V17a1 1 0 102 0v-2.586l3.586 3.586a1 1 0 001.414-1.414l-7-7zM2 10a1 1 0 011-1h2a1 1 0 010 2H3a1 1 0 01-1-1zm15-1h-2a1 1 0 100 2h2a1 1 0 100-2zm-7 4a1 1 0 110-2 1 1 0 010 2zm.707 1a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 18.586V20a1 1 0 102 0v-1.414l3.586 3.586a1 1 0 001.414-1.414l-7-7z"/><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h1a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zM3 8a1 1 0 011-1h12a1 1 0 011 1v5a1 1 0 01-1 1H4a1 1 0 01-1-1V8z" clip-rule="evenodd"></path></svg>
          Further Resources
        </h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-3 rounded-md text-center text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-300 dark:border-gray-600">
            <p>Download Full Guidelines <span aria-hidden="true">&rarr;</span></p>
          </a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-3 rounded-md text-center text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-300 dark:border-gray-600">
            <p>Locate Your Nearest Recycling Center <span aria-hidden="true">&rarr;</span></p>
          </a>
        </div>
      </section>

      <!-- Contact Information / Signature Block -->
      <footer class="text-right text-sm text-gray-600 dark:text-gray-400 pt-4 border-t border-gray-200 dark:border-gray-700">
        <p>Sincerely,</p>
        <p class="font-semibold mt-1">Department of Public Wellness</p>
        <p>City Hall, 123 Main St, Anytown, State 12345</p>
        <p>Contact: <a href="mailto:[email protected]" class="text-gray-700 dark:text-gray-300 underline hover:text-gray-500 dark:hover:text-gray-500 transition-colors">[email protected]</a></p>
      </footer>
    </div>
  </div>
</div>

Corporate_Portfolio_Showcase_Simple

Un componente semplice, pulito e affidabile per la presentazione del portfolio progettato per ambienti aziendali professionali, che utilizza una combinazione di colori triadica e supporta la modalità scura.

Aperto Anteprima

                <section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
  <div class="container mx-auto px-4 max-w-6xl">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-white mb-4">
        Our Latest Innovations
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto">
        Discover the impactful projects we've delivered, showcasing our expertise and commitment to excellence.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Project Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1015/600/400" alt="Project Image 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Enterprise Solution X
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            A robust cloud-based platform designed to streamline operations for large enterprises.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1018/600/400" alt="Project Image 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Dynamic Data Dashboard
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            An intuitive analytics dashboard providing real-time insights for decision-makers.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white font-medium rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1020/600/400" alt="Project Image 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            AI-Powered Customer Support
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            An intelligent chatbot and knowledge base for enhanced customer experiences.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-fuchsia-600 text-white font-medium rounded-md hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Componente funzionale per l'assistenza sanitaria

Un componente reattivo e tematico per applicazioni sanitarie, caratterizzato da design industriale, colori tenui e supporto per la modalità scura. Visualizza i dati del paziente/sensore con azioni rapide.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden flex items-start justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden md:flex md:space-x-6 p-4 sm:p-6">
    
    <!-- Left Panel: Profile/Main Info -->
    <div class="flex-shrink-0 w-full md:w-1/3 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700 pb-4 md:pb-0 md:pr-6 mb-4 md:mb-0">
      <div class="flex items-center space-x-4 mb-6">
        <img class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/86.jpg" alt="Patient Avatar">
        <div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">Patient ID: #HM-7890</p>
        </div>
      </div>
      
      <div class="space-y-3">
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          <span>DOB: 1975-04-12</span>
        </div>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" 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.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Location: Ward 3, Room 101</span>
        </div>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" 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 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.25m11.28-2.684a1 1 0 00-.948-.684H16a2 2 0 00-2 2v10a2 2 0 002 2h2.28a1 1 0 00.948-.684L22 10.75m-9.28 9.25l-.948 2.36a1 1 0 00.948 1.36h3.28c.188 0 .337-.156.242-.317l-1.442-2.894M5 10.75h2m-2 2h2"></path></svg>
          <span>Assigned Doctor: Dr. Elizabeth Grey</span>
        </div>
      </div>
      
      <button class="mt-6 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md text-sm transition duration-150 ease-in-out
                     focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">
        View Full Record
      </button>
    </div>

    <!-- Right Panel: Data and Actions -->
    <div class="flex-1">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <!-- Sensor Data Card 1 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Heart Rate</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">72 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">bpm</span></p>
          <p class="text-xs text-green-600 dark:text-green-400">Stable</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 5 min</span>
        </div>

        <!-- Sensor Data Card 2 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Blood Pressure</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">120/80 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">mmHg</span></p>
          <p class="text-xs text-green-600 dark:text-green-400">Normal</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 1 hr</span>
        </div>

        <!-- Sensor Data Card 3 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Temperature</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">98.6 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">°F</span></p>
          <p class="text-xs text-orange-600 dark:text-orange-400">Steady</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 30 min</span>
        </div>

        <!-- Sensor Data Card 4 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Oxygen Saturation</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">97% <span class="text-lg font-normal text-gray-600 dark:text-gray-300">SpO2</span></p>
          <p class="text-xs text-red-600 dark:text-red-400">Slight dip</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 10 min</span>
        </div>
      </div>

      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">Quick Actions</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <button class="flex flex-col items-center justify-center p-3 sm:p-4 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-500">
          <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2m-2 0V3m2 2V3m-1 4h.01M16 11l-3-3m0 0l-3 3m3-3v8m0-13h2c.792 0 1.543.344 2.05 1.096L20.2 6.75a1.802 1.802 0 010 2.5L14 15.5m0-10.75v10m-3-10l-2 2-2-2

Scheda di inserzione di proprietà immobiliari

Una complessa scheda di inserzione di proprietà immobiliari ispirata alla carta/stampa con toni blu aziendali, progettata per le piattaforme di annunci immobiliari. È dotato di layout reattivo, supporto per la modalità oscura e molteplici dettagli su una proprietà.

Aperto Anteprima

                <div class="font-sans antialiased bg-blue-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="max-w-6xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:flex flex-col xl:flex-row relative z-10 animate-fade-in-up">
    
    <!-- Paper Texture Overlay (Non-interactive, for aesthetic) -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-20 dark:opacity-10 pointer-events-none z-0"></div>

    <!-- Property Image Section -->
    <div class="md:flex-shrink-0 md:w-1/2 xl:w-2/5 p-4 sm:p-5 md:p-6 lg:p-8 relative flex items-center justify-center z-10">
      <div class="relative w-full h-64 sm:h-72 md:h-80 xl:h-full max-h-[600px] rounded-lg overflow-hidden shadow-lg border border-blue-100 dark:border-blue-900">
        <img src="https://picsum.photos/id/1050/800/600" alt="Luxury Modern Home Exterior" class="w-full h-full object-cover object-center transform transition-transform duration-500 hover:scale-105">
        <div class="absolute top-4 left-4 bg-blue-600 text-white text-xs sm:text-sm px-3 py-1 rounded-full font-semibold shadow-md">FOR SALE</div>
        <div class="absolute bottom-4 right-4 bg-white/90 dark:bg-gray-700/90 text-blue-800 dark:text-blue-200 text-sm sm:text-base px-3 py-1 rounded-full font-bold shadow-md ring-1 ring-blue-200 dark:ring-blue-700">$1,250,000</div>
        <button class="absolute top-4 right-4 bg-white/90 dark:bg-gray-700/90 text-blue-600 dark:text-blue-400 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </button>
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white text-sm flex justify-between">
          <span>Photos (18)</span>
          <span>Video Tour</span>
        </div>
      </div>
    </div>

    <!-- Property Details Section -->
    <div class="p-4 sm:p-5 md:p-6 lg:p-8 md:flex-grow xl:w-3/5 flex flex-col justify-between z-10">
      <div>
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-blue-900 dark:text-blue-100 mb-2 leading-tight">
          <a href="#" class="hover:underline">Elegant Family Residence</a>
        </h2>
        <p class="text-blue-700 dark:text-blue-300 text-base sm:text-lg mb-4 flex items-center">
          <svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
          123 Harmony Lane, Metropolis City, NY
        </p>
        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
          Discover the perfect blend of luxury and comfort in this stunning new-build home. Boasting an open-concept design, premium finishes, and a sprawling backyard, it's an entertainer's dream. Located in a top-rated school district with easy access to urban amenities.
        </p>

        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6 text-blue-800 dark:text-blue-200">
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.805a1 1 0 01-1.395 0c-.604-.621-1.258-1.28-1.944-1.895A10.027 10.027 0 0110 15c-1.574 0-3.1-.383-4.402-1.155-.686.615-1.339 1.274-1.943 1.895a1 1 0 01-1.395 0 1 1 0 010-1.395c.966-.996 2.015-2.046 3.146-3.047A7.004 7 0 003 10a7 7 0 0014 0 7.004 7 0 00-3.602-5.442c-1.13.996-2.18 2.046-3.146 3.047a1 1 0 010 1.395z"></path></svg>
            5 Beds
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V8a2 2 0 00-2-2h-3V5a1 1 0 00-1-1H8zm1 3H8v1h4V7h-1v1zM6 9v1h8V9H6zm0 2h8v1H6zm0 2h8v1H6zm0 2h8v1H6z" clip-rule="evenodd"></path></svg>
            3 Baths
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8.4l2 3a1 1 0 010 1.2l-2 3a1 1 0 01-.8.4H6a3 3 0 01-3-3V6zm4-1a1 1 0 00-1 1v4a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H7z" clip-rule="evenodd"></path></svg>
            3,200 sqft
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" 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 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
            Built 2022
          </div>
        </div>

        <!-- Additional Details Tabs/Sections -->
        <div class="border-t border-b border-blue-100 dark:border-blue-700 py-4 mb-6">
          <div class="flex space-x-4 overflow-x-auto pb-2 scrollbar-hide">
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100 shadow hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors duration-200">Overview</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Features</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Neighborhood</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Mortgage</button>
          </div>
        </div>

        <div class="text-gray-700 dark:text-gray-300 text-sm mb-6 flex flex-wrap gap-2 sm:gap-4">
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Central Air</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Hardwood Floors</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Two-Car Garage</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Smart Home Tech</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Spacious Yard</span>
        </div>

      </div>

      <!-- Agent Contact & Action Buttons -->
      <div class="flex flex-col sm:flex-row sm:items-center justify-between pt-4 border-t border-blue-100 dark:border-blue-700 mt-auto">
        <div class="flex items-center mb-4 sm:mb-0">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-400 dark:border-blue-600 shadow-md">
          <div>
            <p class="text-gray-800 dark:text-blue-100 font-semibold text-sm sm:text-base">John Doe</p>
            <p class="text-blue-600 dark:text-blue-300 text-xs sm:text-sm">Leading Agent</p>
          </div>
        </div>
        <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
          <button class="flex-grow sm:flex-grow-0 px-5 py-2.5 rounded-full bg-blue-700 text-white font-semibold text-sm sm:text-base hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 shadow-lg transform active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
            Call Agent
          </button>
          <button class="flex-grow sm:flex-grow-0 px-5 py-2.5 rounded-full border border-blue-700 dark:border-blue-500 text-blue-700 dark:text-blue-400 font-semibold text-sm sm:text-base hover:bg-blue-50 dark:hover:bg-blue-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
            Email Agent
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom scrollbar for better aesthetics, especially in dark mode */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  /* Animation for the card */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
  }
</style>

Componente di documentazione Art Deco Purple

Un componente di documentazione/wiki di moderata complessità con un tema di design Art Deco, con motivi geometrici e uno stile lussuoso che utilizza uno spettro di colori viola/viola. Completamente reattivo con supporto per la modalità oscura.

Aperto Anteprima

                <div class="font-sans bg-gradient-to-br from-purple-100 to-indigo-100 min-h-screen p-4 dark:from-gray-900 dark:to-black md:p-8">

  <!-- Component Wrapper -->
  <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden dark:bg-zinc-800 transform transition-all duration-500 hover:scale-[1.005] hover:shadow-3xl border-t-4 border-l-4 border-purple-600 dark:border-purple-800">

    <!-- Header Section -->
    <div class="relative p-6 md:p-10 bg-purple-800 text-white dark:bg-purple-950 overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-700 before:to-fuchsia-600 before:opacity-30 dark:before:from-purple-900 dark:before:to-fuchsia-900 before:blur-sm">
      <div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-white drop-shadow-lg font-serif mb-4 md:mb-0">
          <span class="block">Documentation</span>
          <span class="block text-purple-200 text-2xl md:text-3xl lg:text-4xl mt-2 font-light">Art Deco Archives</span>
        </h1>
        <div class="flex space-x-4">
          <button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            New Page
          </button>
          <button class="px-6 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2400/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
            Search
          </button>
        </div>
      </div>
      
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat bg-center opacity-10" style="background-image: url('data:image/svg+xml

Carta di prenotazione cartacea/stampata

Un componente semplice e reattivo per la scheda di prenotazione/prenotazione con un design ispirato alla carta/stampa e una combinazione di colori color terra, con supporto per la modalità scura. Adatto per visualizzare gli slot degli appuntamenti o i dettagli della prenotazione.

Aperto Anteprima

                <div class="p-4 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">

  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 md:max-w-md lg:max-w-lg border border-stone-200 dark:border-stone-700 hover:shadow-lg dark:hover:shadow-stone-700/50">
    
    <!-- Paper-like Header -->
    <div class="relative bg-gradient-to-r from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-700/80 p-4 border-b-2 border-stone-300 dark:border-stone-700/80 text-stone-800 dark:text-stone-100 print:text-black">
      <div class="absolute inset-0 bg-paper-texture opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h3 class="text-xl font-serif tracking-wide">Appointment Slot</h3>
      <p class="text-sm text-stone-600 dark:text-stone-300 italic">Book your session now</p>
    </div>

    <!-- Content Area resembling printed text -->
    <div class="p-6 space-y-4 text-stone-700 dark:text-stone-300">
      
      <!-- Appointment Details -->
      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">Wednesday, October 26, 2024</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Available All Day</p>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">10:00 AM - 11:00 AM</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">1 hour session</p>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">Virtual Meeting (Zoom)</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Link will be sent after booking</p>
        </div>
      </div>

      <!-- Provider/Context Info (optional) -->
      <div class="pt-4 border-t border-dashed border-stone-300 dark:border-stone-600 flex items-center space-x-4">
        <img class="w-12 h-12 rounded-full object-cover border-2 border-stone-300 dark:border-stone-500" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Alice Johnson">
        <div>
          <p class="text-base font-semibold">With Dr. Alice Johnson</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Consultation Specialist</p>
        </div>
      </div>

    </div>

    <!-- Actions resembling perforation or torn paper edge -->
    <div class="p-6 flex justify-end bg-stone-50 dark:bg-stone-900 border-t border-stone-200 dark:border-stone-700">
      <button class="px-6 py-2 bg-emerald-700 text-white rounded-md hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800 transition-colors duration-200 shadow-sm text-sm font-medium tracking-wide dark:hover:bg-emerald-600">
        Book Now
      </button>
    </div>

  </div>
</div>

Controlli del lettore musicale Glassmorphic

Un componente di controllo del lettore musicale glassmorphic con toni seppia/marrone, con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura. È reattivo, supporta la modalità oscura ed è adatto per lo streaming musicale e le piattaforme audio.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-stone-900 dark:to-stone-700 font-sans">
  <div class="w-full max-w-md p-6 rounded-3xl backdrop-filter backdrop-blur-xl bg-white/20 dark:bg-stone-800/30 border border-t-white/30 border-l-white/30 border-b-white/10 border-r-white/10 dark:border-t-stone-700/30 dark:border-l-stone-700/30 dark:border-b-stone-900/40 dark:border-r-stone-900/40 shadow-xl overflow-hidden transition-all duration-300 ease-in-out sm:p-8">
    <div class="flex items-center space-x-4 mb-6">
      <img src="https://picsum.photos/seed/music_album/100/100" alt="Album Art" class="w-20 h-20 rounded-xl shadow-lg ring-2 ring-white/30 dark:ring-stone-600/50 object-cover">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-1 leading-tight sm:text-2xl">Lost in the Echoes</h3>
        <p class="text-sm text-stone-700 dark:text-stone-300 sm:text-base">The Echoes of Light</p>
      </div>
    </div>

    <div class="w-full bg-stone-300/50 dark:bg-stone-700/50 rounded-full h-2 mb-4 relative overflow-hidden">
      <div class="bg-amber-700 dark:bg-amber-500 h-full rounded-full" style="width: 65%;"></div>
      <div class="w-3 h-3 rounded-full bg-stone-900 dark:bg-stone-50 absolute top-1/2 -translate-y-1/2" style="left: 65%; transform: translateX(-50%) translateY(-50%);"></div>
    </div>
    <div class="flex justify-between text-xs text-stone-700 dark:text-stone-300 mb-6">
      <span>2:45</span>
      <span>-1:15</span>
    </div>

    <div class="flex items-center justify-around space-x-6 mb-6">
      <button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M20.25 12a.75.75 0 01-.75.75H6.31l5.47 5.47a.75.75 0 11-1.06 1.06l-6.75-6.75a.75.75 0 010-1.06l6.75-6.75a.75.75 0 111.06 1.06l-5.47 5.47H19.5a.75.75 0 01.75.75z" clip-rule="evenodd" />
        </svg>
      </button>

      <button class="flex items-center justify-center w-16 h-16 rounded-full backdrop-filter backdrop-blur-md bg-amber-600/70 dark:bg-amber-700 text-white shadow-lg transition-all duration-200 ease-in-out hover:scale-105 hover:bg-amber-700/80 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-stone-800/40">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
          <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0a.75.75 0 01.75-.75H16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75h-1.5a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
        </svg>
         <!-- Play icon (uncomment to show instead of pause) -->
        <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
          <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.38 2.724-1.638L18.897 12l-11.673 7.985c-1.196.812-2.724-.136-2.724-1.638V5.653z" clip-rule="evenodd" />
        </svg> -->
      </button>

      <button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="flex items-center justify-between mt-8 pt-4 border-t border-t-white/30 dark:border-t-stone-700/30">
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M18 5.25a2.25 2.25 0 00-2.25-2.25H13.5V6a.75.75 0 01-.75.75H10.5a.75.75 0 01-.75-.75V3H6.75A2.25 2.25 0 004.5 5.25v9.75A2.25 2.25 0 006.75 17.25h11.25A2.25 2.25 0 0020.25 15V5.25z" />
          <path fill-rule="evenodd" d="M5.841 20.352a.75.75 0 01.11.919l-1.396 2.41a.75.75 0 01-1.072.247 5.25 5.25 0 01-2.73-4.226c-.705-2.365 1.01-4.784 3.003-5.264a.75.75 0 01.378.143l1.395 2.41a.75.75 0 01-.069.813 2.998 2.998 0 00-1.029 2.012 2.998 2.998 0 002.585 2.934c.333.035.653.073.955.11z" clip-rule="evenodd" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M13.5 4.5a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM12 18.75h9v-1.5h-9v1.5zM12 13.5h9v-1.5h-9v1.5zM12 8.25h9V6.75h-9v1.5z" />
          <path d="M9 12a2.25 2.25 0 00-2.25 2.25V17.5L7.5 18H5.25A2.25 2.25 0 013 15.75v-1.5A2.25 2.25 0 015.25 12H9z" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path fill-rule="evenodd" d="M9.401 3.003L9.401 3.003c.88-1.523 2.65-1.926 4.172-1.045l1.474.851a9.966 9.966 0 013.255.474c1.196.356 2.052 1.517 1.906 2.709a1.597 1.597 0 00.26 1.056c.408.54.912 1.037 1.463 1.49l1.4.966c1.1.758 1.45 2.201.838 3.419C20.334 16.146 17.518 19 12 19c-3.149 0-5.91-.904-8.082-2.397-1.121-.795-1.874-2.234-1.637-3.666 4.792-.783 7.039-4.717 7.039-4.717z" clip-rule="evenodd" />
          <path d="M11.94 9.141a.75.75 0 10-1.39-.72l.432.842 1.39-.72-.432-.843z" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M19.006 3.705a.75.75 0 00-.512-1.113L4.625 1.25A4.5 4.5 0 002.25 5.5V16.5a3 3 0 003 3h.75v3.375c0 .621.504 1.125 1.125 1.125h2.25a.75.75 0 00.75-.75v-3.75H12a.75.75 0 00.75-.75V14.25h.375c2.213 0 4.309-.655 6.004-1.764a.75.75 0 00.186-.135l3.42-3.037a.75.75 0 00.112-.868V4.5a.75.75 0 00-.91-.795zM16.793 9.782l-3.674 3.261a1.5 1.5 0 01-.587.232l-.23.03A.75.75 0 0012 13.5H9.75V5.5c0-.103.003-.205.009-.306C9.916 4.965 10.12 4.5 10.5 4.5h3C4.625 1.25 15.375 1.25 18.04 2.802a.75.75 0 00.41-.013c.962-.438 2.407-.942 3.605-1.124A.75.75 0 0022.5 1.5h.023a.75.75 0 00.046-1.498 7.502 7.502 0 00-6.191 1.026v1.312c0 2.226-1.501 4.25-3.765 4.25h-.548A9.75 9.75 0 014.5 8.25V5.5c0-.853.64-1.564 1.47-.788l11.751 2.35L19.006 3.705z" />
        </svg>
      </button>
    </div>
  </div>
</div>