JSFiddle - React, Tailwind, and code Playground
by Abdul Ahmad
HTML
<div class='calendar-box'>
<div class='calendar'>
<div class='row'>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
<article>
</article>
</div>
</div>
</div>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
<article>
</article>
</div>
</div>
</div>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
<article>
</article>
</div>
</div>
</div>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
<article>
</article>
</div>
</div>
</div>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
<article>
</article>
</div>
</div>
</div>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
<article>
</article>
</div>
</div>
</div>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
<article>
</article>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
<article>
</article>
</div>
</div>
</div>
<div class='cell'>
<div class='box'>
<div class='content'>
<header>
</header>
...SCSS
.calendar-box {
display: inline-block;
.calendar {
display: flex;
flex-direction: column;
align-items: stretch;
background-color: white;
.row {
.cell {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
float: left;
background-color: #ddd;
.box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 99px;
height: 99px;
background-color: white;
.content {
width: 95px;
height: 95px;
header {
height: 40%;
background-color: #eee;
}
article {
height: 60%;
}
}
.content:hover {
background-color: #eee;
}
.content:hover header {
background-color: #ddd;
}
} /*box end*/
}/*cell end*/
}
}
}