Cerca componenti

Categorie

Componenti Componenti funzionali

Componenti funzionali

Componenti che forniscono funzionalità specifiche del sito Web

Microinteractions_Triadic_Dashboard_Component

Un componente dashboard reattivo con combinazione di colori triadica, che incorpora microinterazioni per il coinvolgimento degli utenti. Dispone di elementi e controlli di visualizzazione dei dati, con supporto completo della modalità oscura.

Aperto Anteprima

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Header Section -->
  <div class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
    <div class="flex items-center space-x-4">
      <button class="flex items-center space-x-2 px-4 py-2 bg-purple-600 text-white rounded-lg shadow-lg hover:bg-purple-700 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
        <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        <span class="text-sm font-medium">Add Widget</span>
      </button>
      <button class="p-2 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 active:scale-95 transition-all duration-200 shadow-md focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50">
        <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
      </button>
      <img class="w-9 h-9 rounded-full border-2 border-yellow-500 transform hover:scale-105 active:scale-90 transition duration-200 cursor-pointer" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
    </div>
  </div>

  <!-- Main Grid Area -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-max">

    <!-- Metric Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Total Sales</h3>
        <svg class="w-6 h-6 text-purple-500 group-hover:text-purple-600 transition-colors duration-200" 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.001 0M6 7l3 9M18 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-9-9a2 2 0 100-4 2 2 0 000 4zm0 2a2 2 0 100 4 2 2 0 000-4zm0 4a2 2 0 100 4 2 2 0 000-4z"></path></svg>
      </div>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-purple-700 dark:group-hover:text-purple-400 transition-colors duration-200">$12,345</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">+5.2% from last month
        <span class="inline-block ml-1 text-green-500 group-hover:animate-bounce-faded">
          <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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
        </span>
      </p>
    </div>

    <!-- Metric Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">New Users</h3>
        <svg class="w-6 h-6 text-yellow-500 group-hover:text-yellow-600 transition-colors duration-200" 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.653-.134-1.282-.387-1.857M12 11a4 4 0 110-8 4 4 0 010 8zm0 1c1.332 0 2.502.593 3.327 1.488L15 15h2l-2 4h-1l-2 4h-2l-2 4H6l-2-4H3l-2-4h2l2-4h2l3-3.003L12 12z"></path></svg>
      </div>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-yellow-700 dark:group-hover:text-yellow-400 transition-colors duration-200">789</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week
        <span class="inline-block ml-1 text-green-500 group-hover:animate-bounce-faded">
           <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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
        </span>
      </p>
    </div>

    <!-- Metric Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Active Projects</h3>
        <svg class="w-6 h-6 text-green-500 group-hover:text-green-600 transition-colors duration-200" 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>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-green-700 dark:group-hover:text-green-400 transition-colors duration-200">23</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">All on track
        <span class="inline-block ml-1 text-blue-500 group-hover:animate-ping-once">
           <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </span>
      </p>
    </div>

    <!-- Activity Feed -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
      <ul class="space-y-4">
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-100">
          <img class="w-9 h-9 rounded-full border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-purple-600 dark:text-purple-400">Jane Doe</span> updated a project <span class="text-yellow-600 dark:text-yellow-400 font-medium hover:underline cursor-pointer">'Website Redesign'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
          <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-purple-600 dark:hover:text-purple-400 transitino-colors duration-200">
            <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-200">
          <img class="w-9 h-9 rounded-full border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-yellow-600 dark:text-yellow-400">John Smith</span> commented on task <span class="text-green-600 dark:text-green-400 font-medium hover:underline cursor-pointer">'Implement API'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
          </div>
           <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-yellow-600 dark:hover:text-yellow-400 transitino-colors duration-200">
            <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-300">
          <img class="w-9 h-9 rounded-full border-2 border-green-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-green-600 dark:text-green-400">Alice Green</span> completed task <span class="text-purple-600 dark:text-purple-400 font-medium hover:underline cursor-pointer">'Design mockups'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
          </div>
           <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-green-600 dark:hover:text-green-400 transitino-colors duration-200">
            <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
      </ul>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Quick Actions</h3>
      <div class="grid grid-cols-2 gap-4">
        <button class="flex flex-col items-center justify-center p-4 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:rotate-6 transition-transform duration-200" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
          <span class="text-sm font-medium">Generate Report</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:animate-wiggle" 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 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v11a2 2 0 002 2h10a2 2 0 002-2v-3"></path></svg>
          <span class="text-sm font-medium">New Document</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:animate-pulse-slow" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
          <span class="text-sm font-medium">Edit Profile</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:scale-110 transition-transform duration-200" 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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <span class="text-sm font-medium">Send Message</span>
        </button>
      </div>
    </div>

    <!-- Image Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform hover:scale-103 transition-all duration-300 relative group">
      <img class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" src="https://picsum.photos/600/400?random=1" alt="Placeholder Image">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Project Progress</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">Visual representation of current project milestones and achievements.</p>
      </div>
      <button class="absolute bottom-4 right-4 p-2 bg-purple-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-50">
        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
      </button>
    </div>

    <!-- Calendar/Schedule Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700 lg:col-span-2">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Upcoming Schedule</h3>
      <div class="space-y-4">
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>10<br><span class="text-xs font-normal">AM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Team Sync Meeting</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Project Alpha, Video Call</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <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 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>
          </button>
        </div>
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-yellow-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>02<br><span class="text-xs font-normal">PM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Client Review Session</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Client XYZ, Office Mtg Room</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-yellow-600 dark:hover:text-yellow-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <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 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 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          </button>
        </div>
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>04<br><span class="text-xs font-normal">PM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Code Review: Feature X</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Development Team</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <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 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>
          </button>
        </div>
      </div>
    </div>

  </div>

  <!-- Tailwind JIT custom animations (add to tailwind.config.js) -->
  <style>
    @keyframes bounce-faded {
      0%, 100% { transform: translateY(0); opacity: 1; }
      50% { transform: translateY(-5px); opacity: 0.8; }
    }
    .animate-bounce-faded {
      animation: bounce-faded 0.8s ease-in-out infinite;
    }

    @keyframes ping-once {
      75%, 100% { transform: scale(2); opacity: 0; }
    }
    .animate-ping-once {
      animation: ping-once 1s cubic-bezier(0, 0, 0.2, 1);
    }

    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(3deg); }
      50% { transform: rotate(-3deg); }
      75% { transform: rotate(2deg); }
    }
    .animate-wiggle {
      animation: wiggle 0.4s ease-in-out infinite;
    }

    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: .5; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes appear-from-left {
        0% { opacity: 0; transform: translateX(-20px); }
        100% { opacity: 1; transform: translateX(0); }
    }
    .animate-appear-from-left {
        animation: appear-from-left 0.5s ease-out forwards;
    }

    .animation-delay-100 { animation-delay: 0.1s; }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-300 { animation-delay: 0.3s; }
  </style>

