AI SaaS Hero Section with Dashboard

A modern AI SaaS hero section built with HTML and Tailwind CSS featuring dashboard preview, CTA buttons, trust badges, responsive layout, and clean UI.

This tailwind example is contributed by JUGENDRA GANGWAR, on 08-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are drawer,Admin Dashboard, User dashboard

Hero Sidebar Dashboard Navbar

Author JUGENDRA GANGWAR

Tailwind v3.4 248 2

Fork Fullscreen

<div class="m-4 rounded-xl border border-border/70 bg-gradient-to-br from-primary to-primary/85 p-4 text-primary-foreground">
        <div class="mb-1 flex items-center gap-2">
          <span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-accent/90 text-white">
            <svg viewBox="0 0 24 24" fill="currentColor" class="h-3.5 w-3.5"><path d="M12 2l2.6 6.4L21 9.3l-4.9 4.4L17.4 21 12 17.8 6.6 21l1.3-7.3L3 9.3l6.4-.9L12 2z" /></svg>
          </span>
          <p class="text-sm font-semibold">Upgrade to Scale</p>
        </div>
        <p class="text-xs leading-relaxed text-primary-foreground/80">Unlock multi-entity consolidation and audit-ready reporting.</p>
        <button class="mt-3 inline-flex h-8 w-full items-center justify-center rounded-md bg-background text-sm font-medium text-foreground hover:bg-background/90 transition-colors">See plans</button>
      </div>
    </aside>
    <div class="flex min-w-0 flex-1 flex-col">
      <header class="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-border/70 bg-background/80 px-4 backdrop-blur-xl sm:px-6 lg:px-8">
        <div class="relative flex-1 max-w-md">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="search" placeholder="Search transactions, vendors, accounts…" class="h-9 w-full rounded-lg border border-border/80 bg-card pl-9 pr-16 text-sm text-foreground placeholder:text-muted-foreground/70 focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30" />
          <kbd class="pointer-events-none absolute right-2 top-1/2 hidden -translate-y-1/2 items-center gap-1 rounded border border-border bg-secondary px-1.5 py-0.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex">⌘K</kbd>
        </div>

<div class="ml-auto flex items-center gap-2">
          <button aria-label="Notifications" class="relative inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-secondary transition-colors">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
            <span class="absolute right-2 top-2 h-1.5 w-1.5 rounded-full bg-accent"></span>
          </button>
          <div class="h-6 w-px bg-border"></div>
          <div class="flex items-center gap-2 pr-1">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">AC</span>
            <div class="hidden text-left sm:block">
              <p class="text-sm font-medium leading-none">Amelia Chen</p>
              <p class="mt-0.5 text-xs text-muted-foreground">CFO · Northwind Inc.</p>
            </div>
          </div>
        </div>
      </header>

