JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<header>
            <div id="logo">
                <img src="img/header/logo.png" alt="Logo">
            </div>
            <div id="menu">
                <div>Home</div>
                <div>Club-Life</div>
                <div>Training</div>
                <div>Instructors</div>
                <div>Contact</div>
            </div>
        </header>

CSS

header {
    width: 100%;
    height: 65px;
    background: #fff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #252c3a;
    flex-wrap:wrap;
}

#menu {
    
    display: flex;
     flex-wrap:wrap;
}

#menu div {
    width: 100px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}