JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<header>
  <nav>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </nav>
</header>

SCSS

header {
  padding: 1rem 0;
}

nav {
  display: flex;
  /* justify-content: safe center; */
  overflow-x: scroll;
  scrollbar-width: none;
  /* width: fit-content; */
}

nav > div {
  flex-basis: 60px;
  text-align: center;
  flex-shrink: 0;
  margin-right: 1rem;
}

nav > div:first-child {
  margin-left: 1rem;
}

// IGNORE - colours and stuff
header { background: navy; }
body { margin: 0; }
nav { background: cornflowerblue; }
nav > div { background: rgba(red, 0.5); }