JSFiddle - React, Tailwind, and code Playground

by Michailstud

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Таймер</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="ostal">ДО КОНЦА АКЦИИ ОСТАЛОСЬ:</div>
            <div id="borderbutton">
               <div class ="textt" id="textd">Дней</div>
                   <div class ="textt" id="texth">Часов</div>
                   <div class ="textt" id="textm">Минут</div>
                   <div class ="textt" id="texts">Секунд</div>
                <div id="butscet">                   
                    <div class="blackkwadrat" id="days">9</div>
                    <div class="blackkwadrat" id="hour">10</div>
                    <div class="blackkwadrat" id="minute">9</div>
                    <div class="blackkwadrat" id="second">45</div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

body   {background-color: #808080}
    #ostal
    {
    width: 365px;
    height: 30px;
    color: #fff;
    margin-top:380px;
    margin-left:110px;
    font-size: 23px;
    position: absolute;
    }

    #borderbutton   
    {
    width: 410px;
    height: 120px;
    margin-top:420px;
    margin-left:95px;
    position: absolute;
    border:  2px solid red;
    }

#butscet 
    {
    width:335px;
    height:80px;
    background-color:#ffcc33;
    border-radius:40px;
     margin-top: 20px;
    margin-left: 40px;
    position: absolute;
    color: #fff;
    }

.blackkwadrat
    {
    background-color: black;
    color: #fff;
    display: inline;
    font-size: 40px;
    line-height: 80px;
    margin: 20px;
    }

.textt{
    position: absolute;
    color: black;
    z-index: 5;
}
#textd{
    
    left: 65px;
    top: 80px;
}
#texth{
    
    left: 135px;
    top: 80px;
}
#textm{
    
    left: 205px;
    top: 80px;
}
#texts{
    
    left: 290px;
    top: 80px;
}

JavaScript

"use strict";
window.onload = function () {
   setInterval(function()
{
  var end = new Date(2018, 06, 1, 0, 0, 0, 0);
  var now = new Date();

  var timer = '';
  var diff = end - now;

  var milliseconds = Math.floor(diff / 1000);
  var milliseconds_ = diff % 1000;

  var seconds = Math.floor(milliseconds / 60);
  var seconds_ = milliseconds % 60;

  var minutes = Math.floor(seconds / 60);
  var minutes_ = seconds % 60;

  var hours = Math.floor(minutes / 24);
  var hours_ = minutes % 24;

  var days = Math.floor(hours / 24);
  var days_ = hours % 24;

  timer = days_+'д '+hours_+':'+minutes_+':'+seconds_;

 document.getElementById('days').innerHTML = days_;
document.getElementById('hour').innerHTML = hours_;
document.getElementById('minute').innerHTML = minutes_;
document.getElementById('second').innerHTML = seconds_;
},1000);