JSFiddle - React, Tailwind, and code Playground

HTML

<header class = "roof">
            
                <section class = "container">
                    <!-- Company Logotype - Layout On The Left Of Top Bar -->    
                    <div class = "logotype">
                        
                        <a><img src = "Library/Images/Logo.png"></a>
                        <a><h2>Logo Text</h2></a>
                        
                    </div>
                    <!-- Company Main Menu Bar - Layout On The Center Of Top Bar -->    
                    <nav class = "">
                        
                        <ul class = "">
                            
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            
                        </ul>
                        
                    </nav>
                    <!-- Company Extra Menu Bar - Layout On The Right Of Top Bar -->
                    <nav class = "#">
                        
                        <ul class = "#">
                            
                            <li><a href = "#" >Extra Menu</a></li>
                            <li><a href = "#" >Extra Menu</a></li>
                            
                        </ul>
                        
                    </nav>
                    
                </section>
                    
            </header>

CSS

.container, nav ul {
  display: flex;
  justify-content: space-between;
}

nav ul li {
  list-style-type: none;
  margin-right: 15px;
}

nav ul li a {
  text-decoration: none;
  text-transform: uppercase;
}