JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="warp">
	</div>
	<div class="sidemenu">

		<a href="#">
			<div class="menuitem1"></div>
		</a>
		<a href="#">
			<div class="menuitem2"></div>
		</a>
		<a href="#">
			<div class="menuitem3"></div>
		</a>
		<a href="#">
			<div class="menuitem4"></div>
		</a>
		<a href="#">
			<div class="menuitem5"></div>
		</a>
		
	</div>
	<div class="bottommenu">
		<a href="" class='botmenuitem1'>
		</a>
		<a href="" class='botmenuitem1'>
		</a>
		<a href="" class='botmenuitem1'>
		</a>
		<a href="" class='botmenuitem1'>
		</a>
		<a href="" class='botmenuitem1'>
		</a>
	</div>
</body>

CSS

body{
	color: #fff;
	font-family: 'MuseoCyrl';
	padding: 0px;
	margin: 0px;
	background: #555;
	background-size: 100%;
	background-repeat: no-repeat;
}

.test2{
	font-family: 'Eurof';
}
.sidemenu{
	width: 90px;
	position: fixed;
	min-height: 470px;
	height: 100%;
	top: 0px;
	background: #333;
}
.warp{
	margin-left: 90px;
	margin-bottom: 91px;

}
.bottommenu{
	width: 100%;
	position:  fixed;
	background:#333;
	height: 61px;
	margin-left: 90px;
	left: 0;bottom: 0;

}
.menuitem1{
	height: 91px;
	transition-duration: 0.25s;
	background-image: url(../img/main.jpg);
}
.menuitem1:hover{
	background-image: url(../img/main_a.jpg);
}
.menuitem2{
	height: 90px;
	transition-duration: 0.25s;
	background-image: url(../img/inquesitor.jpg);
}
.menuitem2:hover{
	background-image: url(../img/inquesitor_a.jpg);
}
.menuitem3{
	height: 90px;
	transition-duration: 0.25s;
	background-image: url(../img/characters.jpg);
}
.menuitem3:hover{
	background-image: url(../img/characters_a.jpg);
}
.menuitem4{
	height: 90px;
	transition-duration: 0.25s;
	background-image: url(../img/book.jpg);
}
.menuitem4:hover{
	background-image: url(../img/book_a.jpg);
}
.menuitem5{
	height: 90px;
	transition-duration: 0.25s;
	background-image: url(../img/tavern.jpg);
}
.menuitem5:hover{
	background-image: url(../img/tavern_a.jpg);
}
.bottommenu{
	width: 100%;
	position:  fixed;
	background-image: url(../img/menu_fon.jpg);
	height: 60px;
	margin-left: 90px;
	left: 0;bottom: 0;
  /* Вот здесь мощь FLEX */
  display: flex;
  flex-direction: row-reverse;
  /* Конец */
}



.botmenuitem1{ 
	background-image: url(https://habrastorage.org/webt/59/df/a3/59dfa31aea294789516208.png);
	height: 60px;
	width: 62px;;
	height: 60px;
	width: 62px;
}