suuply chain

hhh

This tailwind example is contributed by Ishimwe Shadad, on 07-Jun-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Ishimwe Shadad

Tailwind v3.4 319 1

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SupplyChain OS — Management System</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        celadon: {
          50:  "#eff6ef", 100: "#deeddf", 200: "#bddbbf",
          300: "#9cc99f", 400: "#7bb77f", 500: "#5ba45f",
          600: "#48844c", 700: "#366339", 800: "#244226",
          900: "#122113", 950: "#0d170d"
        }
      },
      fontFamily: {
        sans: ['Plus Jakarta Sans', 'sans-serif'],
        mono: ['DM Mono', 'monospace'],
      },
      boxShadow: {
        card: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
        'card-md': '0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05)',
        'card-lg': '0 8px 24px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06)',
      },
      keyframes: {
        fadeUp: { from: { opacity: 0, transform: 'translateY(10px)' }, to: { opacity: 1, transform: 'translateY(0)' } },
        shimmer: { '0%': { backgroundPosition: '-400px 0' }, '100%': { backgroundPosition: '400px 0' } },
        pulse3: { '0%,100%': { opacity: 1 }, '50%': { opacity: .35 } },
      },
      animation: {
        fadeUp: 'fadeUp .45s ease both',
        shimmer: 'shimmer 2.2s linear infinite',
        pulse3: 'pulse3 2.2s ease-in-out infinite',
      }
    }
  }
}
</script>
<style>
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { background: #f8faf8; font-family: 'Plus Jakarta Sans', sans-serif; color: #1a2e1b; }

/* ── Sidebar ── */
  #sidebar {
    width: 240px; flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #e8f0e8;
    display: flex; flex-direction: column;
    height: 100vh; position: sticky; top: 0;
    overflow-y: auto; transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  #sidebar-overlay { display: none; }

@media (max-width: 900px) {
    #sidebar {
      position: fixed; left: 0; top: 0; z-index: 200;
      transform: translateX(-100%);
      box-shadow: 4px 0 24px rgba(0,0,0,.12);
    }
    #sidebar.open { transform: translateX(0); }
    #sidebar-overlay.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 199; }
  }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
    color: #5a7a5c; cursor: pointer; transition: all .18s; margin: 1px 0;
    text-decoration: none;
  }
  .nav-item:hover { background: #eff6ef; color: #366339; }
  .nav-item.active { background: #eff6ef; color: #244226; font-weight: 600; }
  .nav-item.active .nav-dot { background: #48844c; }
  .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex-shrink: 0; transition: background .18s; }

/* ── Cards ── */
  .card { background: #fff; border-radius: 12px; border: 1px solid #e8f0e8; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
  .card-hover { transition: box-shadow .2s, border-color .2s; }
  .card-hover:hover { box-shadow: 0 4px 16px rgba(36,66,38,.1); border-color: #bddbbf; }

/* ── Badges ── */
  .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; }
  .badge-green  { background: #eff6ef; color: #366339; }
  .badge-teal   { background: #deeddf; color: #244226; }
  .badge-amber  { background: #fef3c7; color: #92400e; }
  .badge-red    { background: #fee2e2; color: #991b1b; }
  .badge-gray   { background: #f1f5f1; color: #6b7280; }
  .badge-blue   { background: #eff6ff; color: #1e40af; }

/* ── Progress ── */
  .pbar { height: 6px; background: #e8f0e8; border-radius: 99px; overflow: hidden; }
  .pfill { height: 100%; border-radius: 99px; transition: width .6s ease; }

/* ── Table ── */
  .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  .tbl th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7aa67c; background: #f8faf8; border-bottom: 1px solid #e8f0e8; white-space: nowrap; }
  .tbl td { padding: 12px 16px; border-bottom: 1px solid #f0f5f0; color: #2d4a2e; vertical-align: middle; white-space: nowrap; }
  .tbl tr:last-child td { border-bottom: none; }
  .tbl tbody tr { transition: background .15s; }
  .tbl tbody tr:hover { background: #f8faf8; }

/* ── Shimmer skeleton ── */
  .skel { background: linear-gradient(90deg, #e8f0e8 25%, #d4e8d4 50%, #e8f0e8 75%); background-size: 400px 100%; animation: shimmer 1.8s linear infinite; border-radius: 6px; }

/* ── Stat KPI ── */
  .kpi-up   { color: #48844c; }
  .kpi-down { color: #dc2626; }

/* ── Chart bars ── */
  .bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
  .bar { flex: 1; border-radius: 4px 4px 0 0; transition: opacity .2s; }
  .bar:hover { opacity: .75; }

/* ── Scrollbar ── */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #c8dcc8; border-radius: 4px; }

/* ── Animations ── */
  .d1 { animation-delay: .07s } .d2 { animation-delay: .14s }
  .d3 { animation-delay: .21s } .d4 { animation-delay: .28s }
  .d5 { animation-delay: .35s } .d6 { animation-delay: .42s }

/* ── Responsive table wrapper ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Topbar search ── */
  .search-input { background: #f8faf8; border: 1px solid #e0ebe0; border-radius: 8px; padding: 7px 12px 7px 34px; font-size: 13px; color: #2d4a2e; outline: none; width: 200px; transition: border-color .18s, width .25s; }
  .search-input:focus { border-color: #7bb77f; width: 240px; background: #fff; }
  .search-input::placeholder { color: #a8c5a8; }
</style>
</head>
<body>

<div id="sidebar-overlay" onclick="closeSidebar()"></div>

<aside id="sidebar">
    
    <div style="padding: 20px 16px 16px;">
      <div style="display:flex; align-items:center; gap:10px;">
        <div style="width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#48844c,#5ba45f);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(72,132,76,.35);">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5.5L9 3l6 2.5v7L9 15l-6-2.5v-7z" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/><path d="M9 3v12M3 5.5l6 3.5 6-3.5" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/></svg>
        </div>
        <div>
          <div style="font-size:15px;font-weight:800;color:#1a2e1b;letter-spacing:-.3px;">SupplyChain OS</div>
          <div style="font-size:10px;font-family:'DM Mono',monospace;color:#9cc99f;margin-top:1px;">v2.4 · Enterprise</div>
        </div>
      </div>
    </div>

<div style="height:1px;background:#f0f5f0;margin:0 16px 12px;"></div>

<nav style="padding: 0 8px; flex:1;">
      <div style="font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b8d4b9;padding:4px 12px 8px;">Overview</div>
      <div class="nav-item active" onclick="setTab('dashboard',this)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1.5" y="1.5" width="5" height="5" rx="1.2" stroke="currentColor" stroke-width="1.5"/><rect x="9.5" y="1.5" width="5" height="5" rx="1.2" stroke="currentColor" stroke-width="1.5"/><rect x="1.5" y="9.5" width="5" height="5" rx="1.2" stroke="currentColor" stroke-width="1.5"/><rect x="9.5" y="9.5" width="5" height="5" rx="1.2" stroke="currentColor" stroke-width="1.5"/></svg>Dashboard<div class="nav-dot" style="margin-left:auto;"></div></div>
      <div class="nav-item" onclick="setTab('analytics',this)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 13l3.5-5 3 3 3-6 3 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Analytics<div class="nav-dot" style="margin-left:auto;"></div></div>

<div style="font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b8d4b9;padding:14px 12px 8px;">Operations</div>
      <div class="nav-item" onclick="setTab('orders',this)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2.5 4h11M2.5 8h11M2.5 12h7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>Orders</div>
      <div class="nav-item" onclick="setTab('inventory',this)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5L2 4.5v7L8 14.5l6-3v-7L8 1.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M2 4.5l6 3.5 6-3.5M8 8v6.5" stroke="currentColor" stroke-width="1.5"/></svg>Inventory</div>
      <div class="nav-item" onclick="setTab('shipments',this)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 6h9v6H1.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M10.5 8l3.5 1.5V12h-3.5V8z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="4" cy="12.5" r="1.2" stroke="currentColor" stroke-width="1.3"/><circle cx="12" cy="12.5" r="1.2" stroke="currentColor" stroke-width="1.3"/></svg>Shipments</div>

<div style="font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b8d4b9;padding:14px 12px 8px;">Resources</div>
      <div class="nav-item" onclick="setTab('suppliers',this)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5.5" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M2 14c0-3.31 2.69-5.5 6-5.5s6 2.19 6 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>Suppliers</div>
      <div class="nav-item" onclick="setTab('warehouses',this)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 8L8 2.5 14.5 8M3 7.5V14h10V7.5" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><rect x="6" y="10" width="4" height="4" rx=".8" stroke="currentColor" stroke-width="1.3"/></svg>Warehouses</div>
    </nav>

<div style="padding:12px 8px;border-top:1px solid #f0f5f0;margin-top:auto;">
      <div style="display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .18s;" onmouseover="this.style.background='#f8faf8'" onmouseout="this.style.background='transparent'">
        <div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#366339,#5ba45f);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;">JK</div>
        <div style="min-width:0;">
          <div style="font-size:13px;font-weight:600;color:#1a2e1b;">James Kim</div>
          <div style="font-size:11px;color:#9cc99f;font-family:'DM Mono',monospace;">Admin</div>
        </div>
        <svg style="margin-left:auto;color:#b8d4b9;flex-shrink:0;" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 5l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
      </div>
    </div>
  </aside>

<div style="flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;">

<header style="background:#fff;border-bottom:1px solid #e8f0e8;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:12px;">
      <div style="display:flex;align-items:center;gap:12px;">
        
        <button onclick="openSidebar()" style="display:none;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;color:#5a7a5c;" id="hamburger">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
        </button>
        <div>
          <h1 id="page-title" style="font-size:17px;font-weight:700;color:#1a2e1b;letter-spacing:-.3px;margin:0;">Dashboard</h1>
          <div id="page-sub" style="font-size:11px;color:#9cc99f;font-family:'DM Mono',monospace;margin-top:1px;">Q2 2025 · Last updated just now</div>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:10px;">
        <div style="position:relative;display:flex;align-items:center;">
          <svg style="position:absolute;left:10px;color:#b8d4b9;pointer-events:none;" width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
          <input class="search-input" type="text" placeholder="Search orders, SKUs…"/>
        </div>
        
        <button style="position:relative;background:#f8faf8;border:1px solid #e8f0e8;border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#5a7a5c;transition:border-color .18s;" onmouseover="this.style.borderColor='#7bb77f'" onmouseout="this.style.borderColor='#e8f0e8'">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5A4 4 0 0 0 4 5.5v3.5L2.5 11h11L12 9V5.5A4 4 0 0 0 8 1.5z" stroke="currentColor" stroke-width="1.5"/><path d="M6.5 11.5a1.5 1.5 0 0 0 3 0" stroke="currentColor" stroke-width="1.5"/></svg>
          <span style="position:absolute;top:-2px;right:-2px;width:8px;height:8px;background:#48844c;border-radius:50%;border:1.5px solid #fff;"></span>
        </button>
        
        <button style="background:linear-gradient(135deg,#48844c,#5ba45f);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(72,132,76,.3);transition:box-shadow .2s;" onmouseover="this.style.boxShadow='0 4px 16px rgba(72,132,76,.4)'" onmouseout="this.style.boxShadow='0 2px 8px rgba(72,132,76,.3)'">
          <svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M6.5 1v11M1 6.5h11" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
          New Order
        </button>
      </div>
    </header>

<main style="flex:1;padding:24px;overflow-y:auto;overflow-x:hidden;">

<div id="tab-dashboard">

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px;">
          <div class="card card-hover animate-fadeUp" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;">
              <div style="font-size:12px;font-weight:600;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;">Total Orders</div>
              <div style="width:36px;height:36px;border-radius:10px;background:#eff6ef;display:flex;align-items:center;justify-content:center;">
                <svg width="17" height="17" viewBox="0 0 17 17" fill="none"><path d="M2.5 4h12M2.5 8.5h12M2.5 13h8" stroke="#48844c" stroke-width="1.6" stroke-linecap="round"/></svg>
              </div>
            </div>
            <div style="font-size:30px;font-weight:800;color:#1a2e1b;letter-spacing:-.5px;line-height:1;">4,821</div>
            <div style="margin-top:8px;display:flex;align-items:center;gap:5px;font-size:12px;color:#48844c;font-weight:500;">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 8l3-4 2.5 2.5L10 2" stroke="#48844c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              +12.4% vs last month
            </div>
          </div>

<div class="card card-hover animate-fadeUp d1" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;">
              <div style="font-size:12px;font-weight:600;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;">On-Time Delivery</div>
              <div style="width:36px;height:36px;border-radius:10px;background:#eff6ef;display:flex;align-items:center;justify-content:center;">
                <svg width="17" height="17" viewBox="0 0 17 17" fill="none"><circle cx="8.5" cy="8.5" r="6" stroke="#48844c" stroke-width="1.6"/><path d="M8.5 5v4l2.5 1.5" stroke="#48844c" stroke-width="1.6" stroke-linecap="round"/></svg>
              </div>
            </div>
            <div style="font-size:30px;font-weight:800;color:#1a2e1b;letter-spacing:-.5px;line-height:1;">96.2<span style="font-size:18px;color:#7aa67c;">%</span></div>
            <div style="margin-top:10px;"><div class="pbar"><div class="pfill" style="width:96.2%;background:linear-gradient(90deg,#48844c,#7bb77f);"></div></div></div>
          </div>

<div class="card card-hover animate-fadeUp d2" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;">
              <div style="font-size:12px;font-weight:600;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;">Inventory Value</div>
              <div style="width:36px;height:36px;border-radius:10px;background:#eff6ef;display:flex;align-items:center;justify-content:center;">
                <svg width="17" height="17" viewBox="0 0 17 17" fill="none"><path d="M8.5 2L2 5.5v5L8.5 14.5 15 10.5v-5L8.5 2z" stroke="#48844c" stroke-width="1.6" stroke-linejoin="round"/></svg>
              </div>
            </div>
            <div style="font-size:30px;font-weight:800;color:#1a2e1b;letter-spacing:-.5px;line-height:1;">$2.4M</div>
            <div style="margin-top:8px;font-size:12px;color:#d97706;font-weight:500;display:flex;align-items:center;gap:4px;">
              <span style="width:6px;height:6px;border-radius:50%;background:#d97706;display:inline-block;"></span>
              8 SKUs below reorder level
            </div>
          </div>

<div class="card card-hover animate-fadeUp d3" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;">
              <div style="font-size:12px;font-weight:600;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;">Active Suppliers</div>
              <div style="width:36px;height:36px;border-radius:10px;background:#eff6ef;display:flex;align-items:center;justify-content:center;">
                <svg width="17" height="17" viewBox="0 0 17 17" fill="none"><circle cx="8.5" cy="6" r="3" stroke="#48844c" stroke-width="1.6"/><path d="M2.5 15c0-3.31 2.69-5.5 6-5.5s6 2.19 6 5.5" stroke="#48844c" stroke-width="1.6" stroke-linecap="round"/></svg>
              </div>
            </div>
            <div style="font-size:30px;font-weight:800;color:#1a2e1b;letter-spacing:-.5px;line-height:1;">142</div>
            <div style="margin-top:8px;font-size:12px;color:#48844c;font-weight:500;display:flex;align-items:center;gap:4px;">
              <span style="width:6px;height:6px;border-radius:50%;background:#48844c;display:inline-block;animation: pulse3 2.2s ease-in-out infinite;"></span>
              6 pending approval
            </div>
          </div>
        </div>

<div style="display:grid;grid-template-columns:1fr 300px;gap:16px;margin-bottom:20px;" class="responsive-grid-2">

<div class="card animate-fadeUp d2" style="overflow:hidden;">
            <div style="padding:16px 20px;border-bottom:1px solid #f0f5f0;display:flex;align-items:center;justify-content:space-between;">
              <div>
                <div style="font-size:15px;font-weight:700;color:#1a2e1b;">Recent Orders</div>
                <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-top:2px;">Last 24 hours</div>
              </div>
              <button onclick="setTab('orders',null)" style="font-size:12px;font-weight:600;color:#48844c;background:#eff6ef;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;">View all →</button>
            </div>
            <div class="table-wrap">
              <table class="tbl">
                <thead><tr><th>Order ID</th><th>Customer</th><th>Status</th><th>Value</th><th>ETA</th></tr></thead>
                <tbody>
                  <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#ORD-9841</td><td style="font-weight:500;">Nexus Corp</td><td><span class="badge badge-blue">In Transit</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;">$14,200</td><td style="color:#7aa67c;font-family:'DM Mono',monospace;font-size:12px;">Jun 12</td></tr>
                  <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#ORD-9840</td><td style="font-weight:500;">Vantex Ltd</td><td><span class="badge badge-amber">Processing</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;">$8,750</td><td style="color:#7aa67c;font-family:'DM Mono',monospace;font-size:12px;">Jun 15</td></tr>
                  <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#ORD-9839</td><td style="font-weight:500;">Alpine Industries</td><td><span class="badge badge-green">Delivered</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;">$22,100</td><td style="color:#7aa67c;font-family:'DM Mono',monospace;font-size:12px;">Jun 8 ✓</td></tr>
                  <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#ORD-9838</td><td style="font-weight:500;">Meridian Co.</td><td><span class="badge badge-amber">Processing</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;">$5,430</td><td style="color:#7aa67c;font-family:'DM Mono',monospace;font-size:12px;">Jun 18</td></tr>
                  <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#ORD-9837</td><td style="font-weight:500;">Stratos Global</td><td><span class="badge badge-blue">In Transit</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;">$31,800</td><td style="color:#7aa67c;font-family:'DM Mono',monospace;font-size:12px;">Jun 11</td></tr>
                </tbody>
              </table>
            </div>
          </div>

<div class="card animate-fadeUp d3" style="padding:20px;display:flex;flex-direction:column;gap:12px;">
            <div style="font-size:15px;font-weight:700;color:#1a2e1b;margin-bottom:4px;">Live Alerts</div>
            <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 14px;display:flex;gap:10px;">
              <svg style="flex-shrink:0;margin-top:2px;" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M7.5 1.5L1 13.5h13L7.5 1.5z" stroke="#d97706" stroke-width="1.4" stroke-linejoin="round"/><path d="M7.5 6v3.5M7.5 11.5v.5" stroke="#d97706" stroke-width="1.5" stroke-linecap="round"/></svg>
              <div><div style="font-size:12.5px;font-weight:600;color:#92400e;">Low Stock: SKU-8821</div><div style="font-size:11.5px;color:#b45309;margin-top:2px;">Only 12 units remain · Reorder now</div></div>
            </div>
            <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:12px 14px;display:flex;gap:10px;">
              <svg style="flex-shrink:0;margin-top:2px;" width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="6" stroke="#dc2626" stroke-width="1.4"/><path d="M7.5 4.5v3.5M7.5 10v.5" stroke="#dc2626" stroke-width="1.5" stroke-linecap="round"/></svg>
              <div><div style="font-size:12.5px;font-weight:600;color:#991b1b;">Shipment Delayed</div><div style="font-size:11.5px;color:#b91c1c;margin-top:2px;">#SHP-4412 · +2 day delay</div></div>
            </div>
            <div style="background:#eff6ef;border:1px solid #bddbbf;border-radius:10px;padding:12px 14px;display:flex;gap:10px;">
              <svg style="flex-shrink:0;margin-top:2px;" width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="6" stroke="#48844c" stroke-width="1.4"/><path d="M5 7.5l2 2 3.5-3.5" stroke="#48844c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              <div><div style="font-size:12.5px;font-weight:600;color:#244226;">Dallas DC Dispatched</div><div style="font-size:11.5px;color:#366339;margin-top:2px;">201 units out · On schedule</div></div>
            </div>
            <div style="background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:12px 14px;display:flex;gap:10px;">
              <svg style="flex-shrink:0;margin-top:2px;" width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="6" stroke="#0284c7" stroke-width="1.4"/><path d="M7.5 5v3.5M7.5 10v.5" stroke="#0284c7" stroke-width="1.5" stroke-linecap="round"/></svg>
              <div><div style="font-size:12.5px;font-weight:600;color:#0c4a6e;">Supplier Review Due</div><div style="font-size:11.5px;color:#0369a1;margin-top:2px;">Ferro Materials · Jun 14</div></div>
            </div>
          </div>
        </div>

<div style="display:grid;grid-template-columns:2fr 1fr;gap:16px;" class="responsive-grid-2">

<div class="card animate-fadeUp d4" style="padding:20px;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
              <div>
                <div style="font-size:15px;font-weight:700;color:#1a2e1b;">Shipment Volume</div>
                <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-top:2px;">Jan – Jun 2025</div>
              </div>
              <div style="display:flex;gap:6px;">
                <span style="font-size:11px;background:#eff6ef;color:#48844c;border:1px solid #bddbbf;border-radius:6px;padding:3px 10px;font-weight:600;">Units</span>
                <span style="font-size:11px;background:#f8faf8;color:#9cc99f;border:1px solid #e8f0e8;border-radius:6px;padding:3px 10px;font-weight:600;">Revenue</span>
              </div>
            </div>
            
            <svg viewBox="0 0 520 140" style="width:100%;display:block;" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient id="agrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stop-color="#48844c" stop-opacity=".15"/>
                  <stop offset="100%" stop-color="#48844c" stop-opacity="0"/>
                </linearGradient>
              </defs>
              <line x1="0" y1="20" x2="520" y2="20" stroke="#f0f5f0" stroke-width="1"/>
              <line x1="0" y1="50" x2="520" y2="50" stroke="#f0f5f0" stroke-width="1"/>
              <line x1="0" y1="80" x2="520" y2="80" stroke="#f0f5f0" stroke-width="1"/>
              <line x1="0" y1="110" x2="520" y2="110" stroke="#f0f5f0" stroke-width="1"/>
              <text x="0" y="23" fill="#c8dcc8" font-size="9" font-family="DM Mono">500</text>
              <text x="0" y="53" fill="#c8dcc8" font-size="9" font-family="DM Mono">375</text>
              <text x="0" y="83" fill="#c8dcc8" font-size="9" font-family="DM Mono">250</text>
              <text x="0" y="113" fill="#c8dcc8" font-size="9" font-family="DM Mono">125</text>
              
              <path d="M70,88 L154,62 L238,74 L322,34 L406,50 L490,24 L490,114 L70,114 Z" fill="url(#agrad)"/>
              
              <polyline points="70,88 154,62 238,74 322,34 406,50 490,24" fill="none" stroke="#48844c" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round"/>
              
              <circle cx="70"  cy="88" r="4" fill="#fff" stroke="#48844c" stroke-width="2"/>
              <circle cx="154" cy="62" r="4" fill="#fff" stroke="#48844c" stroke-width="2"/>
              <circle cx="238" cy="74" r="4" fill="#fff" stroke="#48844c" stroke-width="2"/>
              <circle cx="322" cy="34" r="5" fill="#48844c" stroke="#fff" stroke-width="2"/>
              <circle cx="406" cy="50" r="4" fill="#fff" stroke="#48844c" stroke-width="2"/>
              <circle cx="490" cy="24" r="4" fill="#fff" stroke="#48844c" stroke-width="2"/>
              
              <text x="70"  y="130" fill="#b8d4b9" font-size="9.5" text-anchor="middle" font-family="DM Mono">JAN</text>
              <text x="154" y="130" fill="#b8d4b9" font-size="9.5" text-anchor="middle" font-family="DM Mono">FEB</text>
              <text x="238" y="130" fill="#b8d4b9" font-size="9.5" text-anchor="middle" font-family="DM Mono">MAR</text>
              <text x="322" y="130" fill="#48844c" font-size="9.5" text-anchor="middle" font-family="DM Mono" font-weight="bold">APR</text>
              <text x="406" y="130" fill="#b8d4b9" font-size="9.5" text-anchor="middle" font-family="DM Mono">MAY</text>
              <text x="490" y="130" fill="#48844c" font-size="9.5" text-anchor="middle" font-family="DM Mono" font-weight="bold">JUN</text>
            </svg>
          </div>

<div class="card animate-fadeUp d5" style="padding:20px;">
            <div style="font-size:15px;font-weight:700;color:#1a2e1b;margin-bottom:16px;">Chain Health</div>
            <div style="display:flex;flex-direction:column;gap:14px;">
              <div>
                <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Procurement</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#48844c;">92%</span></div>
                <div class="pbar"><div class="pfill" style="width:92%;background:#48844c;"></div></div>
              </div>
              <div>
                <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Warehousing</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#5ba45f;">87%</span></div>
                <div class="pbar"><div class="pfill" style="width:87%;background:#5ba45f;"></div></div>
              </div>
              <div>
                <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Distribution</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#d97706;">78%</span></div>
                <div class="pbar"><div class="pfill" style="width:78%;background:#d97706;"></div></div>
              </div>
              <div>
                <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Last Mile</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#48844c;">95%</span></div>
                <div class="pbar"><div class="pfill" style="width:95%;background:linear-gradient(90deg,#48844c,#7bb77f);"></div></div>
              </div>
              <div>
                <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Returns</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#48844c;">89%</span></div>
                <div class="pbar"><div class="pfill" style="width:89%;background:#5ba45f;"></div></div>
              </div>
            </div>
            <div style="margin-top:16px;padding-top:14px;border-top:1px solid #f0f5f0;">
              <div style="display:flex;align-items:center;justify-content:space-between;">
                <span style="font-size:12px;color:#7aa67c;">Overall Score</span>
                <span style="font-size:18px;font-weight:800;color:#1a2e1b;letter-spacing:-.3px;">88.2 <span style="font-size:11px;color:#7aa67c;">/ 100</span></span>
              </div>
            </div>
          </div>

</div>
      </div>

<div id="tab-orders" style="display:none;">
        <div style="display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px;">
          <button style="background:#eff6ef;color:#244226;border:1px solid #bddbbf;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer;">All Orders</button>
          <button style="background:#fff;color:#7aa67c;border:1px solid #e8f0e8;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:500;cursor:pointer;">Processing</button>
          <button style="background:#fff;color:#7aa67c;border:1px solid #e8f0e8;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:500;cursor:pointer;">In Transit</button>
          <button style="background:#fff;color:#7aa67c;border:1px solid #e8f0e8;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:500;cursor:pointer;">Delivered</button>
          <div style="margin-left:auto;display:flex;gap:8px;">
            <button style="background:#fff;color:#5a7a5c;border:1px solid #e8f0e8;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:5px;">
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M1.5 4h10M3 7h7M4.5 10h4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>Filter
            </button>
            <button style="background:linear-gradient(135deg,#48844c,#5ba45f);color:#fff;border:none;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(72,132,76,.25);">+ Create Order</button>
          </div>
        </div>
        <div class="card" style="overflow:hidden;">
          <div class="table-wrap">
            <table class="tbl">
              <thead><tr><th>Order ID</th><th>Customer</th><th>SKUs</th><th>Status</th><th>Priority</th><th>Value</th><th>Date</th><th>Action</th></tr></thead>
              <tbody>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;font-weight:500;">#ORD-9841</td><td style="font-weight:600;">Nexus Corp</td><td style="font-family:'DM Mono',monospace;color:#7aa67c;">12</td><td><span class="badge badge-blue">In Transit</span></td><td><span class="badge badge-red">High</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;color:#1a2e1b;">$14,200</td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 8</td><td><button style="background:#eff6ef;color:#366339;border:none;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;">Track</button></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;font-weight:500;">#ORD-9840</td><td style="font-weight:600;">Vantex Ltd</td><td style="font-family:'DM Mono',monospace;color:#7aa67c;">5</td><td><span class="badge badge-amber">Processing</span></td><td><span class="badge badge-amber">Med</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;color:#1a2e1b;">$8,750</td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 7</td><td><button style="background:#eff6ef;color:#366339;border:none;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;">View</button></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;font-weight:500;">#ORD-9839</td><td style="font-weight:600;">Alpine Industries</td><td style="font-family:'DM Mono',monospace;color:#7aa67c;">28</td><td><span class="badge badge-green">Delivered</span></td><td><span class="badge badge-gray">Low</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;color:#1a2e1b;">$22,100</td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 5</td><td><button style="background:#eff6ef;color:#366339;border:none;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;">Receipt</button></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;font-weight:500;">#ORD-9838</td><td style="font-weight:600;">Meridian Co.</td><td style="font-family:'DM Mono',monospace;color:#7aa67c;">8</td><td><span class="badge badge-amber">Processing</span></td><td><span class="badge badge-amber">Med</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;color:#1a2e1b;">$5,430</td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 4</td><td><button style="background:#eff6ef;color:#366339;border:none;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;">View</button></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;font-weight:500;">#ORD-9837</td><td style="font-weight:600;">Stratos Global</td><td style="font-family:'DM Mono',monospace;color:#7aa67c;">41</td><td><span class="badge badge-blue">In Transit</span></td><td><span class="badge badge-red">High</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;color:#1a2e1b;">$31,800</td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 2</td><td><button style="background:#eff6ef;color:#366339;border:none;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;">Track</button></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;font-weight:500;">#ORD-9836</td><td style="font-weight:600;">Coastal Trade</td><td style="font-family:'DM Mono',monospace;color:#7aa67c;">19</td><td><span class="badge badge-green">Delivered</span></td><td><span class="badge badge-gray">Low</span></td><td style="font-family:'DM Mono',monospace;font-weight:600;color:#1a2e1b;">$9,200</td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 1</td><td><button style="background:#eff6ef;color:#366339;border:none;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;">Receipt</button></td></tr>
              </tbody>
            </table>
          </div>
          <div style="padding:12px 20px;border-top:1px solid #f0f5f0;display:flex;align-items:center;justify-content:space-between;">
            <span style="font-size:12px;color:#9cc99f;">Showing 6 of 4,821 orders</span>
            <div style="display:flex;gap:6px;">
              <button style="background:#fff;border:1px solid #e8f0e8;border-radius:6px;padding:5px 12px;font-size:12px;color:#7aa67c;cursor:pointer;">← Prev</button>
              <button style="background:#48844c;border:1px solid #48844c;border-radius:6px;padding:5px 12px;font-size:12px;color:#fff;cursor:pointer;font-weight:600;">1</button>
              <button style="background:#fff;border:1px solid #e8f0e8;border-radius:6px;padding:5px 12px;font-size:12px;color:#7aa67c;cursor:pointer;">2</button>
              <button style="background:#fff;border:1px solid #e8f0e8;border-radius:6px;padding:5px 12px;font-size:12px;color:#7aa67c;cursor:pointer;">Next →</button>
            </div>
          </div>
        </div>
      </div>

<div id="tab-inventory" style="display:none;">
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px;">
          <div class="card" style="padding:16px;text-align:center;"><div style="font-size:11px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Total SKUs</div><div style="font-size:28px;font-weight:800;color:#1a2e1b;">1,284</div></div>
          <div class="card" style="padding:16px;text-align:center;"><div style="font-size:11px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">In Stock</div><div style="font-size:28px;font-weight:800;color:#48844c;">1,273</div></div>
          <div class="card" style="padding:16px;text-align:center;"><div style="font-size:11px;font-weight:700;color:#d97706;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Low Stock</div><div style="font-size:28px;font-weight:800;color:#d97706;">8</div></div>
          <div class="card" style="padding:16px;text-align:center;"><div style="font-size:11px;font-weight:700;color:#dc2626;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Out of Stock</div><div style="font-size:28px;font-weight:800;color:#dc2626;">3</div></div>
          <div class="card" style="padding:16px;text-align:center;"><div style="font-size:11px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Reorder Due</div><div style="font-size:28px;font-weight:800;color:#1a2e1b;">14</div></div>
        </div>
        <div class="card" style="overflow:hidden;">
          <div style="padding:16px 20px;border-bottom:1px solid #f0f5f0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;">
            <div style="font-size:15px;font-weight:700;color:#1a2e1b;">Inventory Items</div>
            <button style="background:linear-gradient(135deg,#48844c,#5ba45f);color:#fff;border:none;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(72,132,76,.25);">+ Add SKU</button>
          </div>
          <div class="table-wrap">
            <table class="tbl">
              <thead><tr><th>SKU</th><th>Product Name</th><th>Category</th><th>Stock</th><th>Reorder At</th><th>Unit Cost</th><th>Status</th></tr></thead>
              <tbody>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">SKU-8821</td><td style="font-weight:600;">Hydraulic Pump A4</td><td style="color:#7aa67c;">Mechanical</td><td style="font-family:'DM Mono',monospace;font-weight:700;color:#d97706;">12</td><td style="font-family:'DM Mono',monospace;color:#9cc99f;">50</td><td style="font-family:'DM Mono',monospace;">$420</td><td><span class="badge badge-amber">Low Stock</span></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">SKU-7342</td><td style="font-weight:600;">Conveyor Belt 3m</td><td style="color:#7aa67c;">Industrial</td><td style="font-family:'DM Mono',monospace;font-weight:700;color:#48844c;">340</td><td style="font-family:'DM Mono',monospace;color:#9cc99f;">100</td><td style="font-family:'DM Mono',monospace;">$1,200</td><td><span class="badge badge-green">In Stock</span></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">SKU-5511</td><td style="font-weight:600;">Control Panel MX2</td><td style="color:#7aa67c;">Electrical</td><td style="font-family:'DM Mono',monospace;font-weight:700;color:#dc2626;">0</td><td style="font-family:'DM Mono',monospace;color:#9cc99f;">20</td><td style="font-family:'DM Mono',monospace;">$3,800</td><td><span class="badge badge-red">Out of Stock</span></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">SKU-4490</td><td style="font-weight:600;">Sensor Array B7</td><td style="color:#7aa67c;">Electronics</td><td style="font-family:'DM Mono',monospace;font-weight:700;color:#48844c;">892</td><td style="font-family:'DM Mono',monospace;color:#9cc99f;">200</td><td style="font-family:'DM Mono',monospace;">$240</td><td><span class="badge badge-green">In Stock</span></td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">SKU-3301</td><td style="font-weight:600;">Steel Frame 6061-T6</td><td style="color:#7aa67c;">Raw Material</td><td style="font-family:'DM Mono',monospace;font-weight:700;color:#d97706;">28</td><td style="font-family:'DM Mono',monospace;color:#9cc99f;">50</td><td style="font-family:'DM Mono',monospace;">$680</td><td><span class="badge badge-amber">Low Stock</span></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

<div id="tab-shipments" style="display:none;">
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px;">
          <div class="card" style="padding:16px;"><div style="font-size:11px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Active</div><div style="font-size:28px;font-weight:800;color:#1a2e1b;">38</div></div>
          <div class="card" style="padding:16px;"><div style="font-size:11px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Delivered Today</div><div style="font-size:28px;font-weight:800;color:#48844c;">12</div></div>
          <div class="card" style="padding:16px;"><div style="font-size:11px;font-weight:700;color:#dc2626;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Delayed</div><div style="font-size:28px;font-weight:800;color:#dc2626;">4</div></div>
          <div class="card" style="padding:16px;"><div style="font-size:11px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Avg Transit</div><div style="font-size:28px;font-weight:800;color:#1a2e1b;">3.2<span style="font-size:14px;color:#7aa67c;">d</span></div></div>
        </div>
        <div class="card" style="overflow:hidden;">
          <div style="padding:16px 20px;border-bottom:1px solid #f0f5f0;"><div style="font-size:15px;font-weight:700;color:#1a2e1b;">Active Shipments</div></div>
          <div class="table-wrap">
            <table class="tbl">
              <thead><tr><th>Shipment ID</th><th>Origin</th><th>Destination</th><th>Carrier</th><th>Weight</th><th>Status</th><th>ETA</th></tr></thead>
              <tbody>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#SHP-4412</td><td style="font-weight:500;">Chicago, IL</td><td style="font-weight:500;">New York, NY</td><td><span class="badge badge-gray">FedEx</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;">840 kg</td><td><span class="badge badge-red">Delayed +2d</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 13</td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#SHP-4411</td><td style="font-weight:500;">Dallas, TX</td><td style="font-weight:500;">Atlanta, GA</td><td><span class="badge badge-gray">UPS</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;">1,200 kg</td><td><span class="badge badge-blue">On Route</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 11</td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#SHP-4410</td><td style="font-weight:500;">Seattle, WA</td><td style="font-weight:500;">Portland, OR</td><td><span class="badge badge-gray">DHL</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;">340 kg</td><td><span class="badge badge-green">Delivered</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#48844c;">Jun 7 ✓</td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#SHP-4409</td><td style="font-weight:500;">Miami, FL</td><td style="font-weight:500;">Tampa, FL</td><td><span class="badge badge-gray">FedEx</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;">510 kg</td><td><span class="badge badge-blue">On Route</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 9</td></tr>
                <tr><td style="font-family:'DM Mono',monospace;font-size:12px;color:#7aa67c;">#SHP-4408</td><td style="font-weight:500;">Los Angeles, CA</td><td style="font-weight:500;">Phoenix, AZ</td><td><span class="badge badge-gray">USPS</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;">95 kg</td><td><span class="badge badge-amber">Customs Hold</span></td><td style="font-family:'DM Mono',monospace;font-size:12px;color:#9cc99f;">Jun 14</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

<div id="tab-suppliers" style="display:none;">
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;">
          <div class="card card-hover" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px;">
              <div style="font-size:15px;font-weight:700;color:#1a2e1b;">Ferro Materials GmbH</div>
              <span class="badge badge-green">Preferred</span>
            </div>
            <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-bottom:16px;">Raw Materials · Germany</div>
            <div style="display:flex;flex-direction:column;gap:10px;">
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">Reliability</span><span style="font-weight:700;color:#48844c;font-family:'DM Mono',monospace;">98.2%</span></div><div class="pbar"><div class="pfill" style="width:98.2%;background:#48844c;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">On-Time Delivery</span><span style="font-weight:700;color:#5ba45f;font-family:'DM Mono',monospace;">94.7%</span></div><div class="pbar"><div class="pfill" style="width:94.7%;background:#5ba45f;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">Quality Score</span><span style="font-weight:700;color:#48844c;font-family:'DM Mono',monospace;">97.0%</span></div><div class="pbar"><div class="pfill" style="width:97%;background:#7bb77f;"></div></div></div>
            </div>
            <div style="display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #f0f5f0;">
              <button style="flex:1;background:#eff6ef;color:#366339;border:none;border-radius:7px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;">Contact</button>
              <button style="flex:1;background:#f8faf8;color:#5a7a5c;border:1px solid #e8f0e8;border-radius:7px;padding:7px;font-size:12px;font-weight:500;cursor:pointer;">24 Orders</button>
            </div>
          </div>
          <div class="card card-hover" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px;">
              <div style="font-size:15px;font-weight:700;color:#1a2e1b;">NovaTech Parts Co.</div>
              <span class="badge badge-teal">Active</span>
            </div>
            <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-bottom:16px;">Electronics · South Korea</div>
            <div style="display:flex;flex-direction:column;gap:10px;">
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">Reliability</span><span style="font-weight:700;color:#5ba45f;font-family:'DM Mono',monospace;">91.0%</span></div><div class="pbar"><div class="pfill" style="width:91%;background:#5ba45f;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">On-Time Delivery</span><span style="font-weight:700;color:#d97706;font-family:'DM Mono',monospace;">88.3%</span></div><div class="pbar"><div class="pfill" style="width:88.3%;background:#d97706;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">Quality Score</span><span style="font-weight:700;color:#5ba45f;font-family:'DM Mono',monospace;">93.5%</span></div><div class="pbar"><div class="pfill" style="width:93.5%;background:#7bb77f;"></div></div></div>
            </div>
            <div style="display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #f0f5f0;">
              <button style="flex:1;background:#eff6ef;color:#366339;border:none;border-radius:7px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;">Contact</button>
              <button style="flex:1;background:#f8faf8;color:#5a7a5c;border:1px solid #e8f0e8;border-radius:7px;padding:7px;font-size:12px;font-weight:500;cursor:pointer;">11 Orders</button>
            </div>
          </div>
          <div class="card card-hover" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px;">
              <div style="font-size:15px;font-weight:700;color:#1a2e1b;">Pacific Logistics Inc.</div>
              <span class="badge badge-amber">Review Due</span>
            </div>
            <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-bottom:16px;">Freight · United States</div>
            <div style="display:flex;flex-direction:column;gap:10px;">
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">Reliability</span><span style="font-weight:700;color:#d97706;font-family:'DM Mono',monospace;">82.5%</span></div><div class="pbar"><div class="pfill" style="width:82.5%;background:#d97706;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">On-Time Delivery</span><span style="font-weight:700;color:#d97706;font-family:'DM Mono',monospace;">79.1%</span></div><div class="pbar"><div class="pfill" style="width:79.1%;background:#d97706;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;"><span style="color:#5a7a5c;">Quality Score</span><span style="font-weight:700;color:#7aa67c;font-family:'DM Mono',monospace;">85.0%</span></div><div class="pbar"><div class="pfill" style="width:85%;background:#7bb77f;"></div></div></div>
            </div>
            <div style="display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #f0f5f0;">
              <button style="flex:1;background:#eff6ef;color:#366339;border:none;border-radius:7px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;">Contact</button>
              <button style="flex:1;background:#f8faf8;color:#5a7a5c;border:1px solid #e8f0e8;border-radius:7px;padding:7px;font-size:12px;font-weight:500;cursor:pointer;">7 Orders</button>
            </div>
          </div>
        </div>
      </div>

<div id="tab-warehouses" style="display:none;">
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;">
          <div class="card card-hover" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2px;">
              <div style="font-size:15px;font-weight:700;color:#1a2e1b;">Chicago Hub</div>
              <span class="badge badge-green">Active</span>
            </div>
            <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-bottom:16px;">Chicago, IL · 48,000 sq ft</div>
            <div style="margin-bottom:14px;">
              <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;"><span style="color:#5a7a5c;">Capacity Used</span><span style="font-weight:700;color:#1a2e1b;font-family:'DM Mono',monospace;">73%</span></div>
              <div class="pbar" style="height:8px;"><div class="pfill" style="width:73%;background:linear-gradient(90deg,#48844c,#7bb77f);height:100%;"></div></div>
              <div style="font-size:11px;color:#b8d4b9;font-family:'DM Mono',monospace;margin-top:5px;">35,040 / 48,000 sq ft</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
              <div style="background:#f8faf8;border-radius:8px;padding:10px;"><div style="font-size:10.5px;color:#9cc99f;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Inbound</div><div style="font-size:16px;font-weight:700;color:#1a2e1b;">142</div><div style="font-size:10.5px;color:#b8d4b9;font-family:'DM Mono',monospace;">units today</div></div>
              <div style="background:#f8faf8;border-radius:8px;padding:10px;"><div style="font-size:10.5px;color:#9cc99f;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Outbound</div><div style="font-size:16px;font-weight:700;color:#1a2e1b;">89</div><div style="font-size:10.5px;color:#b8d4b9;font-family:'DM Mono',monospace;">units today</div></div>
            </div>
          </div>
          <div class="card card-hover" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2px;">
              <div style="font-size:15px;font-weight:700;color:#1a2e1b;">Dallas DC</div>
              <span class="badge badge-amber">Near Capacity</span>
            </div>
            <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-bottom:16px;">Dallas, TX · 62,000 sq ft</div>
            <div style="margin-bottom:14px;">
              <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;"><span style="color:#5a7a5c;">Capacity Used</span><span style="font-weight:700;color:#d97706;font-family:'DM Mono',monospace;">91%</span></div>
              <div class="pbar" style="height:8px;"><div class="pfill" style="width:91%;background:linear-gradient(90deg,#d97706,#f59e0b);height:100%;"></div></div>
              <div style="font-size:11px;color:#b8d4b9;font-family:'DM Mono',monospace;margin-top:5px;">56,420 / 62,000 sq ft</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
              <div style="background:#f8faf8;border-radius:8px;padding:10px;"><div style="font-size:10.5px;color:#9cc99f;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Inbound</div><div style="font-size:16px;font-weight:700;color:#1a2e1b;">54</div><div style="font-size:10.5px;color:#b8d4b9;font-family:'DM Mono',monospace;">units today</div></div>
              <div style="background:#f8faf8;border-radius:8px;padding:10px;"><div style="font-size:10.5px;color:#9cc99f;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Outbound</div><div style="font-size:16px;font-weight:700;color:#1a2e1b;">201</div><div style="font-size:10.5px;color:#b8d4b9;font-family:'DM Mono',monospace;">units today</div></div>
            </div>
          </div>
          <div class="card card-hover" style="padding:20px;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2px;">
              <div style="font-size:15px;font-weight:700;color:#1a2e1b;">Seattle Port</div>
              <span class="badge badge-green">Active</span>
            </div>
            <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-bottom:16px;">Seattle, WA · 38,000 sq ft</div>
            <div style="margin-bottom:14px;">
              <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;"><span style="color:#5a7a5c;">Capacity Used</span><span style="font-weight:700;color:#48844c;font-family:'DM Mono',monospace;">44%</span></div>
              <div class="pbar" style="height:8px;"><div class="pfill" style="width:44%;background:#7bb77f;height:100%;"></div></div>
              <div style="font-size:11px;color:#b8d4b9;font-family:'DM Mono',monospace;margin-top:5px;">16,720 / 38,000 sq ft</div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
              <div style="background:#f8faf8;border-radius:8px;padding:10px;"><div style="font-size:10.5px;color:#9cc99f;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Inbound</div><div style="font-size:16px;font-weight:700;color:#1a2e1b;">320</div><div style="font-size:10.5px;color:#b8d4b9;font-family:'DM Mono',monospace;">units today</div></div>
              <div style="background:#f8faf8;border-radius:8px;padding:10px;"><div style="font-size:10.5px;color:#9cc99f;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Outbound</div><div style="font-size:16px;font-weight:700;color:#1a2e1b;">115</div><div style="font-size:10.5px;color:#b8d4b9;font-family:'DM Mono',monospace;">units today</div></div>
            </div>
          </div>
        </div>
      </div>

<div id="tab-analytics" style="display:none;">
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px;">
          <div class="card" style="padding:18px;text-align:center;"><div style="font-size:10.5px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;">On-Time Delivery</div><div style="font-size:28px;font-weight:800;color:#48844c;">96.2%</div></div>
          <div class="card" style="padding:18px;text-align:center;"><div style="font-size:10.5px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;">Avg Lead Time</div><div style="font-size:28px;font-weight:800;color:#1a2e1b;">3.2<span style="font-size:14px;color:#7aa67c;">d</span></div></div>
          <div class="card" style="padding:18px;text-align:center;"><div style="font-size:10.5px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;">Cost per Order</div><div style="font-size:28px;font-weight:800;color:#1a2e1b;">$42</div></div>
          <div class="card" style="padding:18px;text-align:center;"><div style="font-size:10.5px;font-weight:700;color:#7aa67c;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;">Inventory Turns</div><div style="font-size:28px;font-weight:800;color:#1a2e1b;">4.8<span style="font-size:14px;color:#7aa67c;">x</span></div></div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;" class="responsive-grid-2">
          
          <div class="card" style="padding:20px;">
            <div style="font-size:15px;font-weight:700;color:#1a2e1b;margin-bottom:4px;">Order Fulfillment Rate</div>
            <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-bottom:18px;">Monthly · 2025</div>
            <div style="display:flex;align-items:flex-end;gap:8px;height:110px;">
              <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;"><div style="width:100%;border-radius:4px 4px 0 0;background:#c8dcc8;" style2="height:62%;"></div><span style="font-family:'DM Mono',monospace;font-size:9.5px;color:#b8d4b9;">JAN</span></div>
              <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;"><div style="width:100%;border-radius:4px 4px 0 0;height:74%;background:#a0c8a4;"></div><span style="font-family:'DM Mono',monospace;font-size:9.5px;color:#b8d4b9;">FEB</span></div>
              <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;"><div style="width:100%;border-radius:4px 4px 0 0;height:68%;background:#a0c8a4;"></div><span style="font-family:'DM Mono',monospace;font-size:9.5px;color:#b8d4b9;">MAR</span></div>
              <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;"><div style="width:100%;border-radius:4px 4px 0 0;height:90%;background:#5ba45f;"></div><span style="font-family:'DM Mono',monospace;font-size:9.5px;color:#48844c;font-weight:700;">APR</span></div>
              <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;"><div style="width:100%;border-radius:4px 4px 0 0;height:82%;background:#5ba45f;"></div><span style="font-family:'DM Mono',monospace;font-size:9.5px;color:#b8d4b9;">MAY</span></div>
              <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;"><div style="width:100%;border-radius:4px 4px 0 0;height:97%;background:linear-gradient(180deg,#366339,#5ba45f);box-shadow:0 4px 12px rgba(72,132,76,.3);"></div><span style="font-family:'DM Mono',monospace;font-size:9.5px;color:#48844c;font-weight:700;">JUN</span></div>
            </div>
          </div>
          
          <div class="card" style="padding:20px;">
            <div style="font-size:15px;font-weight:700;color:#1a2e1b;margin-bottom:4px;">Cost Breakdown</div>
            <div style="font-size:12px;color:#9cc99f;font-family:'DM Mono',monospace;margin-bottom:18px;">Q2 2025 · Total $2.0M</div>
            <div style="display:flex;flex-direction:column;gap:13px;">
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Procurement</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#48844c;">$840K · 42%</span></div><div class="pbar"><div class="pfill" style="width:42%;background:#48844c;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Logistics</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#5ba45f;">$520K · 26%</span></div><div class="pbar"><div class="pfill" style="width:26%;background:#5ba45f;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Warehousing</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#7bb77f;">$380K · 19%</span></div><div class="pbar"><div class="pfill" style="width:19%;background:#7bb77f;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="font-weight:500;color:#2d4a2e;">Last Mile</span><span style="font-family:'DM Mono',monospace;font-weight:600;color:#9cc99f;">$260K · 13%</span></div><div class="pbar"><div class="pfill" style="width:13%;background:#9cc99f;"></div></div></div>
            </div>
          </div>
        </div>
      </div>

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

<style>
  @media (max-width: 900px) {
    #hamburger { display: flex !important; }
    .responsive-grid-2 { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 600px) {
    main { padding: 14px !important; }
    header { padding: 0 14px !important; }
    .search-input { display: none !important; }
  }
</style>

function setTab(name, clickedEl) {
    // Hide all tabs
    ALL_TABS.forEach(t => {
      const el = document.getElementById('tab-' + t);
      if (el) el.style.display = 'none';
    });
    // Show target
    const target = document.getElementById('tab-' + name);
    if (target) { target.style.display = ''; target.classList.add('animate-fadeUp'); }

// Update nav items
    document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
    if (clickedEl) { clickedEl.classList.add('active'); }
    else {
      document.querySelectorAll('.nav-item').forEach(el => {
        if (el.getAttribute('onclick') === `setTab('${name}',this)`) el.classList.add('active');
      });
    }

// Update topbar
    const titles = TAB_TITLES[name] || [name, ''];
    document.getElementById('page-title').textContent = titles[0];
    document.getElementById('page-sub').textContent = titles[1];

closeSidebar();
  }

function openSidebar() {
    document.getElementById('sidebar').classList.add('open');
    document.getElementById('sidebar-overlay').classList.add('show');
  }
  function closeSidebar() {
    document.getElementById('sidebar').classList.remove('open');
    document.getElementById('sidebar-overlay').classList.remove('show');
  }

// Check viewport on load for hamburger
  function checkResponsive() {
    const hamburger = document.getElementById('hamburger');
    if (window.innerWidth <= 900) hamburger.style.display = 'flex';
    else { hamburger.style.display = 'none'; closeSidebar(); }
  }
  window.addEventListener('resize', checkResponsive);
  checkResponsive();
</script>
</body>
</html>

Related Examples

FAQs
Frequently Asked Questions

ORGIN_DREAMS

1 year ago

1.2k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

King Kali

2 years ago

17.1k
Accordion FAQ
FAQ Accordion section without using any javascript

Ganesh Salunke

4 months ago

286
FAQ section
An expanding frequently asked questions section made without using javascript.

Manuela Bianka

4 years ago

12.3k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

10 months ago

759
Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Anonymous

2 years ago

10.6k
CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

935
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

wavy kits

11 months ago

1.4k
Simple expanded FAQ example

Orson Kincaid

1 year ago

2.1k
FAQ section

Brandon D

3 years ago

11.4k
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Dika Rahman

1 year ago

2.2k
Accordions & FAQs with css chevrons: No javascript needed
Chevron toggle without using nested SVG images.

Sherry Lynne

1 month ago

124