JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="page">

<div class="bg">
<div class="flex" id="flex">

<div class="left">

<a href="#">one</a>
<a href="#">number two</a>
<a href="#">three</a>
<a href="#">four</a>
<a href="#">five</a>
<a href="#">six</a>
<a href="#">seven</a>
<a href="#">eight</a>
<a href="#">nine</a>
<a href="#">ten</a>
<a href="#">eleven</a>
<a href="#">twelve</a>
<a href="#">thirteen</a>
<a href="#">fourteen</a>
<a href="#">fifteen</a>
<a href="#">sixteen</a>

</div>

<div class="right"><a href="#" onclick="show(flex)">more</a></div>



</div>
</div>


Mauris eu eleifend tortor, et fermentum ipsum. In eu tincidunt justo, et rhoncus quam. In euismod ornare vulputate. Proin venenatis rhoncus venenatis. Aenean varius elit tempus urna varius, eget condimentum libero pretium. In imperdiet dapibus auctor. Suspendisse posuere augue eu ante faucibus volutpat. Maecenas quis orci nec dui facilisis laoreet et vel felis. Aliquam tincidunt, orci sit amet vestibulum fringilla, enim justo faucibus erat, ac ultrices tortor odio vel nisi. Nulla sit amet pellentesque lectus.

Fusce vulputate turpis in quam semper aliquet. Proin interdum nulla nec orci pretium, vel tincidunt magna molestie. Cras venenatis viverra sapien in scelerisque. Nullam sollicitudin lorem in ex pretium, vitae dictum velit congue. Quisque eu laoreet nisl. Vestibulum bibendum vehicula sapien non varius. Nam bibendum accumsan finibus. Duis a nisl leo.
</div>

CSS

.bg {background-color:#999;position:absolute;width:100%;top:0;}

.page {position:relative;padding:50px 0 0 0;}

.flex {display:flex;max-width:700px;margin:auto;height:40px;overflow:hidden;}

.left {display:flex;max-width:700px;margin:auto;flex-wrap: wrap;}

.left a {padding:10px 20px;color:#fff;flex: 0 1 auto;}

.right {background-color:#999;flex-grow: 0;flex-shrink: 0;flex-basis: 50px;padding:10px 0;text-align:center;}

.right a {color:#fff;}



.flex2 {display:flex;max-width:700px;margin:auto;height:auto;}

JavaScript

function show(el){
	if(el.className == "flex"){
		el.className = "flex2";
	} else {
		el.className = "flex";
	}
}