JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    
    <body>
        <div id="wrapper" class="cf">
            <div>
                <a href="#" title="Lorem Ipsum">
                    Lorem ipsum - dolor sit amet<br />sadipscing elitr, sed diam
                </a>
            </div>
            <div>
                <a href="#" title="Lorem Ipsum">
                    Lorem ipsum - dolor sit amet<br />sadipscing elitr, sed diam
                </a>
            </div>
            <div>
                <a href="#" title="Lorem Ipsum">
                    Lorem ipsum - dolor sit amet<br />sadipscing elitr, sed diam
                </a>
            </div>
        </div>
    </body>
</html>

CSS

@charset "utf-8";

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
}

html {
    width: 100% ;
    height: 100% ;
}

/* Clearfix */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}
/* /Clearfix */

#wrapper {
    margin: 10px ;
    border: 1px solid #bbb ;
    background-color: #E6E7E8 ;
}

#wrapper,
#wrapper div {   
    border-radius: 5px ;
}


#wrapper div {
    float: left ;
    opacity: 0.9 ;
    margin: 10px ;
    width: 330px ;
    border: 1px solid #ccc ;
    background-color: #efefef ;
}

#wrapper div:hover {
    opacity: 1 ;
    background-color: #fff ;
}

#wrapper div a::before {
    display: block ;
    content: attr(title) ;
    font-size: 1.3em ;
    color: #3990bd ;
}

#wrapper div a {
    display: block ;
    padding: 10px 10px 10px 90px ;
    height: 70px ;
    text-decoration: none ;
    color: #666 ;
    background-size: 70px ! important ;
}

#wrapper div:nth-child(1) a {
    background: url( 'http://goo.gl/jhTh7' ) no-repeat 10px 10px ;
}

#wrapper div:nth-child(2) a {
    background: url( 'http://goo.gl/ycfuI' ) no-repeat 10px 10px ;
}

#wrapper div:nth-child(3) a {
    background: url( 'http://goo.gl/hETcm' ) no-repeat 10px 10px ;
}