JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<ul class="fullwidth">

    <li class="fullwidth_item">
        <div class="fullwidth_item-background"></div>
        <div class="fullwidth_item-content">
            <div class="teaser">
                <h3>Title here</h3>
                <p>Blah blah blah blah</p>
            </div>
            <ul class="fullwidth_item-list">
                <li>Here's a thing.</li>
                <li>Here's another thing.</li>
                <li>So many things.</li>
                <li>Thing thing thing thing thing thing thing thing thing thing thing thing.</li>
            </ul>
        </div>
    </li>

    <li class="fullwidth_item">
        <div class="fullwidth_item-background"></div>
        <div class="fullwidth_item-content">
            <div class="teaser">
                <h3>Title here</h3>
                <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
            </div>
            <ul class="fullwidth_item-list">
                <li>This one's got more things.</li>
                <li>Check out its things.</li>
                <li>Thing-fest.</li>
                <li>Thingageddon.</li>
                <li>Second to last thing.</li>
                <li>The final thing.</li>
            </ul>
        </div>
    </li>

    <li class="fullwidth_item">
        <div class="fullwidth_item-background"></div>
        <div class="fullwidth_item-content">
            <div class="teaser">
                <h3>Title here</h3>
                <p>Blah blah blah blah blah blah blah blah</p>
            </div>
            <ul class="fullwidth_item-list">
                <li>Less things.</li>
                <li>Barely a thing.</li>
            </ul>
        </div>
    </li>

</ul>

SCSS

body {
    padding: 0; margin: 0;
}

.fullwidth {
    display: table;
    height: 100%;
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}

.fullwidth_item {
    display: table-cell;
    height: 100%;
    overflow: hidden;
    position: relative;
    &:nth-child(1){
        background: red;
    }
    &:nth-child(2){
        background: yellow;
    }
    &:nth-child(3){
        background: blue;
    }
    &:hover .fullwidth_item-content {
        transform: translateY(70%);
    }
}

.fullwidth_item-background {
    background: gray;
}

.fullwidth_item-content {
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    height: 100%;
    transform: translateY(100%);
    transition: transform 300ms ease-in-out;
    &.open,
    &.open:hover {
        transform: translateY(0);
    }
}

JavaScript

$('.fullwidth').on('click', '.fullwidth_item-content', function(){

    $(this).toggleClass('open');

});