JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
    <li>
        <img src="https://placeimg.com/720/404/any" width="740" height="404" />
        <h2>Dit is de eerste titel</h2>
        <p>Lorem ipsum dolor sit amet,i.</p>
        <p><a href="#">Bekijk fragment</a></p>
    </li>
    <li>
        <img src="https://placeimg.com/720/404/any" width="740" height="404" />
        <h2>Dit is de tweede titel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at gravida ex. Sed quis ipsum dignissim, iaculis nibh vehicula, viverra nisi.</p>
    </li>
    <li>
        <img src="https://placeimg.com/720/404/any" width="740" height="404" />
        <h2>Dit is de derde titel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at gravida ex. Sed quis ipsum dignissim, iaculis nibh vehicula, viverra nisi.</p>
    </li>
    <li>
        <img src="https://placeimg.com/720/404/any" width="740" height="404" />    
        <h2>Dit is de vierde titel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at gravida ex. Sed quis ipsum dignissim, iaculis nibh vehicula, viverra nisi.</p>
    </li>
</ul>

CSS

html,
body {
    background-color: #f1f1f1;  
    margin: 0;
    padding: 0;
}

.list {
    list-style: none;
    overflow: hidden;
    
    /* mobile */
    background-color: #fff;
}

.list li {
    padding: 20px;
    margin: 0;
}

.list h2 {
    font-size: 1.1em;
    margin: 0;
    padding: 0;
    
}

.list img {
    height: auto;
    width: 100%;
}

.list p {
    padding: 0;
}

.list li:first-child a {
    background-color: #333;
    border-color: #1f1f1f;
    color: #fafafa;
    display: inline-block;
    border: 1px solid #1f1f1f;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    min-width: 90px;
    padding: 0 10px;
    text-decoration: none;
    width: auto;
    transition: background-color .2s ease-in-out,color .2s ease-in-out;
}

/* mobile */
@media (max-width: 740px) {
    
    .list img {
        max-width: 680px;
        min-width: 100px;
    }

}

/* tablet */
@media (min-width: 741px) and (max-width: 1020px) {
    
    .list {
        background-color: transparent;
        width: 770px;
    }

    .list li {
        background-color: #fff;    
        float: left;
        padding-right: 0;
        width: 230px;
    }

    .list img {
        width: 230px;
    }
    
    /* first item is larger */
    .list li:first-child {
        float: left;
        padding: 20px;
        width: 770px;
    }

    .list li:first-child img {
        width: 730px;
    }

    .list li:last-child {
        padding-right: 20px;
    }
}

/* desktop */
@media (min-width: 1021px) {
    
    .list {
        background-color: transparent;
        width: 970px;
    }

    .list li {
        background-color: #fff;    
        float: left;
        width: 220px;
    }

    .list img {
        width: 220px;
    }
    
    .list p {
        display: none;        
    }

    /* first item is larger */

    .list li:first-child {
        float: left;
        height: 520px;
        margin-right: 20px;
        width: 595px;
    }

    .list li:first-child...