JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="header">
<div id="address">
A random
address
and zip code
</div>
<div id="open">
Mon-Sat 7-7pm Sunday 11-4pm
</div>
<div id="fourstar">
Company Title</br>
Going Here
</div>
<div id="top-menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Delivery</a></li>
<li><a href="">Prices</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div id="segment-1">aaaaa
</div>
</div>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-family: 'Source Code Pro', sans-serif;
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
#wrapper {
position: absolute;
width: 100%;
height: auto;
}
.display-block {
display: block;
}
#header {
position: absolute;
width: 100%;
height: auto;
}
#top-menu {
position: absolute;
font-size: 0.625em;
top: 0;
height: 50px;
}
#top-menu ul {
display: table;
width: 100%;
}
#top-menu ul li {
display: table-cell;
width: 14%;
-moz-box-shadow:inset 1px 1px 11px 0px #fff6af;
-webkit-box-shadow:inset 1px 1px 11px 0px #fff6af;
box-shadow:inset 1px 1px 11px 0px #fff6af;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
background-color:#ffec64;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #ffaa22;
color:#000;
font-family:arial;
font-size:1em;
font-weight:bold;
padding:7px 4px;
...