JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style>.background {
border-style: none;
width: 62px;
height: 58px;
}
.numbers {
border-style: none;
background-color: #292929;
padding: 0px;
width: 62px;
height: 42px;
text-align: center;
font-family: Arial;
font-size: 34px;
font-weight: normal; /* options are normal, bold, bolder, lighter */
color: #f18b49; /* change color using the hexadecimal color codes for HTML */
margin-top:200px;
margin-left:18%;
}
.title { /* the styles below will affect the title under the numbers, i.e., "Days", "Hours", etc. */
border: none;
padding: 0px;
margin: 0px 3px;
width:10%;
text-align: center;
font-family: Arial;
font-size: 10px;
font-weight: normal; /* options are normal, bold, bolder, lighter */
color: #999999; /* change color using the hexadecimal color codes for HTML */
background-color: #000000;
margin-top:203px;
margin-left:18.5%;
}
#form { /* the styles below will affect the outer border of the countdown timer */
width: 50%;
height: 80px;
border-style: solid; /* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */
border-width: 2px;
border-color: #666666; /* change color using the hexadecimal color codes for HTML */
background-color: #000000;
padding: 5px;
margin-left:26%;
margin-top:50px;
}
.line {
width: 62px;
height: 2px;
z-index: 15;
}
</style>
<script language="javascript" type="text/javascript">
/* Change the items below to create your countdown target date and announcement once the target date and time are reached. */
var current="Så er ølfesten skydt i gang!"; //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters
var year=2013; //—>Enter the count down target date YEAR
var month=05; //—>Enter the count down target date MONTH
var day=23; ...