JSFiddle - React, Tailwind, and code Playground

by Marius Craciunoiu

HTML

<div class="media">
    <div class="media-object">
        <img src="http://placekitten.com/100/100"/>
    </div>
    <div class="media-body">
        <h3>Bender Rodriguez</h3>
        <p>Have you ever tried just turning off the TV, sitting down with your children, and hitting them? Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife holding up? …To shreds, you say. What are their names? Why am I sticky and naked? Did I miss something fun? Ooh, name it after me! We'll go deliver this crate like professionals, and then we'll go home.</p>
    </div>
</div>

CSS

.media,
.media__body {
    overflow: hidden;
}

.media-object {
    float: left;
    margin-right: 20px;
}

.media-object img {
    display: block;
}

.media:before,
.media:after {
    content: " ";
    display: table;
}

.media:after {
    clear: both;
}