JSFiddle - React, Tailwind, and code Playground
HTML
<div class='container'>
<div class='background'>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1787px"
height="682px" viewBox="0 0 1787 682" enable-background="new 0 0 1787 682" xml:space="preserve">
<g id="graphics">
<rect y="0" fill="#00B7F1" width="1787" height="682.3"/>
<path opacity="0.5" fill="#FFFFFF" d="M1475.8,218.9c0,21-19.4,37.7-40.4,37.7s-38.1-17-38.1-38.1s16.9-40.1,37.9-40.1
C1456.4,178.4,1475.8,197.9,1475.8,218.9z"/>
<path opacity="0.5" fill="#FFFFFF" d="M1467.5,218.9c0,16.4-15.6,29.4-32,29.4c-16.4,0-29.7-13.3-29.7-29.7s13.2-31.8,29.6-31.8
C1451.8,186.7,1467.5,202.5,1467.5,218.9z"/>
<path fill="#FF5E29" d="M1459.2,218.9c0,11.8-11.9,21-23.7,21s-21.4-9.6-21.4-21.4c0-11.8,9.5-23.5,21.3-23.5
C1447.2,195,1459.2,207,1459.2,218.9z"/>
<path opacity="0.75" fill="#FFFFFF" d="M381.1,197.5c-5.1-2.5-10.8-2.5-15.7-0.6c-0.8-3.2-3-6-6.2-7.5c-5.8-2.8-12.7-0.4-15.5,5.4
c-1.7,3.4-1.5,7.3,0.2,10.5c-3.3,1.3-6.1,3.8-7.8,7.2c-3.6,7.3-1.2,16.9,6.1,20.4c5.6,2.7,12.7,0.9,17.1-3.1
c1.4,1.2,2.9,2.3,4.6,3.1c9.8,4.7,22.9,0.7,27.7-9.1C396.4,214,390.9,202.3,381.1,197.5z"/>
<path opacity="0.75" fill="#FFFFFF" d="M1418.6,227.8c-4.9-2.4-10.3-2.4-15-0.6c-0.8-3-2.9-5.7-5.9-7.2c-5.5-2.7-12.2-0.4-14.9,5.1
c-1.6,3.3-1.4,7,0.2,10c-3.1,1.3-5.8,3.6-7.4,6.9c-3.4,7-1.5,16.4,5.6,19.8c5.4,2.6,12.5,0.5,16.7-3.3c1.3,1.2,2.8,2.2,4.4,3
c9.3,4.5,22.6,1.6,27.1-7.7C1433.8,244.5,1427.9,232.3,1418.6,227.8z"/>
<path opacity="0.75" fill="#FFFFFF" d="M331.4,179.3c-3.2-1.6-6.8-1.6-9.8-0.4c-0.5-2-1.9-3.7-3.9-4.7c-3.6-1.8-8-0.2-9.7,3.4
c-1,2.2-0.9,4.6,0.1,6.5c-2,0.8-3.8,2.4-4.9,4.5c-2.2,4.6-1.1,10.9,3.5,13.2c3.5,1.7,8.4,0.2,11.1-2.3c0.8,0.8,1.8,1.4,2.9,2
c6.1,3,15.1,0.4,18.1-5.7C341.7,189.6,337.5,182.2,331.4,179.3z"/>
<g>
<path fill="#00A0D4"...CSS
@keyframes left-flap{
0% {transform: rotate(0deg);}
50%{transform: rotate(-50deg);}
100%{transform: rotate(0deg);}
}
@-webkit-keyframes left-flap{
0% {-webkit-transform: rotate(0deg);}
50%{-webkit-transform: rotate(-50deg);}
100%{-webkit-transform: rotate(0deg);}
}
@keyframes right-flap{
0% {transform: rotate(0deg);}
50%{transform: rotate(50deg);}
100%{transform: rotate(0deg);}
}
@-webkit-keyframes right-flap{
0% {-webkit-transform: rotate(0deg);}
50%{-webkit-transform: rotate(50deg);}
100%{-webkit-transform: rotate(0deg);}
}
@keyframes speaker-wobble{
0% {transform: translatey(0px);}
50%{transform: translatey(-3px);}
100%{transform: translatey(0px);}
}
@-webkit-keyframes speaker-wobble{
0% {-webkit-transform: translatey(0px);}
50%{-webkit-transform: translatey(-3px);}
100%{-webkit-transform: translatey(0px);}
}
@keyframes play-invite{
0% {transform:scale(1);}
30%{transform:scale(1.1);}
80%{transform:scale(0.95);}
100%{transform:scale(1);}
}
@-webkit-keyframes play-invite{
0% {-webkit-transform:scale(1);}
30%{-webkit-transform:scale(1.1);}
80%{-webkit-transform:scale(0.95);}
100%{-webkit-transform:scale(1);}
}
@keyframes get-wobble{
0%{transform:translatey(0px);}
50%{transform:translatey(-3px);}
100%{transform:translatey(0px);}
}
@-webkit-keyframes get-wobble{
0%{-webkit-transform:translatey(0px);}
50%{-webkit-transform:translatey(-3px);}
100%{-webkit-transform:translatey(0px);}
}
@keyframes gethola-wobble{
0%{transform:translatey(0px);}
25%{transform:translatey(-8px);}
50%{transform:translatey(5px);}
75%{transform:translatey(-3px);}
100%{transform:translatey(0px);}
}
@-webkit-keyframes gethola-wobble{
0%{-webkit-transform:translatey(0px);}
25%{-webkit-transform:translatey(-8px);}
50%{-webkit-transform:translatey(5px);}
...JavaScript
(function loloaded(){
function showSpeaker(speaker,show){
var spk=speaker.querySelector(".spk");
if(show)
{
spk.classList.remove('hidden');
speaker.classList.add('ani-active');
}
else
{
speaker.classList.remove('ani-active');
setTimeout(function(){spk.classList.add('hidden');},500);
}
}
function rotateMedia(){
var container=document.querySelector('.pl-container');
if(container.classList.contains('active'))
{
container.classList.remove('active');
container.classList.add('postactive');
setTimeout(function(){
container.classList.add('reset');
container.classList.remove('postactive');
},500);
setTimeout(function(){
container.classList.remove('reset');
},1000);
}
else
{
container.classList.add('active');
}
}
var videoframe=0, videowidth=158;
var tvset=document.querySelector('.tv-set');
function playTV(){
var frInt=0;
function advanceFrame(){
videoframe++;
tvset.style.backgroundPosition='-'+(videowidth*videoframe)+'px 0px';
if(videoframe>=104){
videoframe=0;
clearInterval(frInt);
}
}
frInt=setInterval(function(){
advanceFrame();
},40);
}
function playInvite(){
var playbutton= document.querySelector('.playbutton');
playbutton.classList.add('invited');
setTimeout(function(){
playbutton.classList.remove('invited');
},1200);
}
function holaInvite(){
var holabutton= document.querySelector('.gethola');
holabutton.classList.add('invited');
setTimeout(function(){
holabutton.classList.remove('invited');
...