JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<i class="icon icon-trash">
  <span class="icon-detail-cap"></span>
  <span class="icon-detail-body"></span>
</i>

CSS

.icon{
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}

.icon-trash .icon-detail-cap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
  -webkit-transition: 0.25s cubic-bezier(0, 0, 0, 1.99);
  transition: 0.25s cubic-bezier(0, 0, 0, 1.99);
}

.icon-trash:hover .icon-detail-cap{
  -webkit-transform-origin-x: 10%;
  transform-origin-x: 10%;
  -webkit-transform-origin-y: 100%;
  transform-origin-y: 100%;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.icon-trash .icon-detail-cap:before{
  content: '';
  position: absolute;
  width: 20%;
  height: 50%;
  top: 0;
  left: 40%;
  border-radius: 40% 40% 0 0;
}

.icon-trash .icon-detail-cap:after{
  content: '';
  position: absolute;
  width: 80%;
  height: 50%;
  top: 50%;
  left: 10%;
}

.icon-trash .icon-detail-body{
  content: '';
  position: absolute;
  width: 70%;
  top:35%;
  left:15%;
  right:0;
  bottom:0;
  border-radius: 0 0 20% 20%;
}


.icon-trash .icon-detail-cap:before,
.icon-trash .icon-detail-cap:after,
.icon-trash .icon-detail-body{
  background: #FF404E;
}