JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<header>
</header>
<div id="page" class="wrapper">
<section id="panel">
<a class="prev" id="prev_btn1" href="#"><span class="shadow_prev"></span><span>prev</span></a>
<a class="next" id="next_btn1" href="#"><span class="shadow_next"></span><span>next</span></a>
</section>
</div>
</body>
CSS
body {
background: #a1a1a1;
margin:0;font-size:1em;line-height:1;
}
.wrapper {
margin: 0 auto;
padding: 0;
width: 260px;
position: relative;
}
header {
position: fixed;
top: 0;
height: 30px;
width: 100%;
background: #54005c;
box-shadow: 0 0 9px rgba(0,0,0,.32);
overflow: hidden;
z-index: 10;
}
#page {
background-color: white;
min-height: 800px;
top: 30px;
box-shadow: 0 0 9px rgba(0,0,0,.32);
font-size: 14px;
z-index: 3;
}
#panel {
position: relative;
top: 14px;
background: #eee;
height: 60px;
}
a.prev,
a.next {
position: absolute;
background: #eee;
z-index: 0;
width: 40px;
height: 60px;
box-shadow: 0 0 7px rgba(0,0,0,.32);
overflow:hidden;
}
a.prev {
left: -40px;
}
a.next {
right: -40px;
}
.shadow_prev,.shadow_next{position:absolute;width:7px;height:100%;z-index:6;}
.shadow_prev{right:-7px;box-shadow: -7px 0px 7px 0px rgba(0, 0, 0, 0.32);}
.shadow_next{left:-7px;box-shadow: 7px 0px 7px 0px rgba(0, 0, 0, 0.32);}