JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<div id="first">
    
    <div class="remove word hello">I'm</div>

    <div class="word giving">giving</div>
    
    <div class="word you">you</div>    

    <div class="word a">a</div>  
 
    <div class="word night">nightcall</div>
    
</div>


<iframe width="600" height="437" src="http://www.youtube.com/embed/MV_3Dpw-BRY?rel=0" frameborder="0" allowfullscreen></iframe>

CSS

#first {
    width:1267px;
    height:528px;
    position:relative;
    display:block;
    background:url(http://3.bp.blogspot.com/-T-5fYv1yvDU/TnyNAjFbaRI/AAAAAAAADRQ/vPJ3Du9tC3o/s1600/drive-movie-screenshots1.jpg);   
}
div.word {
    color:#fff;
    display:block;
    position:absolute;
    width:100%;
    top:30%;
    text-align:center;
    font-family:Arial;
    text-transform:uppercase;
    font-size:60px;    
} 

div.hello {
        -webkit-animation: fadein 1s 1 33s;
        -moz-animation:    fadein 1s 1 33s;
        -ms-animation:     fadein 1s 1 33s;    
}

div.giving {
        left:12%; 
        -webkit-animation: fadein 2s 1 34s;
        -moz-animation:    fadein 2s 1 34s;
        -ms-animation:     fadein 2s 1 34s;    
}

div.you {
        right:8.5%;
        -webkit-animation: fadein 2s 1 34s;
        -moz-animation:    fadein 2s 1 34s;
        -ms-animation:     fadein 2s 1 34s;         
}

div.a {
        right:8.5%;
        top:42%;
        -webkit-animation: fadein 2s 1 35s;
        -moz-animation:    fadein 2s 1 35s;
        -ms-animation:     fadein 2s 1 35s;       
}

div.night {
        left:7%;
        top:42%; 
        -webkit-animation: fadein 2s 1 35s;
        -moz-animation:    fadein 2s 1 35s;
        -ms-animation:     fadein 2s 1 35s;       
}


@-webkit-keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-ms-keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


@-webkit-keyframes movetop {
    0%   { top: -15%; }
    100% { top: 30%; }
}
@-moz-keyframes movetop {
    0%   { top: -15%; }
    100% { top: 30%; }
}
@-ms-keyframes movetop {
    0%   { top: -15%; }
    100% { top: 30%; }
}