JSFiddle - React, Tailwind, and code Playground
HTML
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat pellentesque placerat.
<div class="triangle"></div>
</div>
CSS
body {
background-color: #eee;
padding:20px;
}
.box {
background:white;
width:200px;
height:100px;
box-shadow:0px 0px 15px rgba(0,0,0,0.4);
position:relative;
padding:25px;
}
.triangle {
position: absolute;
height: 20px;
width: 20px;
top: 50%;
left: 100%;
transform: translate(-50%, -50%) rotate(-45deg);
background: white;
box-shadow:0px 0px 15px rgba(0,0,0,0.4);
}
.box:after {
position:absolute;
content: '';
background: white;
height:40px;
width:25px;
right:0;
top:50%;
margin-top:-20px;
}