JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<div class="sidebar-widget">
    <div class="corner"></div>
    <div class="inner">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus felis, faucibus id velit eget, auctor tristique ex. Pellentesque id dolor risus. Donec tincidunt, nisl id laoreet tristique, ligula magna placerat mi, id congue magna diam ut sem. Aenean ornare eros nec sapien porta, laoreet venenatis est lobortis.
        </div>
    </div>
</div>

<div class="sidebar-widget trans-bg">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus felis, faucibus id velit eget, auctor tristique ex. Pellentesque id dolor risus. Donec tincidunt, nisl id laoreet tristique, ligula magna placerat mi, id congue magna diam ut sem. Aenean ornare eros nec sapien porta, laoreet venenatis est lobortis.
    </div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    background: pink;
}

.sidebar-widget {
    border: 1px solid #44AAAB;
    border-right: none;
    position: relative;
    padding: 15px;
    padding-right: 0;
    margin-bottom: 20px;
    background: rgba(0,0,0,0.5);
    margin-right: 15px;
}

.sidebar-widget:after {
    content: "";
    width: 15px;
    height: 100%;
    border: 1px solid #44AAAB;
    border-left: none;
    background: rgba(0,0,0,0.5);
    position: absolute;
    right: -16px;
    top: -1px;
    
     -webkit-transform-origin:0 0;
    transform-origin:0 0;
    
    -webkit-transform : perspective(1px) rotateY(0.6deg);
    transform : perspective(1px) rotateY(0.6deg);
}