<main class="flex-1 px-4 py-6 sm:px-6 lg:px-8">
        <div class="mx-auto flex max-w-[1400px] flex-col gap-6">
          <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <p class="text-sm font-medium text-muted-foreground" id="page-date"></p>
              <h1 class="mt-1 text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">Good morning, Amelia</h1>
              <p class="mt-1 text-sm text-muted-foreground">Here's a snapshot of Northwind's financial health.</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
              <button class="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-secondary transition-colors">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
                Last 12 months
              </button>
              <button class="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-secondary transition-colors">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Export
              </button>
              <button class="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                New transfer
              </button>
            </div>
          </div>
          <div id="kpi-grid" class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"></div>
          <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
            <section class="xl:col-span-2 rounded-xl border border-border/70 bg-card p-5 sm:p-6">
              <header class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div>
                  <h2 class="text-base font-semibold tracking-tight text-foreground">Revenue vs. expenses</h2>
                  <p class="mt-1 text-sm text-muted-foreground">Consolidated across all entities, in USD.</p>
                </div>
                <div class="flex items-center gap-4 text-xs">
                  <span class="inline-flex items-center gap-2 text-muted-foreground"><span class="h-2 w-2 rounded-full" style="background-color: rgb(var(--c-primary))"></span>Revenue</span>
                  <span class="inline-flex items-center gap-2 text-muted-foreground"><span class="h-2 w-2 rounded-full" style="background-color: rgb(var(--c-accent))"></span>Expenses</span>
                </div>
              </header>
              <div class="relative mt-6 h-72 w-full" id="area-chart-wrap"></div>
            </section>
            <section class="rounded-xl border border-border/70 bg-card p-5 sm:p-6">
              <header class="flex items-start justify-between">
                <div>
                  <h2 class="text-base font-semibold tracking-tight text-foreground">Accounts</h2>
                  <p class="mt-1 text-sm text-muted-foreground">Aggregate treasury</p>
                </div>
                <span class="inline-flex items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground">4 active</span>
              </header>
              <div class="mt-5">
                <p class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Total balance</p>
                <p class="mt-1 font-mono text-3xl font-semibold tabular-nums tracking-tight text-foreground" id="accounts-total"></p>
              </div>
              <ul class="mt-6 space-y-4" id="accounts-list"></ul>
            </section>
          </div>
          <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
            <section class="xl:col-span-2 rounded-xl border border-border/70 bg-card">
              <header class="flex flex-col gap-3 border-b border-border/70 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                <div>
                  <h2 class="text-base font-semibold tracking-tight text-foreground">Recent transactions</h2>
                  <p class="mt-1 text-sm text-muted-foreground">Synced 12 minutes ago across 4 accounts.</p>
                </div>
                <div class="flex items-center gap-2">
                  <button class="inline-flex h-8 items-center gap-2 rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-secondary transition-colors">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
                    Filter
                  </button>
                  <button class="inline-flex h-8 items-center rounded-md px-3 text-sm font-medium hover:bg-secondary transition-colors">View all</button>
                </div>
              </header>
              <div class="overflow-x-auto">
                <table class="w-full text-sm">
                  <thead>
                    <tr class="border-b border-border/70 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">
                      <th class="px-6 py-3">Transaction</th>
                      <th class="px-6 py-3">Account</th>
                      <th class="px-6 py-3">Status</th>
                      <th class="px-6 py-3">Date</th>
                      <th class="px-6 py-3 text-right">Amount</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-border/60" id="tx-body"></tbody>
                </table>
              </div>
            </section>
            <div class="flex flex-col gap-6">
              <section class="rounded-xl border border-border/70 bg-card p-5 sm:p-6">
                <header class="flex items-start justify-between">
                  <div>
                    <h2 class="text-base font-semibold tracking-tight text-foreground">Spend by category</h2>
                    <p class="mt-1 text-sm text-muted-foreground">Month to date · in thousands</p>
                  </div>
                  <span class="inline-flex items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground">Jul</span>
                </header>
                <div class="relative mt-4 h-52 w-full" id="bar-chart-wrap"></div>
              </section>
              <section class="rounded-xl border border-border/70 bg-card p-5 sm:p-6">
                <header class="flex items-start justify-between">
                  <div>
                    <h2 class="text-base font-semibold tracking-tight text-foreground">Team activity</h2>
                    <p class="mt-1 text-sm text-muted-foreground">Latest approvals and edits</p>
                  </div>
                  <button class="inline-flex h-8 items-center rounded-md px-3 text-sm font-medium hover:bg-secondary transition-colors">View log</button>
                </header>
                <ul class="mt-4 space-y-4" id="activity-list"></ul>
              </section>
            </div>
          </div>

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

const kpis = [
    { label: "Total revenue", value: "$2.487M", delta: "+12.4%", trend: "up", sub: "vs. last quarter" },
    { label: "Net cash flow", value: "$684,210", delta: "+8.1%", trend: "up", sub: "30-day rolling" },
    { label: "Operating expenses", value: "$1.142M", delta: "+3.2%", trend: "up", sub: "within budget" },
    { label: "Gross margin", value: "54.1%", delta: "-0.6%", trend: "down", sub: "vs. last quarter" },
  ];

