JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="container">
  <div class="icon_frame">
    <svg viewBox="0 0 270 109">
      <g>
        <g>
          <path fill="#004E74" d="M174.9,67.9c-1.2,0-2.3,0.2-3.3,0.7l-7-12.1c-0.7-1.2-0.7-2.7,0-3.9l7-12.1c1,0.4,2.1,0.7,3.3,0.7
            c4.9,0,8.9-4,8.9-8.9c0-4.9-4-8.9-8.9-8.9c-4,0-7.4,2.7-8.5,6.4h-15c-1.4,0-2.7-0.7-3.4-1.9l-7.2-12.4c1.8-1.6,2.9-3.9,2.9-6.5
            c0-4.9-4-8.9-8.9-8.9C130,0,126,4,126,8.9c0,2.6,1.1,4.9,2.9,6.5l-7.2,12.4c-0.7,1.2-2,2-3.4,2h-15c-1.1-3.7-4.4-6.4-8.5-6.4
            c-4.9,0-8.9,4-8.9,8.9c0,4.9,4,8.9,8.9,8.9c1.2,0,2.3-0.2,3.3-0.7l7,12.1c0.7,1.2,0.7,2.7,0,3.9l-7,12.1c-1-0.4-2.1-0.7-3.3-0.7
            c-4.9,0-8.9,4-8.9,8.9c0,4.9,4,8.9,8.9,8.9c4,0,7.4-2.7,8.5-6.4h15c1.4,0,2.7,0.7,3.4,2l7.2,12.4c-1.8,1.6-2.9,3.9-2.9,6.5
            c0,4.9,4,8.9,8.9,8.9c4.9,0,8.9-4,8.9-8.9c0-2.6-1.1-4.9-2.9-6.5l7.2-12.4c0.7-1.2,2-2,3.4-2h15c1.1,3.7,4.4,6.4,8.5,6.4
            c4.9,0,8.9-4,8.9-8.9S179.8,67.9,174.9,67.9L174.9,67.9z M134.9,72.2c-9.8,0-17.7-7.9-17.7-17.7s7.9-17.7,17.7-17.7
            c9.8,0,17.7,7.9,17.7,17.7S144,72.2,134.9,72.2L134.9,72.2z"/>
        </g>
        <circle fill="#00B7F1" cx="94.7" cy="31.9" r="2.9"/>
        <circle fill="#00B7F1" cx="134.9" cy="8.1" r="2.9"/>
        <circle fill="#00B7F1" cx="175.2" cy="31.9" r="2.9"/>
        <circle fill="#00B7F1" cx="94.7" cy="77.2" r="2.9"/>
        <circle fill="#00B7F1" cx="134.9" cy="100.8" r="2.9"/>
        <circle fill="#00B7F1" cx="175.2" cy="77.2" r="2.9"/>
        <g>
          <path fill="#FFFFFF" d="M154.2,55.1c0,10.7-7.7,18.6-18.4,18.6c-10.7,0-20.2-7.9-20.2-18.6s6.8-19.8,17.4-19.8
            C145.4,35.3,154.2,44.4,154.2,55.1z"/>
        </g>
      </g>
    </svg>
  </div>
  <div class="text_frame">
    Monitor the web for proper use of customer's brands.
    Protect your Intellectual Property and trade marks
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=PT+Sans);
body {
  background: #fff;
}
div.text_frame, div.icon_frame {
  width: 270px;
  height: 109px;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  color: #0b324c;
  box-sizing: border-box;
  position: absolute;
  transition: transform 500ms cubic-bezier(1, 1.49, 1, 1), opacity 250ms linear;
  background: #fff;
  z-index: 2;
}
svg {
  width: 100%;
}
.container {
  display: inline-block;
  position: relative;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  width: 270px;
  height: 109px;
}
div.icon_frame {
  transition-delay: 0ms,250ms;
}
div.text_frame {
  padding: 10px 30px;
  transform: rotatey(-180deg);
  z-index: 1;
  transition-delay: 0ms,0ms;
  opacity: 0;
  text-align: justify;
}
div.container:hover div.icon_frame {
  transform: rotatey(180deg);
  opacity: 0;
  transition-delay: 0ms,0ms;
}
div.container:hover div.text_frame {
  transform: rotatey(0deg);
  opacity: 1;
  transition-delay: 0ms,250ms;
}