JSFiddle - React, Tailwind, and code Playground

Merry Christmas 2013

by Jennifer Perrin

HTML

<h1>Merry Christmas 2013</h1>
<div class="bokeh">
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div...

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat);

.bokeh {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: -50px;
  left: -25px;
}

.light {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

.light:nth-child(1) {
  width: 78px;
  height: 78px;
  top: 98%;
  left: 95%;
  background: #fd361b;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
  -webkit-animation: 10s light2 linear infinite;
  -moz-animation: 10s light2 linear infinite;
  -ms-animation: 10s light2 linear infinite;
  -o-animation: 10s light2 linear infinite;
  animation: 10s light2 linear infinite;
}

.light:nth-child(2) {
  width: 89px;
  height: 89px;
  top: 19%;
  left: 75%;
  background: #fef14f;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
  -webkit-animation: 24s light5 linear infinite;
  -moz-animation: 24s light5 linear infinite;
  -ms-animation: 24s light5 linear infinite;
  -o-animation: 24s light5 linear infinite;
  animation: 24s light5 linear infinite;
}

.light:nth-child(3) {
  width: 87px;
  height: 87px;
  top: 78%;
  left: 22%;
  background: #adfedd;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
  -webkit-animation: 15s light1 linear infinite;
  -moz-animation: 15s light1 linear infinite;
  -ms-animation: 15s light1 linear infinite;
  -o-animation: 15s light1 linear infinite;
  animation: 15s light1 linear infinite;
}

.light:nth-child(4) {
  width: 99px;
  height: 99px;
  top: 78%;
  left: 53%;
  background: #30398d;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
  -webkit-animation: 24s light5 linear infinite;
  -moz-animation: 24s light5 linear infinite;
  -ms-animation: 24s light5 linear infinite;
  -o-animation: 24s light5 linear infinite;
  animation: 24s light5 linear infinite;
}

.light:nth-child(5) {
  width: 77px;
  height: 77px;
  top: 59%;
  left: 41%;
  background: #fd361b;
  -webkit-filter:...