JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<div align='center' style='width: 100%'>
  <div class='container'>
    <div class='year_container'>
			<div class='description'>{2018}</div>
      <div class='tl_btn'> ◄ </div>
			<div class='monthes'>
			<div class='month'>
				<div class='description'>{февраль}</div>
			</div>
			<div class='month' hidden='false'>
				<div class='description'>{март}</div>
			</div>
			</div>        
      <div class='tl_btn'> ► </div>
    </div>
  </div>
</div>
 
<br><br>
<div align='center' style='width: 100%'>
  <div class='container'>
    <div class='year_container'>
			<div class='description'>{2018}</div>
      <div class='tl_btn'> ◄ </div>
			<div class='monthes'>
				<div class='month'>
					<div class='description'>{январь}</div>
					<div class='days'>
						<div class='day'><div class='hint'>1</div></div>
						<div class='day'><div class='hint'>2</div></div>
						<div class='day'><div class='hint'>3</div></div>
						<div class='day'><div class='hint'>...</div></div>
						<div class='day'><div class='hint'>31</div></div>
					</div>
				</div>
				<div class='month'>
					<div class='description'>{февраль}</div>
					<div class='days'>
						<div class='day'><div class='hint'>1</div></div>
						<div class='day'><div class='hint'>...</div></div>
						<div class='day'><div class='hint'>28</div></div>
					</div>
				</div>
				<div class='month'>
					<div class='description'>{март}</div>
					<div class='days'>
						<div class='day'><div class='hint'>1</div></div>
						<div class='day'><div class='hint'>...</div></div>
						<div class='day'><div class='hint'>31</div></div>
					</div>
				</div>			
			</div>        
      <div class='tl_btn'> ► </div>
    </div>
  </div>
</div>

CSS

/*
CSS GRID help:
https://tuhub.ru/posts/css-grid-complete-guide
*/
:root {
  /*переменные */
  --clr_border: rgba(255, 255, 255, 1);
  --clr_unselect_bg: rgba(150, 150, 150, 0.5);
  --clr_select_bg: red;
  --clr_hover_bg: rgba(255, 0, 0, 0.5);
  --clr_dbg: green;
  /*
var(--clr_border);
var(--clr_unselect_bg);
var(--clr_select_bg);
var(--clr_hover_bg);
	получить значение
	var(--color-blue);
	*/
}

.container {
  border: solid 1px black;
  display: grid;
	grid-template-columns: 100px auto; /*год 100пх, мясяца с кнопками остальное*/
	grid-column-gap: 2px;/**/
  width: 100%;
  height: 20px;
}

.description{
	grid-row-start: 1;
  grid-row-end: 1;
  text-align: center;
  /*border: solid 2px var(--clr_border);/**/
  background: var(--clr_unselect_bg);
  height: 100%/*20px;/**/	
}

.year_container{
	display:  grid;
	grid-template-columns: 100px 20px 100% 20px; /*год 100пх, мясяца с кнопками остальное*/
	grid-column-gap: 2px;/**/
	grid-row-start: 1;
  grid-row-end: 1;
	/*border: solid 1px green;/**/
  /*border: solid 2px var(--clr_border);*/
  /**/
  height: 20px;
  width: 100%;
}

/*кнопка*/
.year_container .tl_btn {
  cursor: pointer;
  text-align: center;
  grid-row-start: 1;
  grid-row-end: 1;
  background: var(--clr_unselect_bg);
}
/*наведение на кнопку*/
.year_container .tl_btn:hover {
  background: var(--clr_hover_bg);
}
 
 .year_container .monthes{
 	border: solid 1px green;
 	display: inline-grid;
	position: absolute;
	grid-column-gap: 2px;/**/
	grid-row-start: 1;
  grid-row-end: 1;
	position: relative;
	width: 100%;
 }
 
 .year_container .monthes .month{
 	 	display: inline-grid;
		grid-template-columns: 100px auto;
		grid-row-start: 1;
		grid-row-end: 1;
 }
 

.month .day:hover .hint {
  visibility: visible;
}

/*вета элементов с атрибутами status и select*/

[status="1"] {
  background: rgba(250, 120, 120, 0.5);
}

[status="2"] {
  background: rgba(150, 150, 150, 0.5);
}

[status="3"] {
  background: orange;
}

[select="true"] {
  background:...