JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<div id="slide">
    <div class="slide bg-alpha"></div>
    <input type="checkbox" class="middle">
    <div class="slide bg-beta"></div>
    <input type="checkbox" class="middle">
    <div class="slide bg-gamma"></div>
    <input type="checkbox" class="middle">
    <div class="slide bg-delta"></div>
</div>

SCSS

#slide {
    position: relative;
}

.slide {
    height: 21em;
    width: 34em;
}

.bg-alpha { background-color: #8c6bc5;}
.bg-beta { background-color: #cc737f; }
.bg-gamma { background-color: #b3d37c; }
.bg-delta { background-color: #85d9ce; }