JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<body>
    <header>
        <h1>Steve Hamber</h1>
            <nav>
                <ul>
                    <li>Test</li>
                    <li>Apple</li>
                    <li>Cat</li>
                    <li>Dog</li>
                </ul>
            </nav>
    </header>
    <h2>Welcome</h2>
</body>

CSS

/*
Border Test
*/
body{
background-image: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/wp-content/themes/tweaker6/images/bgnoise.png");
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
header{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
border-bottom: solid #c1c1c1 1px;

}
h1{
width: 170px;
padding: 5px 0px 5px 30px;    
font-weight: 200;
font-size: 22px;
color:#c1c1c1; 
text-shadow: 0px 1px 0px #fff;
border-right: 1px solid #c1c1c1;
}
h1:hover{
color:#30CEF7;
text-shadow: 0px 1px 0px #Fff;
background:#F8F8F8;
}
h2{
text-align: center;
font-size: 150px;
color:#D9D9D8;  
text-shadow: 1px 1px 0px #fff;
border-top: solid 1px white;
}
ul{
float: right;
    position:relative;
    top:-14px;
}
li{
float:left;
padding: 11px 12px 11px 12px;
border: solid 1px #c1c1c1;
}
nav{
position: absolute;
top:8px;
right:5px;
}