JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html public>
<html lang="de">
<head>
<title>Intranet</title>
<link href="css/formate.css" rel="stylesheet" type="text/css">
</head>


<body>

<table style="border-collapse:collapse;margin:auto">
<tr>
<td style="padding:0;background-image:url('pix/ra1.jpg');background-repeat:repeat-y;width:18px"></td>
<td style="padding:0;background-color:white;width:1000px">
<div class="kopf">
        <h1>Willkommen im Intranet</h1>
        <img class="bildlogo" src="pix/logo.jpg" alt="Firmenlogo">
        <img class="bild" src=pix/t720s.jpg alt="Logo Startseite defekt">
        <nav class="kopfnav">
                <a class="kopflinks" href="default.htm" target="_self">Startseite</a>
                <a class="kopflinks" href="http://www.google.de" target="_blank">Google</a>
                <a class="kopflinks" href="http://www.wissen.de" target="_blank">Wissen</a>
                <a class="kopflinks" href="http://www.wikipedia.de" target="_blank">Wikipedia</a>
                <a class="kopflinks" href="http://www.leo.org" target="_blank">Leo</a>
                <a class="kopflinks" href="http://www.mercedes-benz.de" target="_blank">Mercedes</a>
                <a class="kopflinks" href="http://www.ihk-nordwestfalen.de" target="_blank">IHK-M&uuml;nster</a>
                <a class="kopflinks" href="http://www.link.de" target="_blank">link</a>
        </nav>
</div>
<nav class="navigation">
        <a class="navigationlinks" href="#home">Bereich 1</a>
        <a class="navigationlinks" href="#news">Bereich 2</a>
        <a class="navigationlinks" href="#contact">Bereich 3</a>
        <a class="navigationlinks" href="#about">Bereich 4</a>
        <a class="navigationlinks" href="#home1">Bereich 5</a>
        <a class="navigationlinks" href="#news1">Bereich 6</a>
        <a class="navigationlinks" href="#contact1">Bereich 7</a>
        <a class="navigationlinks" href="#about">Bereich 8</a>
        <a class="navigationlinks" href="#home2">Bereich 9</a>
        <a...

CSS

body {
        background-color:#e6e6e6;
        margin:0;
}

div.body {
        margin:auto;
        width: 1000px;
        font-family: Arial;
}

div.hintergrund {
        position:fixed;
        background-color:aqua;
        top:0;
        width:1000px;
}

div.kopf {
        position:fixed;
        margin:inherit;
        z-index:100;
        background-color:white;
        top: 0;
}

h1 {
        margin-bottom:4px;
        margin-top:0px;
        text-align:center;
        font-family: "Leelawadee";
}

img.bildlogo {
        display:block;
        margin:inherit;
        position:absolute;
        top:2px;
        right:2px;
        z-index:101;
        width:99px;
        height:40px;
}

img.bild {
        display:block;
        margin:inherit;
        width:1000px;
        height:150px;
}

nav.kopfnav {
        white-space:nowrap;
        text-align:center;        
        background-color:#cc7700;
        height:34px;
        margin:inherit;
        margin-top:0px;
}

a.kopflinks {
        background-color:#ff9900;
        text-decoration:none;
        display: inline-block;
        border-radius: 0 0 15px 15px;
        width: 11%;
        padding: 1px 3px 1px 2px;
        transition: .5s 0s;
        border: 3px #c7c7c7 solid;
        border-top: none;
        color:black;
}

a.kopflinks:hover, a.kopflinks:focus {
        background-color:red;
        text-shadow: 1px 1px 1px Gray;
        padding-bottom: 10px;
        transition: .3s;
        outline: none;
        font-weight:bold;
}

nav.navigation {
        background-color: #c7c7c7;
        position: fixed;
        top: 226px;
        z-index: 99;
}

a.navigationlinks {
        display:block;
}

a.navigationlinks:link, a.navigationlinks:visited {
        display: block;
        font-weight: bold;
        color: white;
        padding: 12px 5px 12px 0;
        text-decoration: none;
        margin-top:2px;
        background-image:url('../pix/navi4i.jpg');
        background-size:100%;
/*       ...