JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div class="border">
    <ul>
        <li>item</li>
        <li>item2</li>
        <li>item3</li>
</div>

CSS

body {
    background: #ccc;
}
.border {
    border: 1px solid #888;
    margin: 20px;
    background: #fff;
    overflow: visible;
    height: 3em;
}
.border ul {
    padding: 0;
    margin:0;
    overflow: visible;
}
.border ul li{
    list-style-type: none;
    display: inline-block;
    padding: 0 2em;
    margin: 0;
    border: 1px solid #f5f5f5;
    background: #fff;
     line-height: 3em;
}
.border ul li:hover{
    list-style-type: none;
    display: inline-block;
    padding: 0 2em;
    margin: 0;
    border: 1px solid #f5f5f5;
    background: #ccc;
    line-height: 3em;
    margin-top: 2px;
    box-shadow: inset 3px 3px 8px -1px #888, inset -3px 3px 8px -1px #888;
    border-bottom: #ccc;
}