JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="background">
    <span class="snow-drift snow-drift--background"></span>
    <span class="snow-drift snow-drift--foreground"></span>
    <div class="snow-fx">
        <canvas id="snow-canvas"></canvas>
    </div>
</div>

<div class="stage">
    <div id="card" class="card">
        <div class="card__front">
            <div class="card__front__content">
                <p>Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Donec posuere vulputate arcu. Curabitur blandit mollis lacus. Fusce a quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
            </div>
        </div>
        <span class="card__inner-shadow"></span>
        <div class="card__back">
            <div class="card__back__content">
                <p>Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. In ut quam vitae odio lacinia tincidunt. Quisque id mi. Nunc nulla.</p>
            </div>
        </div>
    </div>
</div>

SCSS

body{
    position: relative;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

*{
    box-sizing: border-box;
}

.background{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #352f44;
    
    .snow-drift{
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
            
        &:after{
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
        }
        
        &.snow-drift--background{
            height: 10vh;
            bottom: 20vh;
            background-color: #b9b7bc;
            
            &:after{
                opacity: 0.25;
                //transform: rotate(180deg);
            }
            
        }
        
        &.snow-drift--foreground{
            height: 20vh;
            background-color: #e5e3e8;
        }
        
    }
    
    .snow-fx{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }
    
}

.stage{
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.card{
    position: relative;
    height: 85vh;
    width: 55vh;
    perspective: 150vh;
    transform-origin: center center;
    transform: scale(0.96);
    transition: transform 750ms ease-in-out;
    font-size: 2.5vh;
    text-align: center;
    cursor: pointer;
  ...

JavaScript

/**
 * Card - Snow
 */

var openEvt = function(){
    if(this.className.match(/\bcard\-\-open\b/i)){
	    this.className = this.className.replace(/\s?\bcard\-\-open\b/ig, '');
    }else{
	    this.className += ' card--open';
    }
}
document.getElementById('card').addEventListener('click', openEvt);


/**
 * PARTICLE DROP
 */

var snowBackground = {
    W: window.innerWidth,
    H: window.innerHeight,
    mp: 25,
    particles: [],
    ctx: null,
    pushOffsetX: 0.5,
    defaultSpeedY: 1,
    yCont: false,
    init: function (e) {
        snowBackground.speedY = snowBackground.defaultSpeedY;
        canvas = document.getElementById(e);
        snowBackground.ctx = canvas.getContext("2d");
        canvas.width = snowBackground.W;
        canvas.height = snowBackground.H;
        for (var i = 0; i < snowBackground.mp; i++) {
            var xtmp = Math.random() * snowBackground.W;
            var rtmp = Math.random() * 3 + 1;
            snowBackground.particles.push({
                ox: xtmp, //original x-coordinate
                x: xtmp, //x-coordinate
                //y: Math.random()*snowBackground.H, //y-coordinate
                y: Math.random() * snowBackground.H, //y-coordinate
                r: rtmp, //radius
                d: rtmp //density
            });
        }
        window.addEventListener('mousemove', function (e) {
            snowBackground.pushOffsetX = e.offsetX / snowBackground.W * 0.5;
        });
        window.addEventListener('resize', function (e) {
            snowBackground.W = window.innerWidth;
            snowBackground.H = window.innerHeight;
            canvas.height = snowBackground.H;
            canvas.width = snowBackground.W;
        });
        var loopSnow = window.setInterval(snowBackground.draw, 33);
    },
    draw: function () {
        snowBackground.ctx.clearRect(0, 0, snowBackground.W, snowBackground.H);
        snowBackground.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
       ...