JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<section class="flex col" id="cover">
            <article class="cover-article flex c-pointer" id="main-cover-article">
                <div class="cover-article-details flex col">
                    <h3>
                        INSIGHTS
                    </h3>
                    <h2>
                        Cryptocurrency startup NEM discloses layoffs and wasteful budget
                    </h2>
                    <div class="cover-byline">
                        <span class="author">by <a href="#">David Canellis</a> </span>
                        <span class="time"><i class="far fa-clock"></i> 4 hours ago</span>
                        <span class="share"><i class="fas fa-share-alt"></i> 13</span>
                    </div>
                </div>
            </article>
            <article class="cover-article flex c-pointer" id="cover-top-right">
                <div class="cover-article-details flex col">
                    <h3>
                        INSIGHTS
                    </h3>
                    <h2>
                        People are obsessed with buying coffee with cryptocurrency – here’s why
                    </h2>
                    <div class="cover-byline">
                        <span class="author">by <a href="#">Matthew Beedham</a> </span>
                        <span class="time"><i class="far fa-clock"></i> 4 hours ago</span>
                        <span class="share"><i class="fas fa-share-alt"></i> 11</span>
                    </div>
                </div>
            </article>
            <article class="cover-article flex c-pointer" id="cover-bot-right">
                <div class="cover-article-details flex col">
                    <h3>
                        INSIGHTS
                    </h3>
                    <h2>
                        Review: Cambridge Audio’s Yoyo (L) is a hi-fi Sonos alternative with Google Cast
                    </h2>
                    <div class="cover-byline">
                    ...

CSS

.flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
}

.col {
    flex-direction: column;
}
.jc-sb {
    justify-content: space-between;
}

.jc-c {
    justify-content: center;
}

.jc-sa {
    justify-content: space-around;
}

.c-pointer {
    cursor: pointer;
}



#main-cover-article {
    background-image: url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/01/nembear-796x448.jpg");
}

#cover-top-right {
    background-image: url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/01/coffee-bitcoin-cryptocurrency-blockchain-charlie-lee-litecoin-marketing-dominici-frisby-garrick-hileman-796x448.jpg");
}

#cover-bot-right {
    background-image: url("https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2019/01/Cambridge-Audio-Yoyo-L-4-of-4-796x417.jpg");
}

#cover-top-right,
#cover-bot-right {
    margin-top: 0.45rem;
}
.cover-article {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 33.33%;
    min-height: 110px;
    align-items: flex-end;
    margin-right: 0.4rem;
}

.cover-article-details {
    background-color:rgba(0, 0, 0, 0.5);
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    color: white;
    padding-left: 0.8em;
    padding-bottom: 0.8em;
    justify-content: flex-end;
}

.cover-article * {
    margin-top: 0.2rem;
}

.cover-article-details h2 {
    font-size: 1.25rem; /* 20 / 16 */
    font-weight: 400;
}

.cover-article-details h3 {
    font-size: 0.875rem; /* 14 / 16 */
    font-weight: 300;
}

.cover-byline {
    font-size: 0.75rem; /* 12 / 16 */
    font-weight: 300;
    color: hsla(0, 0%, 100%, .6);
    line-height: 1rem;
}

.cover-byline span {
    margin-right: 0.7rem;
}

.cover-byline i {
    font-size: 0.9rem;
}

.cover-byline a {
    color: hsla(0, 0%, 100%, .6);
}

.cover-byline a:hover {
    color: #fff;
} 

/******  Width >= 786px < 1024 ******/

@media only screen and (min-width: 768px) {
    #cover {
        height: 530px;
        flex-direction: row;
       ...