JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<section>
    <article>
        <div class="article-image" style="background-image: url(https://unsplash.imgix.net/photo-1434210330765-8a00109fc773?fit=crop&fm=jpg&h=600&q=75&w=1050);"></div>
        <div class="article-content">
            <div>
                 <h4>Article Title</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque laoreet est, eu faucibus ipsum vulputate nec. In hac habitasse platea dictumst. Aliquam finibus finibus justo. Aliquam aliquet ut velit eu aliquam.</p>
                <a href="#!" class="article-button">Read More</a>

            </div>
        </div>
    </article>
    <article>
        <div class="article-image" style="background-image: url(https://unsplash.imgix.net/photo-1432836431433-925d3cc0a5cd?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
        <div class="article-content">
            <div>
                 <h4>Article Title</h4>

                <p>Sed fringilla ac tellus vitae aliquet. Donec at accumsan mauris, ut malesuada metus. Vivamus ac dignissim nulla. In et arcu et ipsum dignissim viverra. Quisque ultrices massa in mi hendrerit sodales.</p>
                <a href="#!" class="article-button">Read More</a>

            </div>
        </div>
    </article>
    <article>
        <div class="article-image" style="background-image: url(https://unsplash.imgix.net/photo-1433840496881-cbd845929862?fit=crop&fm=jpg&h=700&q=75&w=1050);"></div>
        <div class="article-content">
            <div>
                 <h4>Article Title Too Long</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque laoreet est, eu faucibus ipsum vulputate nec. In hac habitasse platea dictumst. Aliquam finibus finibus justo. Aliquam aliquet ut velit eu aliquam.</p>
                <a href="#!" class="article-button">Read More</a>

            </div>
        </div>
    </article>
    <article>
        <div class="article-image" style="background-image:...

SCSS

@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,900,700|Roboto+Slab:300);

html,
body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    font-family: 'Maven Pro', sans-serif;
    font-size: 16px;
    color: #333;
}

h1,h2,h3,h4,h5,h6{
    margin-top: 0;
}

p{
    margin: 0 0 15px 0;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    &:last-child{
        margin-bottom: 0;
    }
}

*{
    box-sizing: border-box;
}

@mixin clearfix{
    clear: both;
    &:before{
        content: '';
        display: table;
        zoom: 1;
   }
   &:after{
       content: '';
       clear: both;
   }
}

section{
    position: relative;
    @include clearfix;
    & > article{
        float: left;
        width: 66.666%;
        display: table;
        .article-image{
            width: 50%;
            position: relative;
            display: table-cell;
            background-size: auto 100%;
            background-position: center center;
            transition: background-size 300ms;
            -webkit-transition: background-size 300ms;
            -moz-transition: background-size 300ms;
            -ms-transition: background-size 300ms;
            -o-transition: background-size 300ms;
            &:after{
                content: '';
                display: block;
                width: 100%;
                padding-top: 100%;
                background-color: rgba(100, 100, 100, 0.45);
                transition: background-color 300ms;
                -webkit-transition: background-color 300ms;
                -moz-transition: background-color 300ms;
                -ms-transition: background-color 300ms;
                -o-transition: background-color 300ms;
            }
        }
        .article-content{
            background-color: #fff;
            width: 50%;
            position: relative;
            display: table-cell;
            font-size: 1.8vw;
            padding: 1vw;
           ...

JavaScript

/**
 * FEATURED MOSAIC LIST
 */