JSFiddle - React, Tailwind, and code Playground

by sylvain castel

HTML

<article>
    <section>
        <p>Football</p>
    </section>
    <aside>
    </aside>
</article>

<article>
    <section>
        <p>Football Player</p>
    </section>
    <aside>
    </aside>
</article>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic);

article, aside {
    font-size: 12px;
    height: 30px;
    width:auto;
}

article {
    display: inline-block;
    font-family: Arial;
    position:relative;
    margin-left: 25px;
    margin-top: 10px;
}
aside {
width:100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
border-width: 4px;
border-color: red;
background-color: #f5f5f5;
border: 3px solid #04B552;
border-radius: 3px;
/* border-bottom: 1px solid #c9c9c9; */
transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
-moz-transform: skew(-10deg, 0deg);
-o-transform: skew(-10deg, 0deg);
-ms-transform: skew(-10deg, 0deg);
-webkit-backface-visibility: hidden;
}

section {
    color: #323d50;
    height: 30px;
    margin-left:0px;
    display: block;
}
section p {
    font-family:'lato';
    font-size:15px;
    line-height:15px;
    font-weight:normal;
    margin:10px 15px;
}

time {
    font-size: 12px;
}