JSFiddle - React, Tailwind, and code Playground

by spedwards

HTML

<div></div>
<a href="https://github.com/Spedwards/Countdown">Link to Github Page</a>

<!-- COUNTDOWN CODE
      IGNORE BELOW -->
<script>/* 
 * Countdown v1.0 
 * http://spedwards.github.io 
 * 
 * Copyright (c) 2014, Liam Edwards 
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 * 
 */ 
 
(function ($) {
	
	$.fn.countdown = function( options ) {
	
		$(this).html('<span id="countdown"><span id="hours">0</span>:<span id="minutes">0</span>:<span id="seconds">0</span><span id="milliseconds">0</span></span>');
	
		var opts = $.extend( {}, $.fn.countdown.defaults, options ),
			elem = $(this),
			hours = elem.children('#countdown').children('#hours'),
			minutes = elem.children('#countdown').children('#minutes'),
			seconds = elem.children('#countdown').children('#seconds'),
			milliseconds = elem.children('#countdown').children('#milliseconds');
		
		$.fn.countdown.check('num', opts.hours, 0);
		$.fn.countdown.check('num', opts.minutes,...

CSS

#countdown {
	outline: 1px solid black;
	padding: 0.5em 1.5em;
	display: inline-block;
}

#hours, #minutes, #seconds {
	font-size: 24pt;
	font-weight: bold;
	color: #3c3c3c;
}

#milliseconds {
	padding-left: 7%;
}

JavaScript

$('div').countdown({
    seconds: 25,
    milliseconds : 2500,
    done : function(){alert('Done!');}
});