JSFiddle - React, Tailwind, and code Playground
HTML
<div id="letter">96000</div>
<div id="description">is for Volkswagen</div>
<div id="animation">
<div class="body">
<div class="light"></div>
<div class="siding"></div>
<div class="bumpers"></div>
<div class="wheelwells"></div>
<div class="wheel front"></div>
<div class="wheel back"></div>
<div class="windows">
<div></div>
<div></div>
<div></div>
</div>
<div class="grill">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!--
tumblr embed code
<iframe src="http://fiddle.jshell.net/3wkcc/462/show/" width="500" height="300" style="display:block;background-color:transparent;overflow:hidden;" allowTransparency="false" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
-->
CSS
* {
padding: 0;
margin: 0;
font-family: Helvetica , sans-serif;
}
html , body {
width: 100%;
height: 100%:
overflow: hidden;
position: fixed;
top: 0%;
left: 0%;
}
html {
background-color: rgba(255,240,240,1);
}
#letter {
font-size: 120px;
font-family: Helvetica;
font-weight: Bold;
color: rgba(18,22,26,0.7);
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
line-height: 120px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
opacity: 1;
z-index: 100;
}
#description {
position: fixed;
bottom: 10px;
width: 100%;
z-index: 100;
font-family: Helvetica;
font-weight: 200;
color: rgba(18,22,26,0.7);
text-align: center;
font-size: 11px;
letter-spacing: 1px;
}
#animation {
position: fixed;
animation: bodyRot 0.175s ease-in-out 0s infinite alternate none;
-webkit-animation: bodyRot 0.175s ease-in-out 0s infinite alternate none;
-webkit-transform-origin: center 90%;
-moz-transform-origin: center 90%;
-ms-transform-origin: center 90%;
-o-transform-origin: center 90%;
transform-origin: center 90%;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: -1;
}
.body {
width: 300px;
height: 75px;
border-bottom: 125px solid rgba(255,130,133,1);
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #fff;
}
.body:before {
content:"";
position: absolute;
width: 300px;
height: 75px;
border-bottom: 125px solid #fff;
background-color: #fff;
margin-left: -300px;
border-top-left-radius: 300px;
-webkit-transform-origin: right center;
-webkit-transform: scale( 0.3 , 1 );
-moz-transform-origin: right center;
-moz-transform: scale( 0.3 , 1 );
-ms-transform-origin: right center;
-ms-transform: scale( 0.3 , 1...