JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html>
        
        <head>
            <title>A. Willi A.G - Fachkräft für Rohr-Stahl Gebäudetechnik</title>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="description" content="An interactive getting started guide for Brackets.">
            <link rel="stylesheet" href="2.css">
            <link rel="icon" type="image/ico" href="/images/favicon.png"/>
        </head>
        <body>
            <div id="banner">
            <img src="/images/logo.png">
            </div>
            
            
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="/html/contact.html">Kontakt</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Bewerber</a>
        <div class="dropdown-content">
          <a href="#">Info</a>
          <a href="#">Jobs</a>
        </div>
      </li>
         <li class="dropdown">
            <a href="#" class="dropbtn">Kunde</a>
            <div class="dropdown-content">
                 <a href="/html/personnel.html">Personalverleih</a>
                     <a href="/html/rental.html">Werkzeuge Mieten</a>
                        <a href="/html/refrences.html">Referenzen</a>
                     <a href="/html/quali.html">Qulität, Sicherheit und Weiterbildung</a>
             </div>
        </li>
    </ul>
    
            
            <p>
                Die A. Willi AG ist als Personalverleiher mit über 35-jähriger Erfahrung in der ganzen Schweiz und im Ausland erfolgreich tätig. 
            </p>
         
            <p>
                Wir bringen erfahrene Arbeitskräfte und anspruchsvolle Kunden zusammen. Derzeit sind über 100 Arbeitnehmer für die A. Willi AG im Einsatz. 
            </p>
            
        
    
            <p>
               Wir haben uns spezialisiert auf dem Verleih von qualifiziertem Fachpersonal in den Bereichen Rohr – Stahl – Gebäudetechnik. Für die Beratung und...

CSS

html {
    background: lightgrey;
    -webkit-font-smoothing: antialiased;
    
}

body {
    background: #fff;
    color: black;
    font-family: "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 900px;
    padding: 2em 0.5em 4em;
}



h2 {
    margin-top: 1.3em;
}




samp {
    display: none;
}

img {
    background: transparent;
    display: block;
    margin: 1.3em auto;
    max-width: 100%;
}




ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -2%;
    
 
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #333;
 color: darkgray;
  text-decoration: none;}


li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}



#banner {
    margin-top: -8%;
    width:100%;
    min-height:189px;
}


#footer
{ width: 100%;
  font-family: 'Helvetica', sans-serif;
  font-size: 100%;
  height: 80px;
  padding: 28px 0 5px 0;
  text-align: center; 
  background: #333;
  border-top: 2px solid #333;
  color: #FFF;
  bottom: 0;
  left: 0;
    
}

#footer p
{ line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer a
{ color: #FFF;
  text-decoration: none;}

#footer a:hover
{ color: darkgray;
  text-decoration: none;}