JSFiddle - React, Tailwind, and code Playground
by TheNix
HTML
<audio autoplay loop src="http://static.sfdict.com/dictstatic/dictionary/audio/luna/F00/F0003300.mp3"></audio>
<h1>Rasmus learns new words! :D</h1>
<p>Word of the day: <em>façade</em></p>
CSS
body {
background: hotpink;
font-family: Gill Sans, Geneva;
animation: rainbowbg 6100ms infinite;
-webkit-animation: rainbowbg 6100ms infinite;
}
h1 { font-size: 40px; }
p { font-size: 25px; }
em {
color: orange;
animation: rainbowunicornattack 6100ms infinite;
-webkit-animation: rainbowunicornattack 6100ms infinite;
}
@keyframes rainbowunicornattack {
0% { color: red; }
15% { color: orange; }
30% { color: yellow; }
45% { color: green; }
60% { color: blue; }
85% { color: purple; }
100% { color: red; }
}
@-webkit-keyframes rainbowunicornattack {
0% { color: red; }
15% { color: orange; }
30% { color: yellow; }
45% { color: green; }
60% { color: blue; }
85% { color: purple; }
100% { color: red; }
}
@keyframes rainbowbg {
0% { background: red; }
15% { background: orange; }
30% { background: yellow; }
45% { background: green; }
60% { background: blue; }
85% { background: purple; }
100% { background: red; }
}
@-webkit-keyframes rainbowbg {
0% { background: green; }
15% { background: purple; }
30% { background: blue; }
45% { background: red; }
60% { background: yellow; }
85% { background: orange; }
100% { background: green; }
}