JSFiddle - React, Tailwind, and code Playground

by zugzwangle

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">
      </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;
   ...