JSFiddle - React, Tailwind, and code Playground

by kaikemono

HTML

<ul class="a">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Strawberries</li>
</ul>

<ul class="b">
    <li>Arizona</li>
    <li>California</li>
    <li>New York</li>
    <li>Washington</li>
</ul>

<ul class="c">
    <li><a href="#">Aligator</a></li>
    <li><a href="#">Bear</a></li>
    <li><a href="#">Crocodile</a></li>
    <li><a href="#">Zebra</a></li>
</ul>

CSS

body {
    background-color: #808080;
}

ul {
    list-style: none;
    margin: 2em 0;
    overflow: hidden;
    padding: 0;
}

li {
    display: block;
    float: left;
    font-size: 14px;
    line-height: 40px;
    padding: 0 20px;
}

/* option a */
.a li {
    border-left: 1px solid rgba(000,000,000,0.25);
    border-right: 1px solid rgba(255,255,255,0.25);
}

.a li:first-child    { border-left: none; }
.a li:last-child    { border-right: none; }

/* option b */
.b li {
    box-shadow: 1px 0px 0px rgba(000,000,000,0.25) inset;
        -moz-box-shadow: 1px 0px 0px rgba(000,000,000,0.25) inset;
        -ms-box-shadow: 1px 0px 0px rgba(000,000,000,0.25) inset;
        -o-box-shadow: 1px 0px 0px rgba(000,000,000,0.25) inset;
        -webkit-box-shadow: 1px 0px 0px rgba(000,000,000,0.25) inset;
    border-left: 1px solid #999;
}

.b li:first-child {
    box-shadow: none; 
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        -o-box-shadow: none;
        -webkit-box-shadow: none;
    border-left: none;
}

/* option c */
.c li {
    line-height: 1;
    padding: 0;
}

.c li {
    border-left: 1px solid rgba(255,255,255,0.25);
}



.c li a {
    border-left: 1px solid rgba(000,000,000,0.25);
    display: block;
    line-height: 40px;
    padding: 0 20px;
}

.c li:first-child,
.c li:first-child a {
    border-left: none;
}