JSFiddle - React, Tailwind, and code Playground

by Tim Ko

HTML

<div class="test">SCROLL DOWN</div>
<article class="creatives">
    <input type="checkbox" class="creatives-checkbox" id="creatives-checkbox"/>
    <label class="creatives-header" for="creatives-checkbox"></label>
    <div class="creatives-list">
        <div class="creatives-close"><label for="creatives-checkbox">X</label></div>
        <div class="creative">creative 1</div>
        <div class="creative">creative 2</div>
        <div class="creative">creative 3</div>
    </div>
    <label class="button-blocker" for="creatives-checkbox"></label>
</article>
<div class="test">SCROLL UP</div>

CSS

.creatives {
    background-color: white;
    width: 300px;
    padding: 10px;
}
.creatives-checkbox {
    display: none;
}
.creatives-checkbox:not(:checked) ~ .creatives-header:before {
    content: "Show Creatives";
}
.creatives-checkbox:checked ~ .creatives-header:before {
    content: "Hide Creatives";
}
.creatives-list {
    display: block;
    position: fixed;
    top: 10px;
    left: 60px;
    background-color: lightgray;
    overflow: hidden;
    transition: top 0.2s, left 0.2s;
    -moz-transition: top 0.2s, left 0.2s; /* Firefox 4 */
    -webkit-transition: top 0.2s, left 0.2s; /* Safari and Chrome */
    -o-transition: top 0.2s, left 0.2s; /* Opera */
    z-index: 20;
}
.creative, .creatives-close {
    width: 0px;
    height: 0px;
    padding: 0px 5px;
    margin: 0px 5px;
    margin-bottom: 0px;
    transition: padding 0.2s, height 0.2s, width 0.2s;
    -moz-transition: padding 0.2s, height 0.2s, width 0.2s; /* Firefox 4 */
    -webkit-transition: padding 0.2s, height 0.2s, width 0.2s; /* Safari and Chrome */
    -o-transition: padding 0.2s, height 0.2s, width 0.2s; /* Opera */
}
.creatives-close {
    position: absolute;
    right: 5px;
}
.creatives-checkbox:checked ~ .button-blocker {
    display: block;
}
.creatives-checkbox:checked ~ .creatives-list {
    top: 0px;
    left: 0px;
}
.creatives-checkbox:checked ~ .creatives-list .creative {    
    height: 20px;
    width: 150px;
    padding: 5px;
    margin: 5px;
}
.creatives-checkbox:checked ~ .creatives-list .creative-close {
    height: 10px;
    width: 150px;
    margin: 5px;
}
.button-blocker {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.1;
    display: none;
    z-index: 10;
}
.test {
    position: relative;
    height: 500px;
}