JSFiddle - React, Tailwind, and code Playground

by Brandon MacKendrick

HTML

<div class="ophelia-aboutMain">
    <div class="ophelia-wideDiv ophelia-leftDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageOne.jpg) no-repeat; background-size:cover"></div>

    <div class="ophelia-shortDiv ophelia-color1">
        <div class="ophelia-aboutText">
            <p>
                ...
            </p>
            <p> 
                ...
            </p>
        </div>
    </div>

    <div class="ophelia-wideDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageOne.jpg) no-repeat; background-size:cover"></div>

    <div class="ophelia-shortDiv ophelia-color1 ophelia-leftDiv">
        <div class="ophelia-aboutText">
            <p>
               ...
            </p>
            <p> 
               ...
            </p>
        </div>
    </div>

    <div class="ophelia-wideDiv ophelia-leftDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageThree.jpg) no-repeat; background-size:cover"></div>

    <div class="ophelia-shortDiv ophelia-color3">
        <div class="ophelia-aboutText">
            <p>
               ...
            </p>
            <p> 
               ...
            </p>
        </div>
    </div>
</div>

CSS

.ophelia-shortDiv{
    width: 37%;
    margin-bottom: 1%;
    display: inline-block;

}

.ophelia-aboutText{
    margin-top: 15%;
    margin-bottom: 15%;
    margin-left: 10%;
    margin-right: 10%;
}

.ophelia-wideDiv{
    width: 62%;
    margin-bottom: 1%;
    min-height: 345px;
    display: inline-block;
}

.cover{
    background-size: cover;
}

.ophelia-leftDiv{
    float: left;
    margin-right: 1%;
}

.ophelia-color1{
    background-color: #e7e7e7;
}

.ophelia-color2{
    background-color: #c5c6cd;
}

.ophelia-color3{
    background-color: #ced6d8;
}

.ophelia-aboutMain{
    margin-bottom: 5%;
    margin-top: 5%;
}