JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="wrapper">
    <div id="snow"></div>
    <div id="tree"></div>
    <h1>Happy Holidays</h1>
</div>

CSS

html
{
    height: 100%;
    background-color: #869EA3;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                        color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                        to(transparent));
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);    
    -webkit-background-size: 400px 400px;
    -moz-background-size: 400px 400px;
    background-size: 400px 400px;
}

#wrapper
{
    position: absolute;
    height: 500px;
    width: 800px;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -400px;
    overflow: hidden;  
    background: #0093d8;
    background: -moz-linear-gradient(top, #0093d8, #fff);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #0093d8));
    -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);    
}

#wrapper:before
{
    content: '*';
    font: bold 1000px arial;
    color: #fff;
    color: rgba(255,255,255,0.1);
    position: absolute;
    top: -200px;
    left: -100px
}

#snow
{
...