JSFiddle - React, Tailwind, and code Playground
by Felis Catus
HTML
<div class="container">
<div class="menubar">
<div class="logo inactive">
<svg height="100%" viewBox="-2 0 256 102">
<g id="hola_caption">
<path class="hola_caption" d="M235.4,61.9c0.2-2.1,1.2-19.4, 2.1-25.8c0.4-3.2,1.9-6.1,4.8-7.3c2.6-1,6-0.5,8,1.5c1.2,1.2,1.6,2.9,1.7,4.5 c0.1,2-0.1,4-0.4,5.9c-0.7,4.2-4.6,20.8-5.8,24.9c-0.5,1.6-1.3,3.5-2.6,4.5c-1.3,1-3.1,1.2-4.7, 0.5c-2.4-0.9-3-3.5-3.1-5.8 C235.3,63,235.4,61,235.4, 61.9C235.7,57.6,235.4,61.9,235.4,61.9z M231,83.5c-0.6-3,0.9-6.3,3.6-7.8c3-1.7,7.2-1,9.4,1.9 c2,2.4,2.1,6.5,0.1,9c-1,1.3-2.6,2.2-4.2,2.6c-0.9,0.2-1.9,0.2-2.7,0.1C234,88.7,231.6,86.5,231,83.5z"/>
<path class="hola_caption" d="M192.7,83.5c-2.7-2.2-4.3-5.7-4.2-9.1c0.1-3.4,1.7-6.7,4.4-8.7c3.1-2.3,6.5-2.5,10.6-2.4
c3.8,0,5.6-0.1,9.4-0.2c0.2,0,3-0.2,3-0.2s0-0.2,0-0.3c0-0.7,0-1.5-0.1-2.2c-0.3-1.7-1.6-2.5-3.1-3c-1.6-0.4-3.4-0.8-5.1-0.6
c-1.8,0.2-3.1,1.2-4.3,2.5c-1.1,1.1-2.2,2.5-3.8,2.6c-1.4,0.2-2.8-0.3-4-1.2c-2.9-2.3-2.2-5.9-0.1-8.4c2.3-2.8,5.9-4.2,9.4-4.6
c3.9-0.4,7.9,0.1,11.6,1.2c3.4,1,6.8,2.4,9,5.2c2.4,3,2.5,7,2,10.6c-0.5,4.1-1.7,8.1-2.4,12.2c-0.4,2-0.4,4-0.1,6.1
c0.2,1.8,0.3,3.7-0.8,5.3c-1,1.4-2.7,2.1-4.4,2.2c-1.8,0.1-3.3-0.7-4.4-2.2c-0.9-1.1-1.5-2.4-2-3.7c-5.8,2.7-9.6,2.6-12.2,2.3
C198.6,86.5,195.4,85.7,192.7,83.5z M200.4,74.6c-0.2,2.4,1.9,3.7,4,4.1c2.3,0.4,5.2,0,7.1-1.6c1.8-1.5,2.4-4,2.9-6.2
c-3,0.3-7.9,0.3-9.1,0.3C204,71.3,200.6,71.7,200.4,74.6z"/>
<path class="hola_caption" d="M171.8,45.5c0,0-0.4-4.7-0.3-5.7c0-1.3,0.9-5.5,5.3-5.8c4.4-0.3,5.9,3.3,6.3,4.7c0.3,1.4,0.4,3.8,0.5,5.8
c0,0,2.8,34.9,2.9,36.2c0.1,1.4,0.1,6.4-5.3,7.2c-5.2,0.4-6.4-4-6.6-6.4L171.8,45.5z"/>
<path class="hola_caption"...CSS
@-webkit-keyframes wobble{
0% {-webkit-transform:translateY(0px)}
25%{-webkit-transform:translateY(1px)}
75%{-webkit-transform:translateY(-2px)}
100%{-webkit-transform:translateY(0px)}
}
@keyframes wobble{
0% {transform:translateY(0px)}
25%{transform:translateY(1px)}
75%{transform:translateY(-2px)}
100%{transform:translateY(0px)}
}
@-webkit-keyframes snooze{
0%{-webkit-transform:translate(0px,0px);opacity:0}
10%{opacity:1}
80%{opacity:1}
100%{-webkit-transform:translate(5px,-26px);opacity:0;}
}
@keyframes snooze{
0%{transform:translate(0px,0px);opacity:0}
10%{opacity:1}
80%{opacity:1}
100%{transform:translate(5px,-26px);opacity:0;}
}
@-webkit-keyframes snore{
0%{opacity:0}
40%{opacity:0.5}
80%{opacity:0}
100%{opacity:0}
}
@keyframes snore{
0%{opacity:0}
40%{opacity:0.5}
80%{opacity:0}
100%{opacity:0}
}
body{
background:url("http://www.traipse.com/penrose_tiles/penrose_tiles.gif");
}
.container{
margin:30px;
position:relative;
width:283px;
height:283px;
background:white;
box-shadow:1px 1px 7px 2px black;
}
.menubar{
width:100%;
height:50px;
background:#0EAEE0;
box-sizing:border-box;
border-width:1px;
border-color:white;
border-style:solid;
position:relative;
}
.mainpanel{
margin:0px 15px;
border-bottom:1px solid silver;
height:183px;
position:relative;
}
.logo{
margin:9px auto 10px 15px;
height:25px;
}
.active path.hola_caption{
fill:#2b2b2b;
}
.inactive path.hola_caption{
fill:#eaeaea;
}
.active path.hola_body{
fill:#FF5E29;
}
.inactive path.hola_body{
fill:#eaeaea;
}
.active .face{
fill:#000000;
opacity:0.6;
}
.inactive .face{
fill:#0EAEE0;
opacity:1;
}
.logo *{
transition:fill 900ms ease,opacity 900ms ease;
-webkit-transition:fill 900ms ease,opacity 900ms ease;
}
.logo.active *{
transition:fill 300ms cubic-bezier(1,0,1,0),opacity...JavaScript
(function setEvents(){
var active=0;
var panel=document.getElementsByClassName("mainpanel")[0];
var logo=document.getElementsByClassName("logo")[0];
var face=document.getElementsByClassName("head")[0];
panel.onclick=function activateClick(evt){
active=1-active;//toggle
if(active){
logo.setAttribute("class","logo active");
setTimeout(function resetLogo(){
logo.setAttribute("class","logo inactive");
},800);
face.setAttribute("class","head active");
}else{
logo.setAttribute("class","logo inactive");
face.setAttribute("class","head");
}
}
}());