JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<ul>
	<li><a href="#">Link-1</a></li><!-- 
	 --><li><a href="#">Link-2</a></li><!-- 
	 --><li><a href="#">Link-3</a></li><!-- 
	 --><li><a href="#">Link-4</a></li>
</ul>

CSS

body {
    margin: 0;
    font: 1.5em Arial, sans-serif;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    border-left: 2px solid #333;
}
li:first-child {
    border-left: none;
}
a {
    display: block;
    line-height: 50px;
    padding: 0 25px;
    background-color: #E34235;
    text-decoration: none;
    color: #333;
    transition: 0.4s;
}
a:hover {
    background-color: #333;
    color: #fff
}