</div>

Scheda Prodotto E-commerce con Microinterazioni

Una semplice scheda prodotto per l'e-commerce con combinazione di colori triadica ed elementi di microinterazione da aggiungere al carrello e gradire, con reattività e supporto per la modalità scura.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
    <div class="relative group">
      <img class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/300?random=1" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
        <button class="flex-1 bg-yellow-500 text-gray-900 py-2 rounded-md font-semibold text-sm opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-2 transition-all duration-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
          Quick View
        </button>
      </div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 truncate">Stylish Summer Dress</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Women's Apparel</p>
      <div class="flex items-center justify-between mt-3 mb-4">
        <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$49.99</span>
        <div class="flex space-x-2">
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 hover:bg-red-100 dark:hover:bg-red-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 group">
            <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          </button>
          <button class="p-2 rounded-full text-gray-400 hover:text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 group">
            <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 11h-4V7a1 1 0 00-2 0v4H7a1 1 0 000 2h4v4a1 1 0 002 0v-4h4a1 1 0 000-2z"/></svg>
          </button>
        </div>
      </div>
      <button class="w-full bg-blue-600 text-white py-2 rounded-md font-semibold text-sm transition-all duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transform hover:scale-105 active:scale-95">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Componenti funzionali Componente

Una scheda prodotto di e-commerce semplice e reattiva ispirata al 3D con una combinazione di colori analoga, che supporta la modalità scura.