const categorySpend = [
    { category: "Payroll", amount: 412 },
    { category: "SaaS", amount: 184 },
    { category: "Marketing", amount: 268 },
    { category: "Travel", amount: 92 },
    { category: "Office", amount: 61 },
    { category: "Legal", amount: 48 },
  ];

const transactions = [
    { id: "TX-8421", name: "Stripe payout", account: "Operating · USD", amount: 48420.12, type: "in", status: "Completed", date: "Jul 08" },
    { id: "TX-8420", name: "AWS Enterprise", account: "Operating · USD", amount: -12840.0, type: "out", status: "Completed", date: "Jul 08" },
    { id: "TX-8419", name: "Payroll — July run 1", account: "Payroll · USD", amount: -184920.5, type: "out", status: "Completed", date: "Jul 07" },
    { id: "TX-8418", name: "Northwind Capital", account: "Treasury · USD", amount: 250000.0, type: "in", status: "Pending", date: "Jul 07" },
    { id: "TX-8417", name: "Figma team plan", account: "Operating · USD", amount: -2160.0, type: "out", status: "Completed", date: "Jul 06" },
    { id: "TX-8416", name: "Wire — Kenshi Ltd.", account: "Operating · EUR", amount: 18420.0, type: "in", status: "Review", date: "Jul 06" },
  ];

const accounts = [
    { name: "Operating", currency: "USD", balance: 1284420, share: 42 },
    { name: "Treasury", currency: "USD", balance: 4812900, share: 78 },
    { name: "Payroll", currency: "USD", balance: 421040, share: 22 },
    { name: "Reserve", currency: "EUR", balance: 918400, share: 61 },
  ];

const activity = [
    { who: "Amelia Chen", what: "approved wire transfer", target: "Kenshi Ltd. · $18,420", when: "12m ago", initials: "AC" },
    { who: "Marcus Vale", what: "flagged expense", target: "AWS overage · $2,140", when: "1h ago", initials: "MV" },
    { who: "Priya Shah", what: "closed invoice", target: "INV-2041 · $48,900", when: "3h ago", initials: "PS" },
    { who: "Jonas Berg", what: "added vendor", target: "Halden Freight AS", when: "Yesterday", initials: "JB" },
  ];

