JSFiddle - React, Tailwind, and code Playground

by Raphi089

HTML

<style>
  section {
    display: flex;
  }

  article {
    border: 0px solid rgb(0, 0, 0)
  }

  article#links {
    text-align: left;
    max-width: 2.5cm;
  }

  article#mitte {
    text-align: center;
    width: 100%;
  }

  article#rechts {
    text-align: right;
    max-width: 1.5cm;
  }

</style>

<section>
  <article id="links">
    <a href=""><img src="images/firmenlogo ohne Text.jpg" alt:"Firmenlogo" style="width: 2cm"></img></a>
  </article>
  <article id="mitte">
    <!--Navigation-->
    <nav role="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Soziale Medien</a>
          <ul class="dropdown">
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">YouTube</a></li>
          </ul>
        <li><a href="#">Unsere Dienste</a>
          <ul class="dropdown">
            <li><a href="#">Webseiten erstellen</a></li>
            <li><a href="#">Soziale Medien betreung</a></li>
            <li><a href="#">YouTube</a></li>
          </ul>
        </li>
        <li><a href="#">Über Mich</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>

  </article>
  <article id="rechts">
    <button style="width: 1.5cm; height: 1.5cm; background-color: white; border-radius: 10%">
      <img src="images/moon-gd7d90d53f_640.png" alt="dark" style="width: 1cm; height: 1cm;"></button>
    </button>

  </article>
</section>
<hr>

CSS

a {
    text-decoration: none;
  }
  
  nav {
    font-family: monospace;
  }
  
  /* Kommentartext */
  ul {
    background: rgb(255, 0, 0);
    list-style: none;
    margin: 0;
    padding-left: 0;
    width: ;
   
}
  
  /* Kommentartext */
  li {
    color: rgb(255, 0, 200);
    background: lightblue;
    display: block;
    float: left;
    padding: 1rem;
    position: relative;
    text-decoration: none;
    transition-duration: 0.0s;
    height: 25px;
     
  }
    
/* Textfarbe */
  li a {
    color: rgb(0, 0, 0);
  }
  
/* hover Hintergrund */
  li:hover,
  li:focus-within {
    background: rgb(255, 255, 255);
    cursor: pointer;
  }
  
/* Kommentartext */
  li:focus-within a {
    outline: none;
  }
  
/* Kommentartext */
  ul li ul {
    background: rgb(20, 255, 235);
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    transition: all 0.0s ease;
    margin-top: 1rem;
    left: 0;
    display: none;
  }
  
  ul li:hover > ul,
  ul li:focus-within > ul,
  ul li ul:hover,
  ul li ul:focus {
    visibility: visible;
    opacity: 1;
    display: block
  }
  
  ul li ul li {
    clear: both;
    width: 100%;
  }