JSFiddle - React, Tailwind, and code Playground

by Osama Soliman

HTML

<div class="navbar">
    <ul style="float:right;list-style-type:none;">
        <li><a href="mailto:enquiry@efc.ac.uk">CONTACT US</a></li>
        <li><a href="#">JOBS</a></li>
        <li><a href="#">NEWS AND EVENTS</a></li>
        <li><a href="#">BUISNESS</a></li>
        <li><a href="#">COURSES</a></li>
        <li><a href="#">ABOUT EPPING FOREST COLLEGE</a></li>
        <li><a href="#">HOME</a></li>
     </ul>
</div>

CSS

ul {
  margin:0;
}
.navbar {
    margin-top: 0px;
}
.navbar ul {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    list-style-type: none;
    background-color: #333;
}

.navbar li {
    float: right;
    font-weight: 700;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover {
    background-color: #e74c3c;
}