JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://raw.githubusercontent.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
<div class="all_content">
<div id="navigation">
    <div id="logo"><img src="http://s22.postimg.org/h1un1zj19/logo.png" /></div>
    <ul id="links">
        <li class="item-link active-link"><a href="#">Navigation</a></li>
        <li class="item-link"><a href="#">Navigation</a></li>
        <li class="item-link"><a href="#">Navigation</a></li>
        <div class="clearfix"></div>
    </ul>
    <div id="user_menu">Andrew McMillian <i class="fa fa-caret-down" style="color:#fff;"></i></div>
    <div id="register_login" class="btn_default" style="display:none;">Register/Login</div>
    <div class="clearfix"></div>
    </div>
    
    <div id="modul1">
        <img src="http://s28.postimg.org/vddqnc30t/bg_modul1.png" />
        <div class="welcome_text">
            <div class="med-font">Welcome to</div>
            <div class="big-font">Honda Walkaround Contest</div>
            <div class="nor-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet tempor metus. Proin vestibulum aliquet metus, id porttitor lorem consectetur non. Praesent facilisis dignissim libero, in venenatis enim iaculis ut. Official Rules</div>
        </div>
        <!-- Start countdown -->
        <div class="countdown">
            <div class="cd-title">Time Remaining to Complete Entry</div>
            
            <div class="cd-days cd-elem">
                <div>
                    <div>0</div><div>0</div>
                </div>
                <p>Days</p>
            </div>
            
            <div class="cd-hours cd-elem">
                <div>
                    <div>0</div><div>0</div>
                </div>
                <p>Hours</p>
            </div>
            
            <div class="cd-minutes cd-elem">
                <div>
              ...

SCSS

*{margin:0;padding:0;box-sizing:border-box;}
.clearfix {
	clear:both;
}
.btn_default {
	display: inline;
	width: auto;
	border-radius: 5px;
	padding: 15px 60px;
	cursor: pointer;
}
#navigation {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1280px;
	height: 83px;
	border-bottom: 1px solid #17365c;
	background-color: #002f7a;
	margin: 0 auto;
	z-index: 1;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
}
#logo {
	display: inline-block;
	padding: 18px 27px;
	vertical-align: top;
}
#register_login {
	position: absolute;
	color: #fff;
	font-weight: bolder;
	background-color: #0075c0;
	right: 27px;
	top: 18px;
}
#links {
	padding-top: 30px;
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	list-style: none;
	margin-left: 20px;
	.item-link {
		display: block;
		float: left;
		margin-left: 40px;
		text-align: center;
		color: #dfe2e9;
		a {
			color: inherit;
			&:hover {
				color: #9ec4dc;
				text-decoration: none;
			}
		}
	}
	.active-link {
		color: #9ec4dc;
		text-transform: uppercase;
		border-bottom: 1px solid #9ec4dc;
	}
}
#user_menu {
	display: block;
	float: right;
	color: #9ec4dc;
	cursor: pointer;
	padding: 30px 27px;
}
#modul1 {
	display: block;
	position: relative;
	margin: 0 auto;
	height: auto;
	width: 100%;
	max-width: 1280px;
	img{
		width: 100%;
		height: auto;
		position: absolute;
		pointer-events: none;
	}
}
.welcome_text {
	position: relative;
	color: #fff;
	z-index: 1;
	width: 60%;
	padding-left: 60px;
	padding-top: 80px;
}

.countdown{
	display:block;
	width:30%;
	height: auto;
	position:relative;
	border:1px solid #ccc;
	margin:20px 0 20px 50px;
	font-weight: bolder;
	min-width:260px;

	.cd-title{
		padding:10px;
		font-size:14px;
	}

	.cd-elem{
		display:block;
		float:left;
		margin-left:10px;
		width:20%;
		text-align: center;

		div{
			margin:0;
			border:1px solid #000;
			padding:0;
			white-space: nowrap;
			border-radius:5px;

			div{
				display:inline-block;
				width:50%;
				text-align:...

JavaScript

'use strict';

function countDown(){
	var setDate = new Date('11 Nov 2014, 17:00:00');
	var msPerDay = 24 * 60 * 60 * 1000 ;

	window.setInterval(function(){
		var today = new Date();
		var timeLeft = (setDate.getTime() - today.getTime());
		
		var edaysLeft = timeLeft / msPerDay;
		var daysLeft = Math.floor(edaysLeft);
		
		var ehrsLeft = (edaysLeft - daysLeft)*24;
		var hrsLeft = Math.floor(ehrsLeft);
		
		var eminsLeft = (ehrsLeft - hrsLeft)*60;
		var minsLeft = Math.floor(eminsLeft);
		
		var esecsLeft = (eminsLeft - minsLeft)*60;
		var secsLeft = Math.floor(esecsLeft);
		
		if(daysLeft < 10){
			daysLeft = '0' + daysLeft;
		}
		if(hrsLeft < 10){
			hrsLeft = '0' + hrsLeft;
		}
		if(minsLeft < 10){
			minsLeft = '0' + minsLeft;
		}
		if(secsLeft < 10){
			secsLeft = '0' + secsLeft;
		}
		
		$('.countdown .cd-seconds div').html('<div>' + ((secsLeft + '').split('').join('</div><div>'))+'</div>');
		$('.countdown .cd-minutes div').html('<div>' + ((minsLeft + '').split('').join('</div><div>'))+'</div>');
		$('.countdown .cd-hours div').html('<div>' + ((hrsLeft + '').split('').join('</div><div>'))+'</div>');
		$('.countdown .cd-days div').html('<div>' + ((daysLeft + '').split('').join('</div><div>'))+'</div>');
	}, 1000);
}

$(document).ready(function(){
	countDown();
	$('.nor-font').fitText(1, { minFontSize: '10px', maxFontSize: '18px' });
	$('.med-font').fitText(1, { minFontSize: '20px', maxFontSize: '30px' });
	$('.big-font').fitText(1, { minFontSize: '30px', maxFontSize: '50px' });
});