JSFiddle - React, Tailwind, and code Playground

by Daniel_Knights

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<div class="container">
  <div class="parent">
    <i class="fa fa-eye" id="single-item-eye"></i>
  </div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

i {
  cursor: pointer;
  transition: transform 0.2s;
}

i:hover {
  transform: scale(1.2);
}