JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="filter">
<div id="clip"></div>
</div>

<div id="content1">
Here Here Here Here Here Here Here 
</div>
</div>

<div class="container">

<div class="filter">
<div id="clip2"></div>
</div>

<div id="content2">Here Here Here Here Here Here Here
</div>
</div>

CSS

body {height:100vh;margin:50px;font-family:Arial;color:#cccccc;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,163,217,1) 100%);}

.container {width:100%;height:50px;position:relative;margin-bottom:10px;}

#clip {background-color:white;width:100%;height:50px;border-radius:5px;position:absolute;top:0;left:0;
clip-path: polygon(0 0, 500px 0, 520px 40px, 100% 40px, 100% 50px, 0 50px);}

#clip2 {background-color:white;width:100%;height:50px;border-radius:5px;position:absolute;top:0;left:0;
line-height:50px;box-sizing: border-box;padding:0 10px;
clip-path: polygon(0 0, 500px 0, 520px 40px, 100% 40px, 100% 50px, 0 50px);
transform: rotateZ(0.5turn);}

#content1 {width:100%;height:100%;position:absolute;top:0;left:0;line-height:50px;box-sizing: border-box;padding:0 10px;}
#content2 {width:100%;height:100%;position:absolute;top:0;left:0;line-height:50px;box-sizing: border-box;padding:0 10px;text-align:right;}

.filter {filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.15));}