JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<!DOCTYPE HTML>
<html>
<head>
        <title>Lewis Bell</title>
</head>
<body>
    <h1>
        <a href="http://lbell.co.uk">Lewis Bell - Portfolio</a>
    </h1>

    <nav>
        <ul>
            <li>
                <a href="http://google.com">contact
                    <span>let's talk</span>
                </a>
            </li>
            <li>
                <a href="http://google.com">work
                    <span>what i do</span>
                </a>
            </li>
            <li>
                <a href="http://google.com">about
                    <span>a brief intro</span>
                </a>
            </li>
            <li>
                <a href="http://lbell.co.uk/index">home
                    <span>my house</span>
                </a>
            </li>
        </ul>
    </nav>

    <h2>web and interface design</h2>
    <h3>i'm lewis bell. i <span>love</span> design. simple.</h3>

    <div id="work">
        <ul class="box">
            <li><img src="http://209.85.62.24/28002/184/0/p419088/test.png"/></li>
            <li><img src="http://209.85.62.24/28002/184/0/p419088/test.png"/></li>
            <li><img src="http://209.85.62.24/28002/184/0/p419088/test.png"/></li>  
        </ul>
    </div>
        
    <footer>© Copyright 2011. Lewis Bell. All rights reserved.</footer>
</body>
</html>

CSS

html, body { height: 100% }

body{
background: #777;
color:#ececec;
font-family:Helvetica;
text-transform:uppercase;
margin: 0 auto;
padding: 0 20px;
max-width: 960px;
min-height: 100%;
min-width: 800px;
}

h1{
display: block;
margin:0 0 0 80px;
width: 69px;
height:89px;
text-indent: -9999px;
background: transparent url('http://209.85.62.24/28002/184/0/p419066/logo.png') top left no-repeat;
}

nav {
    margin-right: 80px;
}

nav a{
color:#a1a2a3;
text-transform:uppercase;
text-decoration:none;
font-size:1em;
-webkit-transition:color .2s ease-out;  
-moz-transition:color .2s ease-out; 
-ms-transition:color .2s ease-out;   
-o-transition:color .2s ease-out;  
transition:color .2s ease-out; 
}

nav a:hover{
color:#c6c6c6;
text-decoration:none;
-webkit-transition:color .2s ease-in;  
-moz-transition:color .2s ease-in; 
-ms-transition:color .2s ease-in;   
-o-transition:color .2s ease-in;  
transition:color .2s ease-in; 
}

nav a span {
    display: block;
}

ul{
padding-left:0;
margin-top:-116px;
}

nav ul li{
float:right;
list-style:none;
display:inline;
padding-right:30px;
padding-left:5px;
padding-top:70px;
border-left:1px solid #3f3f3f;
height:30px;
letter-spacing:1px;
}

nav ul li a span{
text-transform:uppercase;
font-size:0.6em;
margin-top:-2px;
padding-left:1px;
}

h2{
text-align:center;
font-size:1.25em;
letter-spacing:5px;
margin-top:200px;
}

h3{
text-align:center;
font-size:0.75em;
letter-spacing:4px;
word-spacing:3px;
}

h3 span{
color:#ff5b40;
}

h2, h3{
padding:2px;
}

#work{
margin:0 auto;
padding-top: 100px;
}

ul.box {
    width: 850px;
    margin: 0 auto;
    list-style: none;
    z-index: 1; /* prevent shadows falling behind containers with backgrounds */
}


ul.box li {
    float: left;
    position: relative;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 0 30px 45px;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(6, 6, 6, 1), 0 0 40px rgba(6, 6, 6, 1) inset;
    -moz-box-shadow:...