JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<article>
    <h1>Article title</h1>
    <div class="body">
        <img src="http://vanimg.s3.amazonaws.com/portrait-16.jpg" />
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
</article>

CSS

article {
    background: #eee;
}

h1 {
    padding: 3px 10px;
    background: #444;
    font: bold 2.4em cambria;
    color: #fff;   
}

.body {
    overflow: hidden; /*contain float*/
    padding: 10px;
}

img {
    float: left;
    max-width: 24%;
}

p {
    font: 0.9em/1.4em helvetica, arial, sans-serif;
    margin-left: 27%;
    color: #444;
}