JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<script src="http://oridomi.com/oridomi.min.js"></script>
<div class="under grid">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="over grid">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

CSS

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

.grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.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('.over', {
    vPanels: 5,
    ripple: true
});