JSFiddle - React, Tailwind, and code Playground

by mmarcon

HTML

<div id="page">
    <span class="mm">&middot;&middot;&middot;MM&middot;&middot;&middot;</span>
    <h1><span class="l"></span>Massimiliano Marcon<span class="r"></span></h1>
    <section id="about">
        <h2>About Me</h2>
        <p>
            Accomplished Software engineer and passionate innovator specializing in web standards and user interface design, distributed systems and Service Oriented Architectures, infrastructures for information sharing and security frameworks. Extensive background in full-cycle of software development process, from the requirement analysis to the implementation and testing phases. Excellent communicator, with 4 years of experience in designing presentations and writing technical reports to explain design choices, software architecture and experimental results to customers and coworkers.
        </p>
    </section>
    <section id="contact">
        
    </section>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Josefin+Slab);
@import url(http://fonts.googleapis.com/css?family=Lato:300);
@import url(http://fonts.googleapis.com/css?family=Tienne:700);

body, html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-image: url(http://dl.dropbox.com/u/234787/test3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e4e4db;
    font-family: 'Lato', sans-serif;  
}

#page {
    display: none;
    background: #fff;
    width: 580px;
    margin: 0 auto;
    box-shadow: 0 5px 15px #111;
    min-height: 400px;
    padding: 10px 0;
}

span.mm {
    display: block;
    font-family: 'Josefin Slab', cursive;
    text-align: center;
    font-size: 72px;
    text-shadow: 0 -1px 0 #222;
    color: #74823b;
    margin: 0 auto 20px auto;
    line-height: 1.2;
    font-weight: bold;
}

h1 {
    font-family: 'Josefin Slab', cursive;
    text-align: center;
    font-size: 32px;
    width: 600px;
    margin: 0 auto 0 auto;
    padding: 10px 0;
    background-color: #9bb142 /*#a4b254*/;
    color: #fff;
    position: relative;
    box-shadow: 0 3px 20px #999;
    left: -10px;
}

h1 span {
    width: 0;
    height: 0;
    position: absolute;
    border-width: 5px;
    border-style: solid;
    bottom: -10px;
}

h1 span.l {
    border-color: #74823b #74823b transparent transparent;
    left: 0;
}

h1 span.r {
    border-color: #74823b transparent transparent #74823b;
    right: -0;
}

h2 {
    padding: 10px;
    margin: 0 0 0 0px;
    font-size: 14px;
    background-color: #a4b254;
    color: #444;
    text-transform: uppercase;
    -webkit-transform: rotate(-90deg) translate(-150%, -99%);
    -webkit-transform-origin: 0 0%;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90deg);
    -o-transform-origin: 0 100%;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: 0 100%;
    transform: rotate(90deg);
    transform-origin: 0 100%;
 ...