nav

Navigation region.

html

<nav class="nav-el nav-el--horizontal" aria-label="Primary" style="--accent:#A8E6C1;">
  <a class="nav-el__link nav-el__link--active" href="#">Home</a>
  <a class="nav-el__link" href="#">Work</a>
  <a class="nav-el__link" href="#">Contact</a>
</nav>
<style>
.nav-el { display: flex; gap: 4px; width: 300px; box-sizing: border-box; font: 14px system-ui, sans-serif; background: #FAF7F2; padding: 8px; border-radius: 10px; }
.nav-el--vertical { flex-direction: column; width: 160px; }
.nav-el__link { color: #241430; text-decoration: none; font-weight: 600; padding: 8px 14px; border-radius: 7px; }
.nav-el__link:hover { background: #24143010; }
.nav-el__link--active { background: var(--accent); color: #241430; }
</style>

tailwind

<nav aria-label="Primary" class="nav-tw nav-tw--horizontal flex gap-1 w-[300px] box-border font-sans text-sm bg-[#FAF7F2] p-2 rounded-xl">
  <a href="#" class="font-semibold no-underline px-3.5 py-2 rounded-md text-[#241430]" style="background:#A8E6C1">Home</a>
  <a href="#" class="font-semibold no-underline px-3.5 py-2 rounded-md text-[#241430] hover:bg-[#24143010]">Work</a>
  <a href="#" class="font-semibold no-underline px-3.5 py-2 rounded-md text-[#241430] hover:bg-[#24143010]">Contact</a>
</nav>
<style>
.nav-tw--vertical { flex-direction: column; width: 160px; }
</style>

react

export function NavElement({
  item1 = "Home",
  item2 = "Work",
  item3 = "Contact",
  orientation = "horizontal",
  accent = "#A8E6C1",
}) {
  const vertical = orientation === "vertical";
  const link = { color: "#241430", textDecoration: "none", fontWeight: 600, padding: "8px 14px", borderRadius: 7 };
  return (
    <nav aria-label="Primary" style={{ display: "flex", flexDirection: vertical ? "column" : "row", gap: 4, width: vertical ? 160 : 300, boxSizing: "border-box", font: "14px system-ui, sans-serif", background: "#FAF7F2", padding: 8, borderRadius: 10 }}>
      <a href="#" style={{ ...link, background: accent }}>{item1}</a>
      <a href="#" style={link}>{item2}</a>
      <a href="#" style={link}>{item3}</a>
    </nav>
  );
}