JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<h1 class="one">
<a href="index.html">
<center>Lorem Ipsum<br>Dolor</center>
</a>
</h1>
<ul class="navigation_bar menu">
  <li class="navigation_bar"><a href="index.html">Home</a></li>
  <li class="navigation_bar"><a href=#blog_posts.html>Blog Posts</a></li>
  <li class="navigation_bar"><a href=#social_media_links.html>Social Media Links</a></li>
  <li class="navigation_bar"><a href=#newsletter.html>Newsletter</a></li>
  <li class="navigation_bar"><a href=#contact.html>Contact</a></li>
  <li class="navigation_bar"><a href=#store.html>Store</a></li>
</ul>

CSS

h1.one {
    float: left;
    position: fixed;
    overflow: auto;
    color: #0066cc;
    font-size: 36px;
    border: 1px solid black;
    background-color: #333;
    text-align: center;
}
.menu{
    margin-right: 0px;
    float: right;
}
h1.one a{
    text-decoration: none;
    color: white;
}

h1.one:hover {
    background-color: #4CAF50;
}

ul.navigation_bar {
    list-style-type: none;
    right: 0;
    padding: 0;
    overflow: auto;
    width:80%;
    background-color: #333;
}

li.navigation_bar{
    float:right;
}

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

li a:hover {
    background-color: #4CAF50;
}

p {
    font-size: 24px;
    text-align: center;
}

p br {
    border: 1px solid rgb(12, 27, 232);
}
body {
    background-color: white;    
}