JSFiddle - React, Tailwind, and code Playground

by KheKhe

HTML

<div class="the-page">

<div class="first-bottom">
    <div class="image-container">
        <img src="http://photostry.com/wp-content/uploads/2011/09/highway-arizona-to-utah.jpg" />
    </div>
	
	<div class="text-container">
		<div class="text-wrapper">
			<span>SUN BEACH WARM</span>
		</div>
		<div class="tabs-wrapper">
			<div class="tabs-wrapper-inner">
				<a href="#">AMY</a>
				<a href="#">BAMY</a>
				<a href="#">CAMY</a>
				<a href="#">DAMY</a>
				<a href="#">EAMY</a>
			</div>
		</div>
	</div>
</div>

<div class="other-content">.</div>

</div><!-- #the-page -->

CSS

html,
body {
    height: 100%;
	box-sizing:border-box;
}

.the-page {
	height:100%;
	width:100%;
	position:relative;
}

.first-bottom {
    height: 100%;
}

.image-container img {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: block;
}

.text-container {
	height:100%;
	width:100%;
	top:0px;
	position:relative;
	display:flex;
	align-items:flex-end;
	flex-wrap:wrap;
}

.text-wrapper span {
	text-align:center;
	color:yellow;
}

.tabs-wrapper {
	height:50px;
	width:100%;
	background-color:pink;
	opacity:0.5;
}

.tabs-wrapper-inner {
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	width:60%;
	margin:auto;
}

.tabs-wrapper-inner a {
	text-decoration:none;
	font:sans-serif;
	font-weight:bold;
	color:red;
	padding:10px;
}

.other-content {
    background-color: purple;
    opacity: 0.5;
    width: 100%;
    height: 500px;
}