JSFiddle - React, Tailwind, and code Playground

by Adrian Carriger

HTML

<div class="container">
  <div>
    <nav class="site-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Logos</a></li>
        <li><a href="#">Websites</a></li>
      </ul>
    </nav>
  </div>
  <div>
    <h2><a href="">Welcome</a></h2>
    <p>Hey!</p>
    <p>Welcome to our site.</p>
  </div>
</div>

CSS

.site-nav ul {
    margin: 0;
    padding: 0;
}
.site-nav ul li {
    list-style: none;
    float: left;
}

.site-nav ul li a:link,
.site-nav ul li a:visited {
    display: block;
    padding: 10px 18px;
    border-top: white 3px solid;
    text-decoration: none;

}

/* Added this to simulate your window size */
.container {
  width: 360px;
}

/* Fix */
.site-nav {
  float: left
}