JSFiddle - React, Tailwind, and code Playground

by brunogc

HTML

<!-- inicio :: Assinatura Coresphere - csspure  -->
<div id="containrLogo">
    <a class="logo" href="http://coresphe.re/">
      <span class="s">Desenvolvido por </span>
      <span class="t">Coresphere Tecnologia</span>
  </a>
</div>
<!-- fim :: Assinatura Coresphere - csspure  -->

CSS

#containrLogo {
    width: 99px;
    height: 30px;
    position: relative;
  
    float:right;
    margin-top: 50px;
}
#containrLogo .logo{
    text-indent: -9999px;
}
#containrLogo .logo .s {
    background: url("http://coresphere.com.br/img/logo_m2.png?v=12") no-repeat 0px bottom;
    width: 29px;
    height: 30px;
    position: absolute;
    right: 0px;
    transition: right 0.5s ease-in-out, background 0.2s ease 0.6s;
    -moz-transition: right 0.5s ease-in-out, background 0.2s ease 0.6s;
    -webkit-transition: right 0.5s ease-in-out, background 0.2s ease 0.6s;
    cursor: pointer;
  
}
#containrLogo .logo .t {
    display: block;
    background: url("http://coresphere.com.br/img/logo_m2.png?v=12") no-repeat right 0;
    width: 70px;
    height: 30px;
    position: absolute;
    right: 0;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    -moz-transition: opacity 0.7s ease-in-out;
    -webkit-transition: opacity 0.7s ease-in-out;
    
}
#containrLogo  .logo:hover .s{
    right: 72px;
    background: url("http://coresphere.com.br/img/logo_m2.png?v=12") no-repeat 0px 0px;
    transition: right 0.5s ease-in-out 0.3s, background 0.2s ease;
    -moz-transition: right 0.5s ease-in-out 0.3s, background 0.2s ease;
    -webkit-transition: right 0.5s ease-in-out 0.3s, background 0.2s ease;
}
#containrLogo .logo:hover .t {
    opacity: 1;
    transition: opacity 0.7s ease-in-out 0.3s;
    -moz-transition: opacity 0.7s ease-in-out 0.3s;
    -webkit-transition: opacity 0.7s ease-in-out 0.3s;
}