JSFiddle - React, Tailwind, and code Playground

HTML

<div class="month-column">
    <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
      <div class="weekday-name-column">Fr</div>
      <div class="date-column">01</div>
      <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
      <div class="event H  1 2 3 4"><span>Event 2</span></div>
    </div>
    <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
      <div class="weekday-name-column">Sa</div>
      <div class="date-column">02</div>
      <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
      <div class="event H  1 2 3 4"><span>Event 2</span></div>
      <div class="event H  1 2 3 4"><span>Event 3</span></div>
    </div>
</div>

CSS

.day-row>div {
	line-height: 18px;
	text-align: center;
	margin: -2px -1px;
	border: 2px solid black;
	font-size: 11px;
	color: black;
}

.day-row>div:first-child {
	margin-left: -2px;
}

.day-row>div:last-child {
	margin-right: -2px;
}

.day-row {
	background-color: #CCDFE0;
	margin: -2px;
	border: 2px solid black;
	background-color: white;
	display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.releasecalendar-container {
	margin: 0 auto;
	padding: 25px;
	max-width: 1500px;
}

.month-column {
	padding: 0;
	margin: -2px -1px;
	border: 2px solid black;
}

.day-sunday>.weekday-name-column,.day-sunday>.date-column {
	background-color: #F44336;
	color: white;
}

.event {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	color: white;
	font-weight: bold;
}

.event:hover {
	flex: 10;
}

.weekday-name-column,.date-column {
	width: 22px;
}

.FZ {
	background-color: #0098c3;
}

.FZ:hover {
	color: #0098c3;
	background-color: #11caff;
}

.H {
	color: black;
	background-color: #FFF;
}

.H:hover {
	background-color: #BBB;
}