JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="top-image">
              <img src="https://tutsplus.github.io/merry-christmas-web-app-build/images/xmas-tree.png" alt="" />
            </div>
            <h1 class="modal-title">I wish you</h4>
          </div>
          <div class="modal-body">
            <p>Merry Christmas and Happy Holidays!</p>
            <hr />
            <p>Its time to say "<span>Thank You!</span>"</p>
          </div>
          <div class="modal-footer">
            <div class="img-footer">
            </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    </body>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
body {
  background-color: #222;
}

canvas {
  z-index: 9;
}

/*MODAL */
.modal {
  text-align: center;
  color: white;
}
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5 {
  font-family: "Open Sans", sans-serif;
}
.modal p {
  font-family: "Open Sans", sans-serif;
}

/*BOX */
.modal-dialog {
  width: 800px;
  background-image: url("https://static.pexels.com/photos/4803/winter-door-decoration-christmas-large.jpg");
}

/*CONTENT */
.modal-content {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0px;
  border: none;
}

/*HEADER */
.modal-header {
  border: none;
}
.modal-header .close {
  color: white;
  font-size: 31px;
  text-decoration: none;
  z-index: 9999999999999999;
  position: fixed;
  right: 26px;
}

.top-image {
  background-color: #fff;
  top: 80px;
  padding: 15px 0px;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  margin-bottom: 35px;
  margin-top: 50px;
}

/*BODY */
.modal-body p {
  font-size: 20px;
}
.modal-body hr {
  width: 100px;
  margin: 15px auto;
  border-top: 1px solid rgba(238, 238, 238, 0.31);
}
.modal-body p span {
  font-weight: 400;
  text-decoration: underline;
}

/*FOOTER */
.modal-footer {
  border: none;
}
.modal-footer .img-footer {
  margin: 0 auto;
  width: 90px;
  margin-bottom: 50px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  padding: 5px 5px;
}

JavaScript

$('#myModal').modal('show');

var particleCount = 300;
var particleMax   = 1000;
var sky           = document.querySelector('.modal');
var canvas        = document.createElement('canvas');
var ctx           = canvas.getContext('2d');
var width         = sky.clientWidth;
var height        = sky.clientHeight;
var i             = 0;
var active        = false;
var snowflakes    = [];
var snowflake;
console.log(sky)
canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';

var Snowflake = function () {
  this.x = 0;
  this.y = 0;
  this.vy = 0;
  this.vx = 0;
  this.r = 0;

  this.reset();
};

Snowflake.prototype.reset = function() {
  this.x = Math.random() * width;
  this.y = Math.random() * -height;
  this.vy = 1 + Math.random() * 3;
  this.vx = 0.5 - Math.random();
  this.r = 1 + Math.random() * 2;
  this.o = 0.5 + Math.random() * 0.5;
};

function generateSnowFlakes() {
  snowflakes = [];
  for (i = 0; i < particleMax; i++) {
    snowflake = new Snowflake();
    snowflake.reset();
    snowflakes.push(snowflake);
  }
}

generateSnowFlakes();

function update() {
  ctx.clearRect(0, 0, width, height);

  if (!active) {      
    return;
  }

  for (i = 0; i < particleCount; i++) {
    snowflake = snowflakes[i];
    snowflake.y += snowflake.vy;
    snowflake.x += snowflake.vx;

    ctx.globalAlpha = snowflake.o;
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();

    if (snowflake.y > height) {
      snowflake.reset();
    }
  }

  requestAnimFrame(update);
}

function onResize() {
  width = sky.clientWidth;
  height = sky.clientHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.fillStyle = '#FFF';

  var wasActive = active;
  active = width > 600;

  if (!wasActive && active) {
    requestAnimFrame(update);
  }
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function() {
  return  window.requestAnimationFrame       ||
         ...