Aperto Anteprima

                <div class="relative flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
  <div class="relative h-96 w-72 transform rounded-lg bg-gradient-to-br from-purple-400 to-indigo-500 p-6 shadow-2xl transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-indigo-800">
    <div class="absolute inset-0 -z-10 transform rounded-lg bg-gradient-to-br from-purple-300 to-indigo-400 opacity-50 blur-xl dark:from-purple-600 dark:to-indigo-700"></div>
    <div class="flex flex-col items-center justify-between h-full">
      <h2 class="mb-2 text-center text-2xl font-bold text-white">3D Product</h2>
      <div class="relative mb-4 h-32 w-32">
        <img src="https://picsum.photos/id/176/200/200" alt="Product Image" class="h-full w-full rounded-full object-cover shadow-lg transform transition-transform duration-300 hover:scale-110">
        <div class="absolute inset-0 rounded-full ring-4 ring-white ring-opacity-50 dark:ring-gray-800"></div>
      </div>
      <p class="mb-4 text-center text-sm text-white text-opacity-80">A high-quality product with a unique 3D design for an immersive experience.</p>
      <div class="flex items-center justify-between w-full">
        <span class="text-xl font-bold text-white">$99.99</span>
        <button class="rounded-full bg-white px-4 py-2 text-purple-600 shadow-md transition-all duration-300 hover:bg-purple-100 hover:text-purple-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

Dashboard dei componenti funzionali

Un componente del cruscotto reattivo progettato con i principi di Material Design e una combinazione di colori monocromatici. È dotato di layout basati su griglia, elementi interattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 1</h2>
            <img src="https://picsum.photos/200?random=1" alt="Image 1" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 1.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 2</h2>
            <img src="https://picsum.photos/200?random=2" alt="Image 2" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 2.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 3</h2>
            <img src="https://picsum.photos/200?random=3" alt="Image 3" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 3.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Profile</h2>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-20 h-20 rounded-full mb-2">
            <p class="text-gray-600 dark:text-gray-400">User Name</p>
            <p class="text-gray-500 dark:text-gray-500">User Email</p>
        </div>
    </div>
</div>

Componenti funzionali Componente

Componente funzionale della dashboard minimalista con design reattivo e supporto per temi scuri.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white p-4 sm:p-6 lg:p-8">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Total Users</h2>
                <p class="text-3xl font-bold">1500</p>
            </div>
            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Revenue</h2>
                <p class="text-3xl font-bold">$5000</p>
            </div>
            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Orders</h2>
                <p class="text-3xl font-bold">300</p>
            </div>
        </div>
    </div>
</div>

Componenti funzionali Componente

Componente del dashboard con componenti funzionali che utilizzano i principi di Material Design, una combinazione di colori analoga e una complessità moderata. Il componente include il design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript.

