JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Header">
<div class="title">
<h1>Bass Clef Photography</h1>
</div>
<div class="tagline">Passion 4 Live Music & Passion 4 Photography</div>
<div id="tabsContainer">
<div class='tab zero'>
<ul>
<li><a href="BassClef.html">Home</a>
</li>
</ul>
</div>
<div class='tab one'>
<ul>
<li><a href="#">Music Gallery</a>
</li>
</ul>
</div>
<div class='tab two'>
<ul>
<li><a href="#">About</a>
</li>
</ul>
</div>
<div class='tab three'>
<ul>
<li><a href="#">Clients</a>
</li>
</ul>
</div>
<div class='tab four'>
<ul>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
<div class='tab five'>
<ul>
<li><a href="members.php">Members</a>
</li>
</ul>
</div>
</div>
</div>
<div class="spacer"></div>
<div id="photoframe">
<div class="pics">
<img src="http://placekitten.com/200/300" alt="" />
</div>
<div class="pics">
<img src="http://placekitten.com/200/400" alt="" />
</div>
<div class="pics">
<img src="http://placekitten.com/300/300" alt="" />
</div>
<div class="pics">
<img src="http://placekitten.com/300/400" alt="" />
</div>
<div class="pics">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="pics">
<img src="http://placekitten.com/100/300" alt="" />
</div>
<div class="pics">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="pics">
<img src="http://placekitten.com/400/300" alt="" />
</div>
</div>
CSS
body {
font-family: sans-serif;
}
#Header{
position:fixed;
background: #ccc;
top: 0;
left: 0;
right: 0;
height: 150px;
overflow: auto;
}
#tabsContainer .tab {
float: left;
}
#tabsContainer li {
list-style-type: none;
}
.spacer {
height: 150px; /* height of header */
}
#photoframe {
white-space: nowrap;
overflow-x: auto;
}
#photoframe .pics {
display: inline-block;
}