JSFiddle - React, Tailwind, and code Playground

Countdown - Style 1

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="cut main">
  <h2>Code Snippet: Count Down</h2>
    <div id="countdown">
      <span class="days"><span></span> days</span>
      <span class="hours"><span></span> hours</span>
      <span class="minutes"><span></span> minutes</span>
      <span class="seconds"><span></span> seconds</span>
    </div>
</div>

CSS

body {
  background: url("http://jenniferperrin.com/image/background.gif");
  color: #444;
  font-family: 'Yanone Kaffeesatz';
}
h2 {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 15px 0 15px 0;
  font-size: 20px;
  color: #5a7c87;
}
a {
    color: #5a7c87;
    text-decoration: none;
    float: right;
}
a:hover {
    background: #efefef;
    color: #d46a15;
}
p {
  font-size: 18px;
  margin: 0;
  padding: 0 0 25px 0;
  line-height: 20px;
}

.main {
  position: relative;
  width: 500px;
  margin: 50px auto;
  padding: 25px 50px;
  background: #fff;
  box-shadow:
    inset 0 0 0 13px #eaeaea,
    inset 0 0 13px 9px rgba(0,0,0,1);
}
.cut::before,
.cut::after {
  display: block;
  content: "";
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: url("http://jenniferperrin.com/image/background.gif");
  position: absolute;
  bottom: -21px;
}
.cut::before {
  left: -24px;
  box-shadow: 3px -3px 2px -1px rgba(34,34,34,.3);
}
.cut::after {
  right: -24px;
  box-shadow: -3px -3px 2px -1px rgba(34,34,34,.3);
}

.cut h2::before,
.cut h2::after {
  display: block;
  content: "";
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: url("http://jenniferperrin.com/image/background.gif");
  position: absolute;
  top: -46px;
}
.cut h2::before {
  left: -74px;
  box-shadow: 3px 3px 2px -1px rgba(34,34,34,.3);
}
.cut h2::after {
  right: -72px;
  box-shadow: -3px 3px 2px -1px rgba(34,34,34,.3);
}

#countdown {
  margin: 0 0 20px 0;        
}

JavaScript

/**
 * The date when the countdown is to end - yyyy, mm, dd, hh, mm, ss
 *     Months: (Months start from 0)
 *     0 == January        1 == February
 *     2 == March          3 == April
 *     4 == May            5 == June
 *     6 == July           7 == August
 *     8 == September      9 == October
 *     10 == November      11 == December
 **/

var end = new Date(2012, 10, 18, 21, 45, 00),
    countdown = $('#countdown'),
    days = countdown.find('.days span'),
    hours = countdown.find('.hours span'),
    minutes = countdown.find('.minutes span'),
    seconds = countdown.find('.seconds span'),
    set_count_down, time_loop;

set_count_down = function (){

    var now = new Date(),
        time_left = (end.getTime() - now.getTime()) / 1000,
        d, h, m;

    // any call back you want to put when the countdown finishes
    if(time_left <= 0) {
        clearInterval(time_loop);
        window.location.reload();
        return;
    }

    d = Math.floor(time_left/86400);
    time_left -= d*86400;

    h = Math.floor(time_left/3600);
    time_left -= h*3600;

    m = Math.floor(time_left/60);
    time_left -= m*60;

    days.html(d);
    hours.html(h);
    minutes.html(m);
    seconds.html(Math.floor(time_left));
};

time_loop = setInterval(set_count_down, 1000);