JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"></script>
<div class='panel'>
    <div class='picture'></div>
    <div class='desc'>
        <h1>PERSICO DOSIMO</h1>
        <p>ciao csdkldjs cds cjdoscj dsckljc skcdjs cdskljc dcs csdjc dscds cjdslcsd cdsklc djscdscjds cdslcds jcsdcjdscdsc</p>
    </div>
    <div class='year'><h1>2012</h1></div>
</div>

CSS

div {
    font-family: 'Open Sans', sans-serif;
}
.panel {
    border: solid 1px black;
    height: 200px;
    width: 800px;
    border-radius: 5px;
}
.desc {
    height: 100%;
    width: 50%;
    float:left;
    font-size: 20px;
    padding-left: 10px;
    font-weight: 300;
    background-image:url('http://pixelsdaily.com/wp-content/uploads/2011/08/preview2.png');
    background-size: 100%;
}
.desc  h1{
    font-weight: 400;
}
.picture {
    border-radius: 5px 0 0 5px;
    height: 100%;
    width: 30%;
    float:left;
    background-image: url('http://www.emme4srl.it/imgNoCrop/900/600/1-1/mediaDB/impianto-cabina-elettrica.jpg');
    background-size:300px;
    border-right: 1px solid black;
}
.year {
    position:relative;
    border-radius: 0 5px 5px 0;
    height: 100%;
    width: 18%;
    float:left;
    border-left: 1px solid black;
    background-color:orange;
}

.year h1 {
    position:absolute;
    top: 15%;
    left: 6%;
    font-size: 60px;
    color:white;
    font-weight: 100;
}