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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
    <!-- 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>
                <div>0</div><div>0</div>
            </div>
            <p>Minutes</p>
        </div>
        
        <div class="cd-seconds cd-elem">
            <div>
                <div>0</div><div>0</div>
            </div>
            <p>Seconds</p>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- Finish countdown -->
    
    <!-- Start vote-system -->
    <div class="exp_box">
        <div class="exp_item">
            <div class="exp_show">
                <div class="expShow_no">1</div>
                <div class="expShow_name">Customer Skills</div>
                <div class="expShow_icon"><i class="fa fa-plus-circle"></i></div>
                <div class="expShow_result">0</div>
                <div class="clearfix"></div>
            </div>
            
            <div class="exp_hide">
                <div class="rate_system">
                    <div class="rate_item">
                        <div class="rate_question">
                            Was the sales consultant’s appearance professional?
                        </div>
                        <div class="rate_mark">
                 ...

SCSS

*{margin:0;padding:0;box-sizing:border-box;}
body{
    background-color:#aaa;
}

.clearfix{
	clear:both;
}

.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: center;
				border:none;
				padding:5px 0px 5px 0px;
				margin:0;
				background-color:rgba(255,255,255,1);
				border-radius:0;
			}

			&:first-child{
				border-right:1px solid #000;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}

			&:last-child{
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
		}
		p{
			font-size:10px;
		}
	}
}

.exp_box {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	border-radius: 5px;
	border: 1px solid #000;
	background-color: rgba(255,255,255,1);
	margin: 10px 0;
	padding: 20px 10px;
}
.exp_item {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}
.exp_show {
	position: relative;
	display: block;
	background-color: rgba(0,0,0,0.1);
	border: 1px solid #000;
	border-radius: 3px;
	margin: 5px 0;
	font-size: 20px;
	line-height: 20px;
	max-height: 42px;
	overflow: hidden;
	cursor:pointer;
	transition:all .2s linear;
	&:hover {
		color: rgba(255,255,255,0.8);
		background-color: rgba(0,0,0,0.5);
		.expShow_no {
			border-right: 1px solid rgba(255,255,255,0.5);
		}
	}
}
.exp_show_active {
	color: rgba(255,255,255,0.8);
	background-color: rgba(0,0,0,0.7);
	.expShow_no {
		border-right: 1px solid rgba(255,255,255,0.5);
	}
}
.expShow_no {
	display: block;
	float: left;
	padding: 10px 15px;
	border-right:1px solid #000;
}
.expShow_name {
	display: block;
	float:...

JavaScript

'use strict';
function countDown(){
	var setDate = new Date('4 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(){
	console.log('jQuery is ready!');
	countDown();

	$('.exp_show').on('click', function(e){
		e.preventDefault();
		e.stopPropagation();

		var $this = $(this).parent().find('.exp_hide'),
			speed = 300;
		$(this).toggleClass('exp_show_active');
		$(this).find('.expShow_icon .fa-plus-circle').toggleClass('fa-minus-circle');
		$this.slideToggle(speed);
		$('.exp_item > .exp_hide').not($this)
			.slideUp(speed)
			.parent().find('.exp_show').removeClass('exp_show_active')
			.find('.expShow_icon .fa-plus-circle').removeClass('fa-minus-circle');
	});

	$('.dropdown-menu div').on('click', function(e){
		e.preventDefault();
		var rate = parseInt($(this).text());
	    var oldRate =...