JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
  <i class="fa fa-arrow-left"></i>
</div>

CSS

.container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
  width: 90%;
  height: 90vh;
}

.container i {
  padding: 20px;
  display: block;
  font-size: 100px;
  transition: all 0.6s ease;
}

.container i:hover {
  transform: rotateZ(-180deg);
}