JSFiddle - React, Tailwind, and code Playground

by Sanjito Kurniawan

HTML

<html>
    <head>
        <title> Tabbed Menu Test </title>
    </head>
    <body>
        <ul class='tabbed'>
            <li tabindex='1'>
                <a href='#'>Menu 1</a>
                <br/><br/><br/>
                <div>Lorem ipsum dolor sit amet</div>
            </li>
            <li tabindex='2'>
                <a href='#'>Menu 2</a>
                <br/><br/><br/>
                <div>Lorem ipsum dolor sit amet</div>
            </li>
            <li tabindex='3'>
                <a href='#'>Menu 3</a>
                <br/><br/><br/>
                <div>Lorem ipsum dolor sit amet</div>
            </li>
        </ul>
    </body>
</html>

CSS

body {
    background: #444;
    color: white; }

.tabbed {
    width: 300px;
    height: 300px;
    margin: 30px auto 0 auto;
    padding: 20px;
    background: #777;
    border: 1px solid #fff;
    border-radius: 3px;
    overflow: hidden; }

.tabbed > li {
    width: 300px;
    height: 340px;
    background: #777;
    z-index: 1;
    position: absolute; }

.tabbed > li > a:first-child {
    padding: 4px;
    background: #876565;
    border: 1px solid #fff;
    display: inline-block;
    position: absolute;
    z-index: 4; }

.tabbed > li:last-child > a:first-child {
    margin-left: 220px; }

.tabbed > li:not(:last-child):not(:first-child) > a:first-child {
    margin-left: 120px; }

.tabbed > li:first-child {
    z-index: 2;
    position: absolute; }

.tabbed > li:focus {
    z-index: 3;
    position: absolute; }