JSFiddle - React, Tailwind, and code Playground

HTML

<body>

        <div class="logo">

            <p>logo</p>

        </div>


        <div class="nav">
            <ul>
                <li class="main"><a href="main.html">Domov</a></li>
                <li class="gallery"><a class="active" href="gallery.html">Galéria</a></li>
                <li class="contacts"><a href="contacts.html">Kontakt</a></li>
            </ul>
        </div>


        <div class="picture">

            <h1>picture</h1>

        </div>


        <div class="aboutus">

            <h1>about us</h1>

        </div>



    </body>

CSS

.logo{

    background-color: blue;

    height: 125px;
    margin-right: 25%;
    margin-left: 25%;


}

 .nav{


    margin-right: 25%;
    margin-left: 25%;

 }

 .picture{
    margin-right: 25%;
    margin-left: 25%;
    background: yellow;
    height: 300px;
 }

  .aboutus{
    margin-right: 25%;
    margin-left: 25%;
    background: blue;
    height: 200px;

 }
  h1
  {
    margin:0
  }