An ecommerce da... - Tailwind AI

elreco
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex">
  <aside class="bg-gray-800 w-64 p-4 border-r border-gray-700 overflow-y-auto">
    <div class="mb-4">
      <h1 class="text-2xl font-bold text-center text-white">Dashboard</h1>
    </div>
    <nav>
      <ul>
        <li class="mb-4">
          <a href="#" class="flex items-center space-x-4 p-2 hover:bg-gray-700 rounded text-white">
            <i class="iconoir-home text-2xl"></i>
            <span>Home</span>
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center space-x-4 p-2 hover:bg-gray-700 rounded text-white">
            <i class="iconoir-user text-2xl"></i>
            <span>Profile</span>
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center space-x-4 p-2 hover:bg-gray-700 rounded text-white">
            <i class="iconoir-cart text-2xl"></i>
            <span>Orders</span>
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center space-x-4 p-2 hover:bg-gray-700 rounded text-white">
            <i class="iconoir-settings text-2xl"></i>
            <span>Settings</span>
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center space-x-4 p-2 hover:bg-gray-700 rounded text-white">
            <i class="iconoir-log-out text-2xl"></i>
            <span>Logout</span>
          </a>
        </li>
      </ul>
    </nav>
  </aside>

  <main class="flex-1 p-6">
    <header class="mb-6 flex justify-between items-center">
      <h2 class="text-3xl font-bold text-gray-800">Recent Orders</h2>
      <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-400">
        <i class="iconoir-plus text-xl"></i>
        <span class="ml-1">Add Order</span>
      </button>
    </header>
    <section class="bg-white shadow-lg rounded-lg p-6">
      <table class="min-w-full bg-white">
        <thead>
          <tr>
            <th class="py-2 px-4 border-b border-gray-200 text-left text-gray-600">Order ID</th>
            <th class="py-2 px-4 border-b border-gray-200 text-left text-gray-600">Customer</th>
            <th class="py-2 px-4 border-b border-gray-200 text-left text-gray-600">Date</th>
            <th class="py-2 px-4 border-b border-gray-200 text-left text-gray-600">Status</th>
            <th class="py-2 px-4 border-b border-gray-200 text-left text-gray-600">Total</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="py-2 px-4 border-b border-gray-200">#12345</td>
            <td class="py-2 px-4 border-b border-gray-200">John Doe</td>
            <td class="py-2 px-4 border-b border-gray-200">2023-10-01</td>
            <td class="py-2 px-4 border-b border-gray-200 text-green-500">Completed</td>
            <td class="py-2 px-4 border-b border-gray-200">$150.00</td>
          </tr>
          <tr>
            <td class="py-2 px-4 border-b border-gray-200">#12346</td>
            <td class="py-2 px-4 border-b border-gray-200">Jane Smith</td>
            <td class="py-2 px-4 border-b border-gray-200">2023-10-02</td>
            <td class="py-2 px-4 border-b border-gray-200 text-yellow-500">Pending</td>
            <td class="py-2 px-4 border-b border-gray-200">$200.00</td>
          </tr>
          <tr>
            <td class="py-2 px-4 border-b border-gray-200">#12347</td>
            <td class="py-2 px-4 border-b border-gray-200">Alice Johnson</td>
            <td class="py-2 px-4 border-b border-gray-200">2023-10-03</td>
            <td class="py-2 px-4 border-b border-gray-200 text-red-500">Cancelled</td>
            <td class="py-2 px-4 border-b border-gray-200">$50.00</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>
</body>
Add colors
