JSFiddle - React, Tailwind, and code Playground

by Tim Ko

HTML

<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="creative">creative 1</div>
        <div class="creative">creative 2</div>
        <div class="creative">creative 3</div>
    </div>
</article>

CSS

.creatives {
    background-color: #CCCCCC;
    width: 300px;
    border-radius: 2px;
    border: 1px solid #AAAAAA;
    padding: 10px 0px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.creatives-header {
    padding-left: 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;
    background-color: white;
    overflow: hidden;
}
.creative {
    height: 0px;
    padding: 0px 5px;
    margin: 0px 5px;
    margin-bottom: 0px;
    transition: padding 0.2s, height 0.2s;
    -moz-transition: padding 0.2s, height 0.2s; /* Firefox 4 */
    -webkit-transition: padding 0.2s, height 0.2s; /* Safari and Chrome */
    -o-transition: padding 0.2s, height 0.2s; /* Opera */
}
.creatives-checkbox:checked ~ .creatives-list .creative {
    height: 20px;
    padding: 5px;
    margin: 5px;
}