JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<nav>
        <img class="logoleft" src="https://dblagojevic.000webhostapp.com/Pizza/jpg/logo2-1.png">
        <div class="deliverin"> Liefern nach</div>
        <button class="ermitteln" onclick="getLocation()">
            <img class="marker" src="https://dblagojevic.000webhostapp.com/Pizza/jpg/marker.png">
            Ermitteln
        </button>
        <button class="login">
            <img class="logpic" src="https://dblagojevic.000webhostapp.com/Pizza/jpg/1631282101129.png">
            Login
        </button>
    </nav>

CSS

body {
            margin: 0 auto;
            max-width: 1600px;
            display: flex;
            flex-direction: column;
            /* Die Elemente in body sollen die Breite vollständig
            ausfüllen, daher: */
            align-items: stretch;
        }

        nav {
            background-color: lightblue;
            display: flex;
            align-items: center;
            /* Innerhalb der Navigation sollen die Elemente 
            zentriert sein, daher: */
            justify-content: center;
        }

        .logoleft {
            max-width: 300px;
        }

        .deliverin {
            flex: 0 0 auto;
        }

        .ermitteln {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
        }

        .marker {
            width: 25px;
        }

        .login {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
        }

        .logpic {
            width: 70px;
        }

        @media (max-width: 1000px) {
            nav {
                flex-direction: column;
            }
        }