JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="logo">
          <p id="llaves" style="background-color:#127a5d;">{</p>
           <div class="inner">
          <div class="cog" style="background-color:#127a5d;"></div>
          <h2 class="nombre" style="background-color:#127a5d;">CĂłdigo<span style="background-color:#127a5d;">Fuente</span></h2>
          </div>
          <p id="llaves" style="background-color:#127a5d;">}</p>
        </div>

CSS

/*Logo*/

.logo {
  width: 5rem;
  transition: 1s width ease;
  -webkit-animation: fade 0.5s ease-in;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
  z-index: -1000;
}

.inner {
float: left;
height: 3rem;
position: relative;
width: 100%;
-webkit-transform: translateZ(0);
margin-left: 0px;
}
.inner:after {
  *zoom: 1;
  content: ' ';
  height: 10rem;
  left: 0;
  opacity: 0.7;
  position: absolute;
  width: 100%;
  z-index: 1;
}

#llaves {
  float: left;
  font-family: 'Titillium Web', sans-serif;
  font-size: 3rem;
  margin: 0 -1rem 0 -0.0rem;
  position: relative;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3));
  -webkit-background-clip: text;
  background-color: #0CF;
  z-index: 3;
}

.nombre {
  display: none;
  float: left;
  font-family: 'Alef', sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  margin-left: 2.4rem;
  opacity: 0;
  position: relative;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2));
  -webkit-background-clip: text;
  background-color: #0CF;
  z-index: 3;
}
h2 span {
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-color:#0CF;
}

.logo:hover .inner > h2 {
  -webkit-animation: fade 1s ease-in;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-delay: 1.2s;
  display: block;
  opacity: 1;
}

.logo:hover > .inner .cog {
  transition: 1.5s -webkit-transform ease-in;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.logo:hover {
  transition-delay: 0.8s;
  width: 15rem;
}

.cog {
  background-color: #0CF;
  float: left;
  position: relative;
  width: 2rem;
  top: 1.2rem;
  left: 2rem;
  height: 2rem;
  -webkit-mask-box-image: url("http://s.cdpn.io/31787/cog.png");
  -webkit-filter:...