JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>

<div id="billede">
<div>
    <nav>
        <ul id="menu">
        	<li><a href="#">Top</a></li>
            <li><a href="#">Om Eventet</a></li>
            <li><a href="#">Lokation</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</div>

<div id="logodiv">
<img src="design/logotop.png">
</div>

<div id="overskrift">
	<h1>EVENTET STARTER OM</h1>
</div>

<div id="countdowner">
<table id="table">
<tr>
<div id="countdown">
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
</div>
<tr>
<tr>
<td class="timeLabel">DAGE</td>
<td class="timeLabel">TIMER</td>
<td class="timeLabel">MIN</td>
<td class="timeLabel">SEK</td>
</tr>
</tr>
</tr>
</table>
</div>
</div>

<h2>Hvad skal der ske?</h2>
<hr></hr>
<div id="infoydre">
    <div id="information">
        <p>Lorem ipsum dolor sit amet, duis facilisis eu, condimentum et mollis risus viverra adipiscing tristique. A ultricies, augue nibh scelerisque turpis consequat. Sapien id dui nulla quam viverra erat, sit sed, purus pulvinar amet justo. Dui nam at justo, ultricies id facilisis est non. Et vitae eget mi, pede sit duis orci eros corrupti. Tellus sem id 
<br><br>
eget nam vel pede. Sed purus pharetra in sollicitudin suspendisse pellentesque, nec risus arcu nonummy, curabitur hymenaeos eu. Rutrum aliquet, et sit ut integer praesent sit cras, aliquet molestie pellentesque neque quam luctus odio</p>
        <p>Lorem ipsum dolor sit amet, duis facilisis eu, condimentum et mollis risus viverra adipiscing tristique. A ultricies, augue nibh scelerisque turpis consequat. 
<br><br>
Sapien id dui nulla quam viverra erat, sit sed, purus pulvinar amet justo. Dui nam at justo, ultricies id facilisis est non. Et vitae eget mi, pede sit duis orci eros corrupti. Tellus sem id. eget nam vel pede. Sed purus...

CSS

@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Montserrat:400|Raleway:400,500,600,700,800|);

body {
margin:0;
}

#billede { 
background:url(baggrund.jpg) no-repeat; 
background-size: cover;
height: 100vh;
/*background-position: top center;*/
}

#logodiv {
float: left;
text-align:center;
width:100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-220%);
}

#logodiv>img {
width:15em;

}

h1  {
font-family:raleway;
font-weight:100;
width:100%;
text-align:center;
color:white;
letter-spacing:11px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-230%);
font-size:2.5em;
white-space: nowrap;
}

#countdowner {
font-family:sans-serif;
color:white;
position:absolute;
margin:0;
padding:0;
width:100%;
font-size:2em;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-20%);
}

#id1 {
font-size:2.5em;
}

#id2 {
font-size:2.5em;
}

#id3 {
font-size:2.5em;
}

#id4 {
font-size:2.5em;
}

.timeLabel {
font-size:0.7em;
color:#f1a01e;
font-family:montserrat;
font-weight:700;
}

#table {
margin:0 auto;
text-align:center;
}

#table td{
padding:0px 45px;
}

#menu {
position:absolute;
padding:0;
width:100%;
bottom:0;
text-align:center;
float: left;
}

#menu>li {
font-size:20px;
list-style:none;
display:inline-block;
text-transform:uppercase;
letter-spacing:3px;
font-family:raleway;
font-weight:400;
}

#menu>li>a {
padding:0 15px;
text-decoration:none;
color:white;
}

#menu>li>a:hover {
color:#f1a01e;
}

h2 {
text-align: center;
font-size: 2.2em;
font-family:raleway;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 700;
margin: 0;
padding-top: 70px;
color: #171717;
padding-bottom: 10px;
white-space: nowrap;
color:black;
}

p {
color: #171717;
margin: 0;
line-height: 35px;
font-size: 23px;
letter-spacing: 2px;
font-family: raleway;
}

hr {
width: 160px;
height: 5px;
background-color: #4bc9f4;
border: 0;
}

#infoydre {
width: 100%;
}

#information {
margin: auto;
width:...