JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div>
    <div id="container">
        <div style="background:white;">I'm white...</div>
        <div style="background:red;">I'm red...</div>
        <div style="background:blue;">I'm blue)...</div>
    </div>
    <button id="chBtn">change</button>
</div>

SCSS

div#container {
    $slide_height:100px;
    $slide_width:200px;
    position: relative;
    overflow:hidden;
    height: $slide_height;
    width: $slide_width;
    > div {
        position: absolute;
        height: $slide_height;
        width: $slide_width;
        transition: top 0.5s ease-in-out;
        &:first-child {
            top: -$slide_height;
            background:yellow;
        }
        &:nth-child(2) {
            top: 0;
            background: red;
        }
            &:nth-child(3) {
            top: $slide_height;
            background: blue;
        }
    }
}

JavaScript

$(function () {
    $('#chBtn').on('click',
    function (e) {
        $('#container > div:first-child').remove();
        $('#container').append($('<div style="background:green;">I\'m green!!!</div>'));
    });
});