JSFiddle - React, Tailwind, and code Playground

by georgegilliland

HTML

<div id="article-container">
        
        <div class="card-container">
            <div class="card">
                <div class="content">
                    <div class="thumbnail">
                        <img src="https://net-storage.tccstatic.com/storage/tuttojuve.com/img_notizie/thumb3/ad/ad1fbe7ed9bbc640623f1122d593bcb1-64940-8087c39faad72121becb6d1778778c8e.jpeg" />
                    </div>
                    <div class="text">
                        <div class="title"><a href="https://www.tuttojuve.com/altre-notizie/guardiola-cancelo-e-arrivato-due-giorni-fa-non-sara-titolare-480659">Guardiola: &#34;Cancelo è arrivato due giorni fa, non sarà titolare&#34; - Tutto Juve</a>
                        </div>
                        <div class="meta">
                            <div>Tuttojuve.com </div>
                            <div class="date-text">
                                
                                2019 08 09
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card-container">
            <div class="card">
                <div class="content">
                    <div class="thumbnail">
                        <img src="http://st.snimg.com/image/logo/sn-social.png" />
                    </div>
                    <div class="text">
                        <div class="title"><a href="https://www.goal.com/id/berita/hasil-liga-1-2019-bali-united-vs-semen-padang/1p9bb0efaz25e14ctmeaykmvb2">Hasil Liga 1 2019: Bali United vs Semen Padang - Goal.com</a>
                        </div>
                        <div class="meta">
                            <div>Goal.com </div>
                            <div class="date-text">
                                
                                2019 08 09
                            </div>
                        </div>
                    </div>
               ...

CSS

#article-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 50px 15px;
    margin: 0 5%;
}

#page-title {
    color: #FFFFFF;
    font-family: 'proxima-nova-soft', sans-serif;
    font-weight: bold;
    font-size: 14vw;
    margin: 0 71px;
    height: 100vh;
}

.content {
    position: relative;
    z-index: 1;
    display: block;
    background: #FFFFFF;
    min-width: 270px;
    height: 430px;
    box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.20);
    transition: all 0.3s linear 0s;
    border-radius: 25px 25px 25px 25px
}

.content:hover,
.hover {
    box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}

.content:hover .thumbnail img {
    transform: scale(1.1);
    opacity: .6;
}

.content .thumbnail {
    height: 100%;
    overflow: hidden;
    border-radius: 25px 25px 25px 25px
}

.content .thumbnail .date {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    background: #e74c3c;
    width: 55px;
    height: 55px;
    padding: 12.5px 0;
    color: #FFFFFF;
    font-weight: 400;
    text-align: center;
    box-sizing: border-box;
}

.content .thumbnail .date .date-text {
    font-size: 18px;
}

.content .thumbnail img {
    display: block;
    width: 120%;
    transition: all 0.3s linear 0s;
}

.content .text {
    position: absolute;
    bottom: 0;
    background: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
    border-radius: 0 0 25px 25px;
}

.content .text .title {
    margin: 0;
    padding: 30px;
    color: #333333;
    font-size: 26px;
    font-weight: 700;
}

.content .text .meta {
    margin: 0;
    padding: 0 30px 30px 30px;
    color: #333333;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    border-radius: 0 0 25px 25px
}

.content .title a {
    text-decoration: none;
    color: #333333;
}

.content .title a:hover {
    text-decoration:...

JavaScript

let arr = [{
            title:
                'Deadline day: Dybala, Coutinho & Premier League transfers that could happen before end of the summer window - Goal.com',
            date: '2019-08-07T13:29:00Z',
            image: 'http://st.snimg.com/image/logo/sn-social.png',
            description:
                'AC Milan have completed the signing of Leo Duarte from Flamengo in a deal reportedly worth €11 million (£10.2m/$12.3m).',
            link:
                'https://www.goal.com/en-gb/lists/deadline-day-dybala-coutinho-premier-league-transfers-happen/68rpu0erk0e81pm2anfv2ku16',
            source: {
                id: null, name: 'Profutbal.sk'
            }
        },
        {
            title:
                'Deadline day: Dybala, Coutinho & Premier League transfers that could happen before end of the summer window - Goal.com',
            date: '2019-08-07T13:29:00Z',
            image: 'http://st.snimg.com/image/logo/sn-social.png',
            description:
                'AC Milan have completed the signing of Leo Duarte from Flamengo in a deal reportedly worth €11 million (£10.2m/$12.3m).',
            link:
                'https://www.goal.com/en-gb/lists/deadline-day-dybala-coutinho-premier-league-transfers-happen/68rpu0erk0e81pm2anfv2ku16',
            source: {
                id: null, name: 'Profutbal.sk'
            }
        },
        {
            title:
                'Deadline day: Dybala, Coutinho & Premier League transfers that could happen before end of the summer window - Goal.com',
            date: '2019-08-07T13:29:00Z',
            image: 'http://st.snimg.com/image/logo/sn-social.png',
            description:
                'AC Milan have completed the signing of Leo Duarte from Flamengo in a deal reportedly worth €11 million (£10.2m/$12.3m).',
            link:
                'https://www.goal.com/en-gb/lists/deadline-day-dybala-coutinho-premier-league-transfers-happen/68rpu0erk0e81pm2anfv2ku16',
           ...