JSFiddle - React, Tailwind, and code Playground

by Helder da Rocha

HTML

<div class="col3 build websites-content">
    <svg class="svg-icon icon-build" width="75px" height="75px">
        <g>
          <g><path fill="#fff" d="M17.5,39.7L28.8,42v13.5l9.5-8.5L49,55.5l4.5-36L17.5,39.7z M35.5,42L31,48.7V42l18-18L35.5,42z"/></g>
        </g>
    </svg>
</div>

CSS

/* svg animation */

.websites-content g {
  -webkit-transition: -webkit-transform 0.3s ease;
  -moz-transition:    -moz-transform 0.3s ease;
  transition:         transform 0.3s ease;
  
  /*-webkit-transform-origin:    center center;
  -moz-transform-origin:    center center;
  transform-origin:         center center;*/
}

.websites-content:hover g {
 -webkit-transform: scale(1.3) translate(-8.6px, -8.6px);
 -moz-transform:    scale(1.3) translate(-8.6px, -8.6px);
 -ms-transform:     scale(1.3) translate(-8.6px, -8.6px);
  transform:        scale(1.3) translate(-8.6px, -8.6px);
}

.websites-content svg {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    text-align: center;
}
.icon-build {
    background-color: #F7863B;
}