JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div class="wrapper">
    <div class="el" style="top:0px">Element 1</div>
    <div class="el" style="top:80px">Element 2</div>
    <div class="el fw" style="top:130px">Element 3</div>
</div>

CSS

html, body, .wrapper {
    height: 100%;
}

body {
    overflow-x: hidden;
    margin: 0;
}

.wrapper {
    width: 600px;
    margin: 0 auto;
    background: #EFEFEF;
    position:relative;
}

.el {
    padding: .5em;
    background: deepskyblue;
    position:absolute;
    width:100%;
    box-sizing:border-box;
}

.fw {
    background: tomato;
    position: relative;
}

.fw:after,
.fw:before {
    background: inherit;
    position: absolute;
    content: '';
    top: 0;
    width: 100%;
    height: 100%;
    right: 100%;
}

.fw:after {
    left: 100%;
}