JSFiddle - React, Tailwind, and code Playground

by Milan Karagunović

HTML

<header>
    
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
    
  <span class="clearfix"></span>  
    
</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet faucibus velit, eu semper erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus scelerisque lobortis justo ac bibendum. Vivamus vulputate tristique tellus vitae posuere. Nulla imperdiet orci et sem tincidunt ornare. Donec ac justo dui. Cras tempor convallis enim fermentum mattis. Vestibulum vel neque ultricies, molestie diam id, fringilla libero.
</p>
<p>Nam porttitor mi et lacus viverra tempor. Maecenas egestas, ante ut lacinia tincidunt, tellus est suscipit ante, suscipit consectetur eros mauris et nunc. Integer nec hendrerit mauris. Suspendisse potenti. Fusce et aliquet ligula, eu tempus orci. Curabitur vitae dignissim erat. Fusce laoreet gravida urna, in volutpat ante facilisis sed. Donec lobortis justo a risus condimentum, non mollis libero posuere. Sed lacinia enim porta, commodo velit a, tristique sapien.
</p>
<p>Aenean consequat dolor quis placerat luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida metus vitae viverra semper. Cras laoreet pretium sem, eu placerat justo. Duis feugiat volutpat adipiscing. Curabitur ullamcorper suscipit varius. Sed a pulvinar nisi. Nullam aliquam orci a tincidunt convallis.
</p>

CSS

body {
    font: 16px/28px verdana;
    font-family: 'Title',"Lucida Sans","Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
}
p {
    margin-bottom: 15px;
    padding: 0 10px 0 10px;
}
p:first-letter {
    padding-left: 20px; /* If you want to indent the paragraph */
}
header {
    width:100%;
    margin-bottom: 20px;
}
nav ul li {
    float:left;
    list-style: none;
    text-align: center;
    width: 20%;
    border-bottom: 1px solid rgba(22,22,22,0.3);
}
nav ul li a {
    display: inherit;
    padding: 15px 0 15px 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}
nav ul li a:hover{
    color: #ccc;
    background:rgba(0,200,80,1);
    transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
}
.clearfix {
    display: block;
    clear: both;
}