JSFiddle - React, Tailwind, and code Playground

by yakun chen

HTML

<nav class="list1">
    <ul>
        <li> <a href="#">aaaaa</a>

        </li>
        <li> <a href="#">bbbbbb</a>

        </li>
        <li> <a href="#">cccccccc</a>

        </li>
    </ul>
</nav>

<div class='bd'>bdover</div>

CSS

* {
    margin:0;
    padding:0;
}
nav {
    margin:50px;
    /*  width:150px; */
}
.list1 ul {
    /*  border:1px solid #f00; */
    border-radius:3px;
    overflow:hidden;
}
.list1 li {
    list-style-type:none;
    float:left;
}
li + li {
    /* border-top : 1px solid #0f0; */
}
a {
    /*  border:3px solid red; */
    display:block;
    background-color:#eee;
    padding: .2em 1em;
    border-width: 3px;
    border-color: transparent;
    text-decoration: none;
}
li a {
    border-right-style: solid;
    background-clip:padding-box;
}

.bd{
    border: 10px red solid;
}

JavaScript

document.addEventListener('keyup',function(e){
    console.dir(e.which);
},false);