JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="center">
<div id="header">
<ul>
<li>Google</li>
<li>Nexus 5</li>
<li>Inspiration</li>
</ul>
</div>
<div id="content">



<div class="img-1" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.

It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.

All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>

</div>

<div class="img-2" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.

It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.

All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>

</div>


<div class="img-3" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.

It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently...

CSS

html
{
background:silver;
}
#center
{
width:1700px;
margin-right:auto;
margin-left:auto;
}
#header
{
width:1700px;
margin-right:auto;
margin-left:-10px;;
background:silver;
position:fixed;
top:0;
left:0;
z-index:2;
font-family: 'Poiret One', cursive;
}
#header li
{
display:inline;
margin-right:auto;
margin-left:auto;
padding-left:20px;
}
#content
{
background:white;
margin-left:-10px;
}
.img
{
padding:20px;
width:1024px;
margin-right:auto;
margin-left:auto;
position:relative;
top:-100px;
}
#text
{
min-height:800px;
}
.img p
{
margin-top:-700px;
position:relative;
left:400px;
width:400px;
font-size:20px;
line-height:40px;
font-family: 'Poiret One', cursive;
}
#content p
{
margin-right:auto;
margin-left:auto;

}
#content img
{
margin-right:auto;
margin-left:auto;
line-height:20px;
min-height:400px;
}
#fixed
{
background-attachment:fixed;
width:100%;
position:relative;
padding:25% 0;
background-repeat:no-repeat;
background-position:center center;
background-size:100%;
}
.img-1
{
background-image:url('http://www.google.com.au/nexus/images/introvideo-endframe_n5.jpg');
}
.img-2
{
background-image:url('http://images.anandtech.com/doci/6440/Nexus-4-10-4571.jpg');
}
.img-3
{
background-image:url('http://www.google.com.au/nexus/images/introvideo-endframe_n5.jpg');
}
.img-4
{
background-image:url('http://zshop.vn/images/nexus_10_01.jpeg');
}
q
{
font-size:10em;
}
h1
{
width:1024px;
margin-right:auto;
margin-left:auto;
margin-top:-300px;
color:white;
font-family: 'Poiret One', cursive;
font-size:50px;
}
#footer
{
width:1700px;
margin-right:auto;
margin-left:auto;
background:white;
clear:both;
min-height:400px;
margin-top:-23px;
 min-height:300px;
 margin-right:auto;
 margin-left:auto;
 text-align:center;
 overflow:hidden;
 font-family: 'Poiret One', cursive;
}
#footercontent
{
width:1100px;
font-weight:20px;
margin-right:auto;
margin-left:auto;
padding-top:100px;
font-family: 'Poiret One', cursive;
font-size:13px;
}
.footer1...