const navItems = [
    { label: "Overview", active: true, path: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z|9 22 9 12 15 12 15 22" },
  ];

const currency = (n) => n.toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
  const currencyPrecise = (n) => n.toLocaleString("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 2 });

const ICONS = {
    home: '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
    receipt: '<path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M8 7h8"/><path d="M8 11h8"/><path d="M8 15h5"/>',
    wallet: '<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/>',
    creditcard: '<rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>',
    linechart: '<path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/>',
    users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
    arrowUp: '<line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>',
    arrowDown: '<line x1="7" y1="7" x2="17" y2="17"/><polyline points="17 7 17 17 7 17"/>',
  };

const navLabels = [
    { label: "Overview", icon: "home", active: true },
    { label: "Transactions", icon: "receipt", active: false },
    { label: "Accounts", icon: "wallet", active: false },
    { label: "Cards", icon: "creditcard", active: false },
    { label: "Reports", icon: "linechart", active: false },
    { label: "Team", icon: "users", active: false },
  ];

function iconSvg(name, cls) {
    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}">${ICONS[name]}</svg>`;
  }

document.getElementById("page-date").textContent = new Date(2026, 6, 8).toLocaleDateString("en-US", {
    weekday: "long", year: "numeric", month: "long", day: "numeric",
  });

const totalBalance = accounts.reduce((s, a) => s + a.balance, 0);
  document.getElementById("accounts-total").textContent = currency(totalBalance);

const statusStyles = {
    Completed: "bg-accent/15 text-accent-foreground",
    Pending: "bg-secondary text-secondary-foreground",
    Review: "bg-destructive/10 text-destructive",
  };

function renderAreaChart(container, data) {
    const W = 760, H = 288;
    const padL = 48, padR = 8, padT = 12, padB = 28;
    const innerW = W - padL - padR;
    const innerH = H - padT - padB;

const allVals = data.flatMap((d) => [d.revenue, d.expenses]);
    const maxV = Math.max(...allVals);
    const niceMax = Math.ceil(maxV / 50000) * 50000;

const x = (i) => padL + (i / (data.length - 1)) * innerW;
    const y = (v) => padT + innerH - (v / niceMax) * innerH;

const linePath = (key) =>
      data.map((d, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(d[key]).toFixed(1)}`).join(" ");

const xLabels = data.map((d, i) => `<text x="${x(i)}" y="${H - 8}" text-anchor="middle" font-size="11" fill="rgb(var(--c-muted-foreground))">${d.month}</text>`).join("");

const dots = data.map((d, i) => `
      <circle class="area-dot" data-idx="${i}" cx="${x(i)}" cy="${y(d.revenue)}" r="9" fill="transparent" />
    `).join("");

const svg = `
      <svg viewBox="0 0 ${W} ${H}" class="h-full w-full" preserveAspectRatio="none">
        <defs>
          <linearGradient id="gradRevenue" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="rgb(var(--c-primary))" stop-opacity="0.28" />
            <stop offset="100%" stop-color="rgb(var(--c-primary))" stop-opacity="0" />
          </linearGradient>
          <linearGradient id="gradExpenses" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="rgb(var(--c-accent))" stop-opacity="0.32" />
            <stop offset="100%" stop-color="rgb(var(--c-accent))" stop-opacity="0" />
          </linearGradient>
        </defs>
        ${gridLines.join("")}
        <path d="${areaPath("revenue")}" fill="url(#gradRevenue)" />
        <path d="${areaPath("expenses")}" fill="url(#gradExpenses)" />
        <path d="${linePath("revenue")}" fill="none" stroke="rgb(var(--c-primary))" stroke-width="2" />
        <path d="${linePath("expenses")}" fill="none" stroke="rgb(var(--c-accent))" stroke-width="2" />
        ${xLabels}
        <g id="area-hover-line" style="opacity:0">
          <line x1="0" y1="${padT}" x2="0" y2="${padT + innerH}" stroke="rgb(var(--c-border))" />
        </g>
        ${dots}
      </svg>
      <div id="area-tooltip" class="chart-tooltip pointer-events-none absolute z-10 rounded-lg border border-border bg-popover/95 p-3 text-xs shadow-lg backdrop-blur opacity-0"></div>
    `;
    container.innerHTML = svg;

const svgEl = container.querySelector("svg");
    const tooltip = container.querySelector("#area-tooltip");
    const hoverLine = container.querySelector("#area-hover-line");

svgEl.querySelectorAll(".area-dot").forEach((dot) => {
      const idx = Number(dot.dataset.idx);
      dot.addEventListener("mouseenter", () => {
        const d = data[idx];
        tooltip.innerHTML = `
          <p class="mb-2 font-medium text-foreground">${d.month}</p>
          <div class="space-y-1">
            <div class="flex items-center justify-between gap-6">
              <span class="inline-flex items-center gap-2 text-muted-foreground"><span class="h-2 w-2 rounded-full" style="background-color: rgb(var(--c-primary))"></span>revenue</span>
              <span class="font-mono font-medium tabular-nums text-foreground">${currency(d.revenue)}</span>
            </div>
            <div class="flex items-center justify-between gap-6">
              <span class="inline-flex items-center gap-2 text-muted-foreground"><span class="h-2 w-2 rounded-full" style="background-color: rgb(var(--c-accent))"></span>expenses</span>
              <span class="font-mono font-medium tabular-nums text-foreground">${currency(d.expenses)}</span>
            </div>
          </div>
        `;
        const pctX = (x(idx) / W) * 100;
        tooltip.style.left = `clamp(0%, ${pctX}%, 78%)`;
        tooltip.style.top = "4px";
        tooltip.style.opacity = "1";
        hoverLine.setAttribute("transform", `translate(${x(idx)},0)`);
        hoverLine.style.opacity = "1";
      });
      dot.addEventListener("mouseleave", () => {
        tooltip.style.opacity = "0";
        hoverLine.style.opacity = "0";
      });
    });
  }

function renderBarChart(container, data) {
    const W = 340, H = 208;
    const padL = 34, padR = 6, padT = 6, padB = 24;
    const innerW = W - padL - padR;
    const innerH = H - padT - padB;

const maxV = Math.max(...data.map((d) => d.amount));
    const niceMax = Math.ceil(maxV / 100) * 100;

const bandW = innerW / data.length;
    const barW = Math.min(36, bandW * 0.55);

const y = (v) => padT + innerH - (v / niceMax) * innerH;

const svg = `
      <svg viewBox="0 0 ${W} ${H}" class="h-full w-full" preserveAspectRatio="none">
        ${gridLines.join("")}
        ${bars}
      </svg>
      <div id="bar-tooltip" class="chart-tooltip pointer-events-none absolute z-10 rounded-lg border border-border bg-popover/95 p-2.5 text-xs shadow-lg opacity-0"></div>
    `;
    container.innerHTML = svg;

const svgEl = container.querySelector("svg");
    const tooltip = container.querySelector("#bar-tooltip");

svgEl.querySelectorAll(".bar-hit").forEach((hit) => {
      const idx = Number(hit.dataset.idx);
      const rect = svgEl.querySelector(`.bar-rect[data-idx="${idx}"]`);
      hit.addEventListener("mouseenter", () => {
        const d = data[idx];
        rect.setAttribute("fill", "rgb(var(--c-primary) / 0.85)");
        tooltip.innerHTML = `
          <p class="mb-1 font-medium text-foreground">${d.category}</p>
          <p class="font-mono tabular-nums text-muted-foreground">$${d.amount}k</p>
        `;
        const pctX = (parseFloat(hit.getAttribute("x")) / W) * 100;
        tooltip.style.left = `clamp(0%, ${pctX}%, 70%)`;
        tooltip.style.top = "0px";
        tooltip.style.opacity = "1";
      });
      hit.addEventListener("mouseleave", () => {
        rect.setAttribute("fill", "rgb(var(--c-primary))");
        tooltip.style.opacity = "0";
      });
    });
  }

renderAreaChart(document.getElementById("area-chart-wrap"), revenueSeries);
  renderBarChart(document.getElementById("bar-chart-wrap"), categorySpend);

window.addEventListener("resize", () => {
    renderAreaChart(document.getElementById("area-chart-wrap"), revenueSeries);
    renderBarChart(document.getElementById("bar-chart-wrap"), categorySpend);
  });
</script>
</body>
</html>

Related Examples

Responsive navbar with dark mode support
Sidebar on small screen devices

TailwindFlex

4 years ago

20.6k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.6k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Eamon Carter

3 years ago

29k
Hero w/ navbar
the modern and clean hero section

Carla Hoffman

2 years ago

5.9k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
Daystar Day care Dashboard
Daystar Day care Dashboard

Paul Livingstone Ssenoga

2 years ago

11.4k
Tailwind Sidebar Layout

nejaa badr

2 years ago

9.2k
Tailwind Sidebar Layout
Place edited for the search button

Nur Pratap Karki

2 years ago

6k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.6k
Responsive navbar with dark mode support
Sidebar on small screen devices

Pardha Saradhy Madabhushi

2 years ago

3k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

2 years ago

3.9k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.7k