JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<nav>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
            <div>
                <img src="https://thanet-web-design.com/FF/wp-content/uploads/2022/06/Freedom-Fields-Logo.png" alt="">
            </div>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        </nav>

CSS

nav {
           width: 100vw;
           height: 50px;
           margin-top: 30px;
           display: flex;
           flex-flow: row nowrap;
       }
       ul {
           height: inherit;
           display: flex;
           flex-flow: row nowrap;
           list-style: none;
           margin-left: 50px;
       }
       li {
           padding: 20px;
       }
       div {
           position: relative;
       }
       img {
           position: absolute;
           height: 100px;
           width: 100px;
           top: -20px;
       }