JSFiddle - React, Tailwind, and code Playground

by robknight

HTML

<div class="container">
    <div class="item takeover">
        <img src="http://placehold.it/480x260/00457c/00457f&text=image" alt="">
        <div class="body">
             <h1>This is the headline</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi laboriosam, asperiores cupiditate adipisci placeat! Enim voluptatibus eveniet perferendis doloremque? Officiis rerum sint, magnam ab saepe pariatur, beatae cum dolorem incidunt.</p>
        </div>
    </div>
    <div class="item">
        <img src="http://placehold.it/480x260/00457c/00457f&text=image" alt="">
        <div class="body">
            <h1>This is the headline</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa facere inventore, veritatis eaque ea laudantium earum, exercitationem obcaecati eos vel amet maxime illo ut architecto doloribus voluptate qui beatae veniam.</p>
        </div>
    </div>
    <div class="item">
        <img src="http://placehold.it/480x260/00457c/00457f&text=image" alt="">
        <div class="body">
            <h1>This is the headline</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia consequuntur tempora nam deserunt ab. Cumqu e, iure fuga ratione iste. Repellendus dolores amet at laboriosam deleniti reprehenderit autem id, incidunt architecto?</p>
        </div>
    </div>
    <div class="item">
        <img src="http://placehold.it/480x260/00457c/00457f&text=image" alt="">
        <div class="body">
            <h1>This is the headline</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos nobis labore earum! Optio pariatur commodi molestiae eos tempora, corporis sit tempore, cumque laudantium eligendi consequuntur nam enim ex porro omnis!</p>
        </div>
    </div>
    <div class="item">
        <img src="http://placehold.it/480x260/00457c/00457f&text=image" alt="">
        <div class="body">
            <h1>This is the headline</h1>

        ...

SCSS

* {
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue";
    font-weight:300;
    font-size: 16px;
    line-height: 1.3;    
}

h1 {
    margin:0;
}

p {
    margin:0.10em 0;
}

.container {
    max-width:1080px;
    margin:0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
    
    .item {
        overflow: hidden;
        background-color: rgba(0,0,0,0.10);
        padding: 0.25em;
        min-width: 320px;
        flex-basis:33%;
        flex-grow:1; 
        position: relative;
        .body {
            color: #fff;
            text-shadow:1px 1px 4px rgba(0,0,0,0.25);
            padding:1em 1em;
            position:absolute;
            bottom:0.25em;
            max-width: 480px;
        }
        img {
            width:100%;
            height:auto;
        }
        &:first-child,
        &.biggen {
            border-color: aqua;
            flex-basis: 66%;    
            flex-shrink: 0;
        }
        &.takeover {
            border-color: yellow;
            flex-basis: 100%;    
        }
        &:last-child {
            max-width:100%;
        }
     }
}