JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<div class="article-wrapper">
    <article class="article">
        <span class="author"><a href="#">test 1</a></span>
        <h3><a href="#">Lorem onsectetur adipisicing elit.</a></h3>
    </article>
    <article class="article">
        <span class="author"><a href="#">test 2</a></span>
        <h3>
            <a href="#">Lorem ipsum dolor.</a>
        </h3>                        
    </article>
    <article class="article">
        <span class="author"><a href="#">test 3</a></span>
        <h3><a href="#">Lorem ipsum dolor sit amet, consectetur consectetur.</a></h3>
    </article>
</div>

CSS

body {
    padding: 20px;
}
.article-wrapper {
    width: 458px;
    background: #ffd100;
}
.article {
    background: #999;
    border: solid #000;
    border-width: 0 2px 0 0;
    display: inline-block;
    margin-right: 18px;
    padding: 0 10px 12px 0;
    position: relative;
    width: 126px;
    vertical-align: top;
}
.article + .article + .article {
    margin-right: 0;
}
a {
    color: #000;
    text-decoration: none;
}