JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<div>
    <div class="header">Monday</div>
    <div class="header">Tuesday</div>
    <div class="header">Wednesday</div>
    <div class="header">Thursday</div>
    <div class="header">Friday</div>
</div>
<div>
    <div class="inlineDiv">1</div>
    <div class="inlineDiv inlineInnerDiv">2</div>
    <div class="inlineDiv">3</div>
    <div class="inlineDiv">4</div>
    <div class="inlineDiv">5</div>
</div>
<div>
    <div class="inlineDiv">
      6
    </div>
    <div class="inlineDiv">
      7
    </div>
    <div class="inlineDiv">
      8
    </div>
    <div class="inlineDiv">
      9
    </div>
    <div class="inlineDiv">
      10
    </div>
</div>

CSS

body{
  font-size: 12px;
  color: #868686;
}

.inlineDiv{
  display: inline-block;
  border: 1px solid black;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px 5px 5px;
  width: 100px;
  height: 100px;
  margin-right: -4px;
}

.inlineInnerDiv {

}

.inlineDiv:hover{
  background-color: rgba(0, 0, 0, 0.0470588235294118);
}

.header {
  width: 110px;
  height: 25px;
   border: 1px solid black;
  display: inline-block;
  margin-right: -4px;
  margin-bottom: -1px;
  text-align: center;
  padding: 4px 0px 0px 0px;
}