JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div>
    <ul class="menu menu-top">
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Development</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</div>
<div>
    <ul class="menu menu-bottom">
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Development</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</div>

CSS

.menu {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}
.menu li {
    display: inline-block;
    padding: 2px 5px 2px 5px;
    border-left: 1px dotted black;
}
.menu li:first-child {
    border-left: none;
}
.menu-top li {
    border-left: 1px dotted black;
}
.menu-bottom li {
    font-size: 18px;
    font-weight: bold;
    border-left: 1px solid black;
}