JSFiddle - React, Tailwind, and code Playground

by jononomo

HTML

<div class='main-div'>
    <div class='header-div'><input type='checkbox' id='slide-it-button'> Slide It</input></div>
    <div class='body-div'> A bunch of stuff here.</div>
    <div class='modal-div'></div>
</div>

CSS

.main-div {
    background-color: lightgray;
    height: 400px;
    width: 400px;
    border: 2px solid black;
}
.header-div {
    background-color: gray;
    height: 40px;
    width: 100%;
    border-bottom: 2px solid black;
    text-align: center;
    font-size: 14px;
}
.body-div {
    val
}
.modal-div {
    height: 300px;
    width: 300px;
    background-color: lightblue;
    
}

JavaScript

$('#slide-it-button').onClick(function() {
    $().slideDown
});