JSFiddle - React, Tailwind, and code Playground

by Achmad Muharya

HTML

<p id='start'>Pada zaman dahulu di sebuah kerajaan browser yang sangat-sangat jauh...</p>

<h1>STAR WARS<sub>dalam CSS3</sub></h1>

<div id='titles'>
    <div id='titlecontent'>
        <p class='center'>EPISODE IV
            <br>Harapan Baru Untuk CSS3</br>
        </p>
        <p>Sebelum itu, selamat datang di blog sederhana ini.</p>
        <p>Dan selamat menikmati intro khas di film Star Wars</p>
        <p>Star Wars, di beri judul ulang dengan nama Star Wars Episode IV: A New Hope, adalah film epik opera luar angkasa Amerika yang ditulis dan disutradarai George Lucas.</p>
        <p>Film ini merupakan film pertama seri Star Wars. Film ini dibintangi Mark Hamill, Harrison Ford, Carrie Fisher, Peter Cushing dan Sir Alec Guinness. Dalam film ini, sekelompok pejuang kemerdekaan bernama Rebel Alliance berencana menghancurkan stasiun luar angkasa Death Star, sebuah senjata yang dibuat Galactic Empire yang jahat</p>
        <p>Konflik ini mengubah kehidupan seorang anak tani Luke Skywalker ketika dia secara tidak sengaja mendapat droid yang membawa rancangan Death Star yang dicuri</p>
        <p>Setelah Empire melakukan pencarian droid yang kejam, Skywalker memutuskan untuk menemani Jedi Master Obi-Wan Kenobi dalam misi menyelamatkan pemilik droid, pemimpin pemberontak Princess Leia, dan menyelamatkan galaksi</p>
        <p>Sekian cerita yang ada di film Star Wars Episode IV: A New Hope. Dan setelah melihat hasilnya bagaimana ? Baguskan ?</p>
        <p>Dan terima kasih kepada Craig Buckler &#8211; Atas tutorialnya yang ditulis di situs www.sitepoint.com</p>
        <p>Oiya. jangan lupa mampir juga ke blognya Achmad Muharya ya. Kamu bisa melihat tutorial lengkapnya di blog Mad Trik. Selamat mencoba dan selamat menikmati.</p>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400, 700);
 * {
    padding: 0;
    margin: 0;
}
body, html {
    background: #000 url(http://2.bp.blogspot.com/-JSsA2jUuG6o/VLDGBmRv-SI/AAAAAAAAAKU/Xbe1SL-fImI/s1600/Space-Background.gif) repeat fixed;
    width: 100%;
    height: 100%;
    font-family:"Droid Sans", arial, verdana, sans-serif;
    font-weight: 700;
    color: #ff6;
    overflow: hidden;
}
p#start {
    position: relative;
    width: 16em;
    font-size: 200%;
    font-weight: 400;
    margin: 20% auto;
    color: #4ee;
    opacity: 0;
    z-index: 1;
    -webkit-animation: intro 2s ease-out;
    -moz-animation: intro 2s ease-out;
    -ms-animation: intro 2s ease-out;
    -o-animation: intro 2s ease-out;
    animation: intro 2s ease-out;
}
@-webkit-keyframes intro {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes intro {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes intro {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes intro {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes intro {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
h1 {
    position: absolute;
    width: 2.6em;
    left: 50%;
    top: 25%;
    font-size: 10em;
    text-align: center;
    margin-left: -1.3em;
    line-height: 0.8em;
    letter-spacing: -0.05em;
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    opacity: 0;
    z-index: 1;
    -webkit-animation: logo 5s ease-out 2.5s;
    -moz-animation: logo 5s ease-out 2.5s;
    -ms-animation: logo 5s ease-out 2.5s;
    -o-animation: logo 5s ease-out 2.5s;
    animation: logo 5s ease-out 2.5s;
}
h1 sub {
...