JSFiddle - React, Tailwind, and code Playground

by Andrew Poes

HTML

<script src="http://oridomi.com/oridomi.min.js"></script>
<div class="page">
    <div class="content">
        <h1>Username</h1>
        <p>Description goes here</p>
    </div>
</div>

CSS

html, body { height: 100%; margin: 0; padding: 0; }

.page {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    width: 75vw;
    height: 100vh;
    box-sizing: border-box;
}

.page .content {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: cyan;
    border: 4px solid black;
    box-sizing: border-box;
}

.under {
    pointer-events: none;
}

.over {
    position: relative;
    z-index: 1;
}

.col {
    float: left;
    width: 20%;
    height: 100%;
    border-right: 1px solid #000;
}

.over > div {
    border-color: red;
    opacity: 0.5;
}

JavaScript

var overlay = new OriDomi('.content', {
    vPanels: 5,
    ripple: false
});