JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<div>
<div class="header">
<div>Header 1</div>
</div>
<div class="app">
<div class="sub-header">
<button>Button #1</button>
<button>Button #2</button>
<button>Button #3</button>
<button>Button #4</button>
<button>Button #5</button>
<button>Button #6</button>
<button>Button #7</button>
<button>Button #8</button>
<button>Button #9</button>
<button>Button #10</button>
<button>Button #11</button>
<button>Button #12</button>
<button>Button #13</button>
<button>Button #14</button>
<button>Button #15</button>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis est condimentum, consequat nisi nec,
consequat metus. Maecenas feugiat ligula sit amet odio suscipit sodales ac vel mauris. Maecenas tempus, dui
sed pulvinar mattis, massa justo tempor justo, ac condimentum odio diam ut lacus. Praesent in odio a lacus
viverra ultricies non a est.
</p>
</div>
</div>
</div>
</body>
</html>
CSS
html {
font-size: 10px;
}
body {
margin: 0;
}
.header {
text-size-adjust: 100%;
font-size: 1.4rem;
line-height: 1.4rem;
z-index: 10;
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
padding: 0px 3.2rem;
gap: 1.6rem;
height: 5.5rem;
background: rgb(255, 255, 255);
border-bottom: 0.1rem solid rgb(177, 187, 205);
box-sizing: unset;
}
.app {
max-height: calc(100vh - 56px);
overflow: auto;
}
.sub-header {
display: flex;
gap: 24px;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
padding: 32px 64px;
width: fit-content;
min-width: 100%;
height: 112px;
background-color: rgb(42, 49, 65);
box-sizing: border-box;
}
.content {
padding: 2.4rem 6.4rem;
background-color: rgb(229, 232, 238);
}
.content p {
font-size: 1.4rem;
}