JSFiddle - React, Tailwind, and code Playground

by stvnmntjy

HTML

<div class="alpha bb br bt">
    <div class="tree bl gray"></div>
    <div class="calendar bl">
        <div class="calCtrls bb gray"></div>
        <div class="month">
            <div>
                <div class="day dayWidth bb">SUN</div>
                <div class="day dayWidth bb bl">MON</div>
                <div class="day dayWidth bb bl">TUE</div>
                <div class="day dayWidth bb bl">WED</div>
                <div class="day dayWidth bb bl">THU</div>
                <div class="day dayWidth bb bl">FRI</div>
                <div class="day dayWidth bb bl">SAT</div>
            </div>
            <div>
                <div>
                    <div class="date dayWidth bb">
                        <div class="number bb"></div>
                        <div class="text yellow"> <span>12345678910</span>

                            <br /> <span>12345678910</span>

                            <br /> <span>12345678910</span>

                            <br /> <span>12345678910</span>

                            <br /> <span>12345678910</span>

                            <br /> <span>12345678910</span>

                            <br />
                        </div>
                    </div>
                    <div class="date dayWidth bb bl">
                        <div class="number bb"></div>
                        <div class="text"></div>
                    </div>
                    <div class="date dayWidth bb bl">
                        <div class="number bb"></div>
                        <div class="text"></div>
                    </div>
                    <div class="date dayWidth bb bl">
                        <div class="number bb"></div>
                        <div class="text"></div>
                    </div>
                    <div class="date dayWidth bb bl">
                        <div class="number bb"></div>
                        <div class="text"></div>
                    </div>
                    <div...

CSS

.bb {
    border-bottom: 1px solid black;
}
.bl {
javascript:void(0);    border-left: 1px solid black;
}
.br {
    border-right: 1px solid black;
}
.bt {
    border-top: 1px solid black;
}
.gray {
    background-color: gray;
}
.alpha {
    height: 768px;
    overflow: hidden;
    width: 1024px;
}
.alpha, .alpha * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.alpha > div {
    float: left;
}
.tree {
    height: 100%;
    width: 30%;
}
.calendar {
    height: 100%;
    width: 70%;
}
.calCtrls {
    height: 35px;
    width: 100%;
}
.month {
    height: 733px;
    width: 100%;
}
.dayWidth {
    width: 14.28%;
}
.day {
    float: left;
    height: 20px;
    text-align: center;
}
.date {
    float: left;
    height: 142px;
}
.number {
    height: 20px;
    width: 100%;
}
.text {
    height: 121px;
    text-align: center;
    width: 100%;
}
.yellow {
    background-color: yellow;
}