JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<link href='http://fonts.googleapis.com/css?family=Exo+2:200,400' rel='stylesheet' type='text/css'>
    
<div id='logo'>
    <span class='company'>Mbri</span> 
    <span>|</span>
    <span class='type'>Logements</span>
</div>

CSS

html, body { height:100%; background:#3b153b; }
#logo {
  top:calc(10% + 330px);
  width:100%;
  text-align:center;
  color:white;
  font-family: 'Exo 2', sans-serif;
  font-size:30pt;
  text-transform: uppercase
}
#logo span{
  -webkit-transition:all 300ms ease-in-out;
}
#logo span:nth-child(2){
    color:#ef1e5f;
    -webkit-animation:mbri 3s 2s infinite;
}
#logo span:nth-child(3){
    color:#7A1F48;
    -webkit-animation:mbri 3s infinite;
}

#logo:hover span:nth-child(2){
    color:#7A1F48;
}
#logo:hover span:nth-child(3){
    color: #ef1e5f;
}
@-webkit-keyframes mbri{
    0%{
        color:#7A1F48;
    }15%{
        color:#7A1F48;
    }20%{
        color: #ef1e5f;
    }60%{
        color:#7A1F48;
    }90%{
       color: #ef1e5f;
    }100%{
        color:#7A1F48;
    }       
}