JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div class="navbar">
            <!--Create the button home -->
            <p class="innav">Text 1</p>
            <p class="HL">|</p>
            <p class="rightIn">Text 2</p>
            <p class="HL">|</p>
            <p class="rightIn">Text 3</p>
            <p class="HL">|</p>

        </div>

CSS

.HL{
    margin-left: 10px;
    color:white;
    font-size:24px;

}
div.navbar{
    width:100%;
    height: 30px;
    background-color: #03572c;
}

p{
    display: inline;
}

p.innav{
    color:white;
    font-size: 24px;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-top: 10px;
}
p.rightIn{
    color:white;
    font-size: 24px;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-top: 10px;    
}

p.rightIn,
p:nth-child(4),
p:nth-child(6)
{
    float: right;
    margin: 0px 5px;
    width: auto;
}