JSFiddle - React, Tailwind, and code Playground
HTML
<div id="leveransinfo">
<img src="http://mobilprylar.nu/img/frakt.png"/>
<img id="posten" src="http://mobilprylar.nu/img/s/17.jpg"/>
<div id="timeleft"></div></div>
<div id="levinfo">
<b>Leveransinformation</b></br>
</br>
ContentContentContentContentContentContentContentContent</br>
ContentContentContentContentContentContentContentContentContent</br>
</br>
ContentContentContentContentContentContentContentContentContentContentContent</br>
</br>
</div>
CSS
#leveransinfo {
margin-top:30px;
margin-right:50px;
float:right;
}
#posten {
margin-left:30px;
}
#timeleft{
margin-left:10px;
margin-top:4px;
float:right;
color:#000;
}
#levinfo {display:none}
#leveransinfo:hover ~ #levinfo{
display:block;
background-color:#f00;
float:right;
padding: 5px 5px 5px 5px;
border-radius:5px;
}
#levinfo:hover{
display:block;
background-color:#f00;
float:right;
padding: 5px 5px 5px 5px;
border-radius:5px;
}
JavaScript
$(document).ready(function () {
setInterval(function () {
var now = new Date();
var day = now.getDay();
var end;
if(day >= 1 && day <= 5) {
end = new Date(now.getYear(), now.getMonth(), day, 12, 0, 0, 0);
} else {
end = new Date(now.getYear(), now.getMonth(), day, 10, 0, 0, 0);
}
var timeleft = end.getTime() - now.getTime();
var diff = new Date(timeleft);
$("#timeleft").html("Order now and we ship your order in:</br> " + diff.getHours() + "h " + diff.getMinutes() + "Min " + diff.getSeconds() + "Sec");
}, 1000);
});