JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<div id="poem">
    <p id="line1" class="line">Roses are <span>#FF0033</span>,</p>
    <p id="line2" class="line">Violets are <span>#0033FF</span>,</p>
    <p id="line3" class="line">I'm a Launcher,</p>
    <p id="line4" class="line">and if you can read this,</p>
    <p id="line5" class="line">you are one too!</p>
</div>

CSS

body{
    background:url(http://subtlepatterns.com/patterns/whitey.png);
}
#poem{
    padding:25px 50px;
    margin: 50px auto;
    width:250px;
    background: #fff url(http://subtlepatterns.com/patterns/chruch.png);
    border:1px solid #bbb;
    border-radius:7px;
    box-shadow:0 3px 15px rgba(0,0,0,0.3);
    text-align:center;
    opacity:0;
}
.line{
    line-height:32px;
    font-size:20px;
    font-family:'helvetica neue',helvetica, sans-serif;
    font-weight:400;
    color:#333;
    text-shadow:0 -1px 1px #fff;
    opacity:1;
}

#line1 span{
    background-color:#ff7777;
    padding:1px 3px;
    border-radius:4px;
}
#line2 span{
    background-color:#7777ff;
    padding:1px 3px;
    border-radius:4px;
}

JavaScript

$('#poem').animate({opacity:1},4000);