JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="top-side">
				<div class="border">
					<a href="#" class="cd-nav-trigger">
						<span data-hover="Menu" class="cd-nav-icon"></span>
					</a>
				</div>
				<div class="border">
					<a href="/"><span data-hover="Home"><img src="images/home-ico.png" alt=""></span></a>
				</div>
				<div class="border">
					<a href="#"><span data-hover="Search"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" fill="#c19f63"></path>
</svg></span></a>
				</div>
				<div class="border">
					<a href="#">
						<span data-hover="User"><svg id="SvgjsSvg1026" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15">
							<defs id="SvgjsDefs1027"></defs>
							<path id="SvgjsPath1028" d="M40.9995 2239C40.446999999999996 2239 39.9995 2238.55 39.9995 2238C39.9995 2236.56 39.384299999999996 2235.27 38.4127 2234.36C37.5182 2235.3700000000003 36.322900000000004 2236 34.9992 2236C33.6757 2236 32.4806 2235.37 31.586100000000002 2234.36C30.614500000000003 2235.27 29.9993 2236.56 29.9993 2238C29.9993 2238.55 29.5516 2239 28.9994 2239C28.447100000000002 2239 27.9994 2238.55 27.9994 2238C27.9994 2235.84 28.997700000000002 2233.93 30.5345 2232.65C30.203000000000003 2231.85 29.9993 2230.9500000000003 29.9993 2230C29.9993 2226.68 32.2379 2224 34.9992 2224C37.7609 2224 39.999500000000005 2226.68 39.999500000000005 2230C39.999500000000005 2230.95 39.7959...

CSS

body {
    font-size: 100%;
    padding: 3em;
}
.top-side {
    float: left;
    transform: perspective(500px);
    transform-style: preserve-3d;
}

.top-side a {
    background-color: #f66;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
                      linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%);
    backface-visibility: hidden;
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.1),
                inset 0 0 1.5em hsla(0,0%,0%,.25);
    color: #322;
    display: block;
    font: bold 1em/3 sans-serif;
    padding: 0 1.5em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    transition: .5s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    width: 6em;
}
.top-side a:after {
    background-color: inherit;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
                      linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%),
                      linear-gradient(hsla(0,0%,0%,.25), hsla(0,0%,0%,.25));
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
                inset 0 0 1.5em hsla(0,0%,0%,.4);
    bottom: 0;
    color: #fff;
    content: attr(data-title);
    left: 100%;
    line-height: 3;
    position: absolute;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: 0 0;
    width: 100%;
}
.top-side a:before {
    background-color: inherit;
    background-image: linear-gradient(hsla(0,0%,100%,.07), hsla(0,0%,0%,.07)),
                      linear-gradient(hsla(0,0%,0%,.5), hsla(0,0%,0%,.5));
    bottom: 0;
    content: '';
    height: 9em;
    left: 100%;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    width: 100%;
}
.top-side .border:nth-child(-n+2) a:before {
    transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
}
.top-side .border:nth-child(n+3) a:before {
    transform: rotateX(-90deg) translateX(-9em);
}
.top-side...