JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Dirt Days</title>

    <!-- desktop -->
    <link href="style.css" rel="stylesheet" type="text/css">
    <!-- mobile -->
    <link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width:320px)">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <meta name="description" content="Dirty Days">
    <meta name="viewport" content="dirty days, mountainbike, cykler, events, skov, natur, bike">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
  </head>

  <body>
    <div id="section">
      <div id="logo">
        <a href="index.html"><img src="img/ddlogo.png" width="201" height="198" alt="" /></a>
      </div>

      <ul class="nav">
        <li><a href="index.html#section_info">FORSIDE</a></li>
        <li><a href="//">INFORMATION</a></li>
        <li><a href="/work/">EVENTS</a></li>
        <li><a href="/clients/">KONTAKT</a></li>
      </ul>

      <h1>#DD</h1>

      <center>
        <table id="table" border="0">
          <tr>
            <td align="center" colspan="6">
              <div class="numbers" id="count2" style="padding: 5px 0 0 0; "></div>
            </td>
          </tr>
          <tr id="spacer1">
            <td align="center">
              <div class="numbers"></div>
            </td>
            <td align="center">
              <div class="numbers" id="dday"></div>
            </td>
            <td align="center">
              <div class="numbers" id="dhour"></div>
            </td>
            <td align="center">
              <div class="numbers" id="dmin"></div>
            </td>
            <td align="center">
              <div class="numbers" id="dsec"></div>
            </td>
            <td align="center">
              <div class="numbers"></div>
            </td>
         ...

CSS

@charset "UTF-8";
  style {}
  
  html,
  body {
    width: 100%;
    height: auto;
  }
  
  * {
    margin: 0;
    margin-padding: 0;
  }
  
  #logo {
    width: 200px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  .nav li {
    display: inline;
  }
  
  .nav a {
    font-family: 'Lato', sans-serif;
    font-size: 0.7em;
    color: #FFF;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
  }
  
  #section {
    background-image: url(img/event.png);
    height: 750px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  
  #section_info {
    background-color: #FFF;
    height: 750px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  
  #section_events {
    background-image: url(img/contactwall.png);
    height: 750px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  
  #section_contact {
    height: 750px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  
  h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 20em;
    color: #FFF;
    text-align: center;
  }
  
  h2 {
    font-family: 'Open Sans', sans-serif;
    color: black;
    font-size: 1.3em;
    text-align: left;
    padding-left: 3%;
    padding-top: 2%;
    padding-bottom: 4%;
    letter-spacing: 4px;
  }
  
  #footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 6%;
    background-color: #1c1c1c;
  }
  
  h3 {
    font-family: 'Open Sans', sans-serif;
    color: #FFF;
    font-size: 0.8em;
    text-align: center;
    padding-top: 1%
  }
  
  .numbers {
    width: 55px;
    text-align: center;
    font-family: Arial;
    font-size: 30px;
    font-weight: bold;
    font-style: normal;
    color: #FFF;
  }
  
  .title {
    width: 55px;
    text-align: center;
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
    color:...