JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<input type="checkbox" id="sub" class="check" />
<label for="sub">Year Goes Here</label>
<div id="month" class="sub">
    <div id="monthheader" class="header">
        <p>month Goes Here</p>
    </div>
    <div id="day">
        <div id="dayheader" class="header">
            <p>day Goes Here</p>
        </div>
        <div id="dayinfo">
            <p>day info goes here</p>
        </div>
    </div>
</div>

CSS

.header {
    width: 100%;
    height: 25px;
    outline: 1px solid #000;
    outline-offset: -1px;
}
#year {
    width:800px;
    height: auto;
    background-color: #666;
    margin:0px auto;
}
#month {
    width:750px;
    height: auto;
    background-color: #FFF;
    margin-left:50px;
}
#day {
    width:700px;
    height: auto;
    background-color: #09F;
    margin-left:50px;
}
#dayinfo {
    width:675px;
    height: auto;
    background-color:#0CF;
    margin-left:25px;
}
.upper {
    height:50px;
    width:800px;
    background-color:#F00;
}
.sub {
    height:50px;
    width:800px;
    background-color:#0F3;
}

.sub {
    display: none;
}
input:checked ~ .sub {
    display: block;
}