JSFiddle - React, Tailwind, and code Playground

by mustafa yılmaz

HTML

<div class="main">
  <div class="wrapper">
    	<div class="nav">
        	<div class="fixed-bg-img"></div>
        	<div class="fixed"><h2>Menus Items</h2></div>
        </div>
        <div class="slide-img"><img src="http://4.bp.blogspot.com/-8TmUVksZPFM/Tqz-J6K8eEI/AAAAAAAAC5s/d1Ol7tSzjfY/s1600/The+House+Of+Miracles_nature_beautiful_scenery_wallpapers%2528www.picturespool.blogspot.com%2529.jpg" alt="Slide" height="200" width="400"/></div>
        <div class="content">
        	<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensueOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensueOn the other hand, we denounce with righteous...

CSS

body{ 
  font-size:14px;
}
.wrapper{ 
	width:400px;
	margin:0 auto;
}
.nav{
	position:fixed; top:0; height:72px; width:400px;
}
h2{margin:0px; line-height:72px;}
.fixed{
	height:72px; position:relative; z-index:1; text-align:center; width:400px; margin-top:-62px;
	background:url("http://www.calgary.ca/Style%20Library/cocis/images/transparent-grey-background.png") repeat 0 0;
}
.fixed-bg-img{height:72px; position:relative; z-index:0; 
	background:url("http://ak.picdn.net/shutterstock/videos/575677/preview/stock-footage-small-white-particles-flowing-in-fresh-water-with-blue-background.jpg") repeat 0 0;
}
.slide-img{position:relative; z-index:0; margin-top:10px;}