JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="centered rotated">
    <div class="coffee-cup"><div class="wrapper"> <div class="base-s"></div> <div class="base"></div> <div class="base-h"></div> <div class="base-g"></div> <div class="hand-s"></div> <div class="cup-s"></div> <div class="hand"></div> <div class="cup-b"></div> <div class="cup-g"></div> <div class="coffee"></div> </div></div>
    <div class="theta-xi">Theta Xi</div>
    <div class="title">Coffee Night</div>
    <div class="subtitle">Fridays, 8PM</div>    
</div>

<div class="bottomed">
    64 Bay State Road, Boston MA 02215
    <br/>
    <span>(617) 949-0069</span>
</div>

CSS

</style>

<meta name="viewport" content="width=device-width, initial-scale=0.6, minimum-scale=0.6, maximum-scale=0.6, user-scalable=no">

<style>
@import url(http://fonts.googleapis.com/css?family=Raleway:400,600,200);

* { cursor: default; }

html, body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: rgb(94, 49, 24);
    background-image: -webkit-radial-gradient(rgb(94, 49, 24), rgb(29, 14, 8));
    background-image: -moz-radial-gradient(rgb(94, 49, 24), rgb(29, 14, 8));
    font-family: 'Raleway', sans-serif;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: none;
    -webkit-transform: translateZ(0);
}

.centered {
    -webkit-transition: all 2s ease-in-out;
    -webkit-transform: rotate(0deg);
    -moz-transition: all 2s ease-in-out;
    -moz-transform: rotate(0deg);
    position: fixed;
    top: 50%;
    left: 50%;
    height: 600px;
    width: 600px;
    margin-top: -300px;
    margin-left: -300px;
    text-align: center;
    z-index: 2;
}

.centered.rotated {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

.centered > div {
    -webkit-transition: opacity 2s;
    -moz-transition: opacity 2s;
}

.theta-xi, .title, .subtitle {
    opacity: 0;
}

.theta-xi.visible {
    opacity: 0.6;   
}

.title.visible, .subtitle.visible {
    opacity: 1;   
}

.theta-xi {
    position: absolute;
    top: 249px;
    width: 100%;
    color: rgb(194, 162, 150);
    font-size: 26px;
    font-weight: 600;
    text-shadow: -1px 1px rgb(53, 17, 11), -2px 2px rgb(53, 17, 11), -2px 3px 7px rgb(53, 17, 11);
}

.title {
    position: absolute;
    top: 281px;
    width: 100%;
    color: rgb(221, 197, 189);
    font-size: 30px;
    font-weight: 200;
    text-shadow: -1px 1px rgb(53, 17, 11), -1px 2px 4px rgb(53, 17, 11);
}

.subtitle {
    position: absolute;
    top: 320px;
    width: 100%;
    color: rgb(194, 162, 150);
    font-size: 21px;
    font-weight: 400;
    text-shadow: -1px 1px rgb(53,...

JavaScript

$(document).click(function(){
    location.href = 'http://txi.mit.edu';
});

setTimeout(function(){
    $('.coffee').addClass('filled');
}, 100);

setTimeout(function(){
    $('.theta-xi, .title, .subtitle').addClass('visible');
    $('.rotated').removeClass('rotated');
}, 4100);