Aperto Anteprima

                <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Functional Components Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Analogous Colors (example: blue-green, blue, blue-violet) */
    /* Using shades of Tailwind's built-in colors for simplicity */
    .bg-primary {
      background-color: #437c90; /* A blue-green */
    }
    .text-primary {
      color: #437c90;
    }
    .bg-secondary {
      background-color: #325a6c; /* A bluer tone */
    }
     .text-secondary {
      color: #325a6c;
    }
    .bg-tertiary {
      background-color: #5a6c8c; /* A blue-violet */
    }
     .text-tertiary {
      color: #5a6c8c;
    }

    /* Dark Mode Styles */
    .dark .bg-primary {
      background-color: #1e3a48;
    }
    .dark .text-primary {
      color: #1e3a48;
    }
     .dark .bg-secondary {
      background-color: #152c3a;
    }
     .dark .text-secondary {
      color: #152c3a;
    }
     .dark .bg-tertiary {
      background-color: #2c3a4e;
    }
     .dark .text-tertiary {
      color: #2c3a4e;
    }

    /* Material Design Shadows (using Tailwind's built-in shadows) */
    .shadow-material {
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .dark .shadow-material {
       box-shadow: 0 3px 1px -2px rgba(255, 255, 255, 0.2), 0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 1px 5px 0 rgba(255, 255, 255, 0.12);
    }

  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4">

  <div class="container mx-auto">

    <!-- Header -->
    <header class="flex justify-between items-center mb-8">
      <h1 class="text-2xl font-bold">Dashboard</h1>
      <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
        <!-- Dark mode toggle - functional implementation would require JS -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
      </button>
    </header>

    <!-- Functional Components Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Component 1: Stats Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-primary mb-2">Total Users</h2>
        <p class="text-3xl font-bold">1,234</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
      </div>

      <!-- Component 2: Recent Activity Feed -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-secondary mb-4">Recent Activity</h2>
        <ul>
          <li class="flex items-center mb-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Added new report</p>
            </div>
          </li>
           <li class="flex items-center mb-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Updated user profile</p>
            </div>
          </li>
           <li class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">Peter Jones</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Generated weekly summary</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Component 3: Quick Links -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-tertiary mb-4">Quick Links</h2>
        <div class="grid grid-cols-2 gap-4">
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Settings</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Reports</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Analytics</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Users</a>
        </div>
      </div>

      <!-- Component 4: Image Card (example) -->
       <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-primary mb-4">Data Visualization (Placeholder)</h2>
        <img src="https://picsum.photos/seed/dashboard/400/200" alt="Placeholder Image" class="rounded-md w-full">
      </div>

       <!-- Component 5: Another Stats Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-secondary mb-2">Revenue</h2>
        <p class="text-3xl font-bold">$56,789</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">-5% from last quarter</p>
      </div>

       <!-- Component 6: Text Block (example) -->
       <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-tertiary mb-4">Notes</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a placeholder for important notes or messages for the user.</p>
      </div>

    </div>

  </div>

  <!-- Basic Dark Mode Toggle Script (for demonstration, not a full implementation) -->
  <script>
    const toggleButton = document.querySelector('header button');
    const html = document.querySelector('html');

    toggleButton.addEventListener('click', () => {
      html.classList.toggle('dark');
    });
  </script>

</body>
</html>

Componenti funzionali Componente

Componente funzionale per E-commerce con design responsive e supporto a tema scuro.

Aperto Anteprima

                <div class="bg-gray-100 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Componenti funzionali Componente

Un componente minimalista del portfolio progettato con Tailwind CSS, caratterizzato da una combinazione di colori vivaci e che supporta la modalità oscura. Questo componente è destinato a mostrare lavori o prodotti e include immagini e segnaposto per avatar.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">My Portfolio</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 3.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 4</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 4.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 5</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 5.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-40 object-cover rounded-lg mb-2">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Project Title 6</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of project 6.</p>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">About Me</h2>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <p class="text-gray-600 dark:text-gray-400">Hello! I'm a passionate developer who loves to create. Check out my work above and connect with me for collaboration!</p>
        </div>
    </div>
</div>

Componente funzionale e-commerce

Componente di e-commerce minimalista dal design piatto con combinazione di colori triadica e supporto per la modalità oscura reattiva.

Aperto Anteprima

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our E-commerce Store</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$99.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/301/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">Find out more about this amazing product!</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$149.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/302/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Best Seller</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">This product is a customer favorite!</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$79.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white">Customer Reviews</h3>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="ml-4">
                <p class="text-gray-800 dark:text-white">John Doe</p>
                <p class="text-gray-600 dark:text-gray-300">"Excellent products! Fast shipping and great service. Highly recommend!"</p>
            </div>
        </div>
    </div>
</div>

Componenti funzionali Componente - Interfaccia utente in modalità scura

Un componente di social media reattivo progettato con modalità oscura e toni della terra, adatto per le interfacce di social networking. Presenta avatar utente, contenuti di pubblicazione e pulsanti di interazione.

Aperto Anteprima

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-3">
            <h2 class="text-lg font-semibold">John Doe</h2>
            <p class="text-gray-400">@john_doe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
    </div>
    <div class="flex justify-between text-gray-400">
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Like</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Comment</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Share</span>
        </button>
    </div>
</div>