caribbean-reservation-react/src/App.css

Basically a modular grid which allows you to place tags over it. Created in order to manage reservations for a hotel in the caribbean

.row-cell{
  
  border: 1px solid #eaeaea;
  color: hsl(0, 0%, 0%);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  position: relative;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background: white;
}

.caribbean-row{
  line-height: 1;
}

.tag{
  display: flex;
  z-index: 999;
  position: absolute;

  color: rgb(255, 255, 255);
  background: linear-gradient(rgb(198, 92, 187) 0%, rgb(173, 22, 158) 33%, rgb(173, 22, 158) 63%, rgb(121, 15, 111) 100%);
}

.tag-content{
  text-align: center; position: absolute; white-space: nowrap; top: 0px; overflow: hidden; user-select: none; 
}
.cant-select{
  pointer-events: none;
}
.a-bit-tight{
  background:blue;
}