JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

  <body>

<audio id="audio" src="https://ms04.spac.me/m/001225189113158046176213210080064164020061128187229073221038159245/1607346156/109460556/0/e8899e8d81888cb18c8683c1f792dd5f/Neizvestnyj-Bez_nazvanija-spaces.im.mp3" controls autoplay loop onloadeddata="setHalfVolume()"></audio></br>
<script>
    function setHalfVolume() {
        var myAudio = document.getElementById("audio");
        myAudio.volume = 0.2;
    }
</script>
<img src="http://i.gifer.com/Paw.gif" width="150px" height="auto"></img>
<img src="https://i.gifer.com/WS2c.gif"  width="170px" height="auto"></img>
<img src="https://i.gifer.com/3MHB.gif"  width="45px" height="auto" style="padding-bottom: 25px;"></img>
<img src="https://i.gifer.com/51LJ.gif"  width="75px" height="auto"></img>


<img src="https://i.gifer.com/4HV7.gif"  width="146px" height="auto"></img>

<img src="https://i.gifer.com/2vDa.gif"  width="80px" height="auto"></img>

<img src="https://i.gifer.com/ZLnU.gif"></img>

  
  <ul id="navbar">

</ul>

CSS

.messages_cookies {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color: white;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	color: #666;
	padding: 15px 0;
	font-size: 14px;
}
.messages_cookies-wrp {
	position: relative;
	width: 80%;
	margin: 0 auto;
}
.messages_cookies-close {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -20px;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: auto 0;
	background: url(https://snipp.ru/img/сlose.png) 0 0 no-repeat;
}

JavaScript

setInterval(function () {
date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h < 10) ? '0' + h : h,
m = (m < 10) ? '0' + m : m,
s = (s < 10) ? '0' + s : s,
document.getElementById('time').innerHTML = h + ':' + m + ':' + s;
}, 1000);