JSFiddle - React, Tailwind, and code Playground

by jayakrishnancn

HTML

<div class="container">
  <div id="logo"><img src="https://i.imgur.com/3SBvB3a.jpg"/></div>
  <div id="nav">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Gallery</li>
      <li>Contact</li>
    </ul>
  </div>
  <div id="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</div>
</div>

CSS

.container {
  text-align: center;
}

#logo, img {
  position: relative;
  width: 100%;
}

#nav {
  position: relative;
  background: grey;
  color: #fff;
  text-align: center;
  margin-top: -8%;
}
#nav ul, #nav li {
  display: inline-block;
}
#nav li {
  padding: 10px;
}

#content {
  margin-top: 20px;
}