JSFiddle - React, Tailwind, and code Playground

by Sanjito Kurniawan

HTML

<html>
    <body>
        <div class='box'>
            <ul>
                <li>Tab 1</li>
                <li>Tab 2</li>
                <li>Tab 3</li>
                <li>Tab 4</li>
                <li>Tab 5</li>
            </ul>
        </div>
    </body>
</html>

CSS

.box {
    width: 400px;
    height: 500px;
    border: 1px solid #000;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    margin: 20px auto 0 auto; }

ul > li {
    float: left; }

li {
    padding: 3px 6px;
    border: 1px solid #fff;
    margin-left: 3px; }

ul, li {
    margin: 0 auto;
    text-align: center; }