JSFiddle - React, Tailwind, and code Playground

by xrays72

HTML

<script src="http://keith-wood.name/js/jquery.countdown.js"></script>
<script src="http://keith-wood.name/js/jquery.countdown-ru.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Поздравляем Вас с наступающими праздниками!</title>
        <link rel="stylesheet" type="text/css" href="css/style.min.css" />
    </head>
    <body>
        <div id="text"><div>До Нового Года осталось:</div></div>  
        <div class="podstavka conf">
            <div class="stovbur"></div>
            <div class="configurate conf"></div>
            <div class="a z"></div>
            <div class="b z"></div>
            <div class="c z"></div>
            <div class="d z"></div>
            <div class="e z"></div>
            <div class="f z"></div>
            <div class="g z"></div>
            <div class="h z"></div>
            <div class="i z"></div>
            <div class="j z"></div>
            <div class="k z"></div>
            <div class="l z"></div>
            <div class="circle br50"></div>
            <div class="timer">
                <div id="defaultCountdown"></div>
            </div>
        </div>
    </body>
</html>

CSS

body {
    background: url("http://subtlepatterns.com/patterns/whitediamond.png") repeat scroll 0 0 transparent;
}

#text {
    margin-top:2%;
    color: #39f; 
    font:bold 40px Verdana, Arial;
    text-align: center;
    text-shadow: 4px 4px 7px rgba(0,0,0,0.2),0px -6px 38px rgba(255,255,255,0.3);
}
#text div{
    font-size:22px;
    color:#FF4500;
    margin-top:4%;
}

.podstavka {
    top: 80%;
    left: 45%;
}
.podstavka .conf {
    top: 0%;
    left: 10%;
}
.conf{
    position: absolute;
    width: 100px;
    height: 30px;
    background: #222;
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
}
.podstavka .stovbur {
    position: absolute;
    top: -120%;
    left: 41%;
    width: 30px;
    height: 60px;
    background: #DAA520;
}

.br50{
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px; 
    border-radius: 50px;
}
.z{
    position: inherit;
    width:0;
    height: 0;
    border: solid transparent;
    border-bottom-color: #008a00;
}

.podstavka .a {
    top: -430%;
    left: -65%;
    border-width: 0 120px 120px;
}

.podstavka .b {
    top: -485%;
    left: -55%;
    border-width: 0 110px 110px;
}

.podstavka .c {
    top: -535%;
    left: -45%;
    border-width: 0 100px 100px;
}

.podstavka .d {
    top: -585%;
    left: -35%;
    border-width: 0 90px 90px;
}

.podstavka .e {
    top: -635%;
    left: -25%;
    border-width: 0 80px 80px;
}

.podstavka .f {
    top: -685%;
    left: -15%;
    border-width: 0 70px 70px;
}

.podstavka .g {
    top: -725%;
    left: -5%;    
    border-width: 0 60px 60px;
}

.podstavka .h {
    top: -765%;
    left: 5%;    
    border-width: 0 50px 50px;
}

.podstavka .i {
    top: -805%;
    left: 15%;    
    border-width: 0 40px 40px;
}

.podstavka .j {
    top: -835%;
    left: 25%;
    border-width: 0 30px 30px;
}

.podstavka .k {
    top: -855%;
    left: 35%;
    border-width: 0 20px 20px;
}

.podstavka .l {
    top: -872%;
    left: 45%;
    border-width: 0 10px...

JavaScript

$(function(){
             if(!$.browser.opera)
                 $('.podstavka').children().filter(':gt(1)').filter(':lt(12)').addClass('br50');
             var NYDay = new Date(2011, 1, 1, 00, 00, 00) ;
             NYDay = new Date(NYDay.getFullYear() + 1, 1 - 1, 1);
             $('#defaultCountdown').countdown({until: NYDay});
             $('#year').text(NYDay.getFullYear());
         });