JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<div class="header">
    <img id="GovDefendersLogo" src="images/GovDefendersLogo.png">
    <ol>
        <li class="links"><a href="mailto:[email protected]">Contact Us</a></li>
        <li class="links"><a href="blog">Blog</a></li>
        <li class="links"><a href="partners/index.html">Partners</a></li>
        <li class="links"><a href= "technology/index.html">Technology</a></li>
        <li class="links"><a href="index.html">Home</a></li>
    </ol>
</div>

CSS

.header {
    height: 77px;
    position: relative;
    clear: both;
    background-color: white;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    box-shadow: 0 0 16px 0 rgba(50,50,50,0.3);
    width: 100%;
}

#GovDefendersLogo {
    float: left;
}

ol {
    list-style: none;
    margin: 0;
    padding: 0;
    color: black;
    display:inline-block;
    float:left;
}

.links {
    margin-left: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    list-style: none;
    display:inline-block;
    vertical-align:middle;
}

#GovDefendersLogo,
    .links {
    vertical-align: middle;
}