E-commerce Dashboard 구성 요소

<div class="min-h-screen bg-neutral-100 dark:bg-zinc-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1: Sales Overview -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-800 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Sales</h2>
      <p class="text-5xl font-black text-black dark:text-white mb-2">$12,345</p>
      <p class="text-lg text-black dark:text-white">+8% from last month</p>
    </div>

    <!-- Card 2: New Orders -->
    <div class="bg-lime-400 dark:bg-lime-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-100">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Orders</h2>
      <p class="text-5xl font-black text-black dark:text-white mb-2">2,100</p>
      <p class="text-lg text-black dark:text-white">+15% from last month</p>
    </div>

    <!-- Card 3: Top Product -->
    <div class="bg-yellow-300 dark:bg-yellow-600 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-200">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Top Product</h2>
      <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-20 h-20 object-cover border-2 border-black dark:border-white">
        <div>
          <p class="text-xl font-bold text-black dark:text-white">Radical Widget X</p>
          <p class="text-lg text-black dark:text-white">$79.99</p>
        </div>
      </div>
    </div>

    <!-- Card 4: Customer Satisfaction -->
    <div class="bg-blue-400 dark:bg-blue-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-300">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Satisfaction</h2>
      <p class="text-5xl font-black text-black dark:text-white">92%</p>
      <p class="text-lg text-black dark:text-white">Up from 88%</p>
    </div>

    <!-- Card 5: New Customers -->
    <div class="bg-red-400 dark:bg-red-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-400">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">New Customers</h2>
      <p class="text-5xl font-black text-black dark:text-white">350</p>
      <p class="text-lg text-black dark:text-white">Monthly acquisition</p>
    </div>

    <!-- Card 6: Recent Activity (simplified) -->
    <div class="bg-purple-400 dark:bg-purple-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-500">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Activity</h2>
      <ul class="space-y-3">
        <li class="flex items-center text-black dark:text-white">
          <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-black dark:border-white">
          <p class="text-lg">New order from John D.</p>
        </li>
        <li class="flex items-center text-black dark:text-white">
          <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-black dark:border-white">
          <p class="text-lg">Product restock alert</p>
        </li>
      </ul>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  .animation-delay-100 { animation-delay: 0.1s; }
  .animation-delay-200 { animation-delay: 0.2s; }
  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-400 { animation-delay: 0.4s; }
  .animation-delay-500 { animation-delay: 0.5s; }
</style>