JSFiddle - React, Tailwind, and code Playground

by andy_h

HTML

<div class="wrapper">

    <section>
        
        <div class="list-wrap">            
        
            <ul>

                <li class="current"><a href="#">Foo</a></li>
                <li><a href="#">Bar</a></li>
                <li><a href="#">Baz</a></li>
                <li><a href="#">Lol</a></li>
                <li><a href="#">Rotfl</a></li>
                <li class="thing"></li>

            </ul>

        </div>    

        <article>
            <h1>Thing</h1>
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui.
            </p>
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui.
            </p>
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui.
            </p>  
        </article>
        
    </section>
    
</div>

CSS

.list-wrap{position:absolute; top:-32px; left:0; overflow:hidden; width:100%;}
ul{width:10000px;} /*this*/
li a, .thing{background:rgba(220, 220, 220, 1); float:left; padding:7px 30px}
li a:hover, li.current a{background:rgba(220, 220, 220, .7);}
.thing{height:18px; width:300px;}

/*Just to make it pretty*/
body{background:url(http://placekitten.com/500/500);}
.wrapper{font-family:sans-serif; width:100%;}
section{background:rgba(220, 220, 220, .7); margin:80px 4% 4% 4%; padding:3%; position:relative; width:84%}
h1{font:bold 30px/1.4 sans-serif; margin:0 0 15px 0;}
p{margin:0 0 15px 0;}

JavaScript

//transparent tabs