JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bubble-container">This is a bubble</div>

CSS

:root {
  --right: -40px;
  --sizearrow: 20px;
  --height: 120px;
  --top: calc(var(--height)/2 - var(--sizearrow));
  --bordercolor: #000;
}

.bubble-container {
    position: relative;
    border: 2px solid var(--bordercolor);
    margin: 0 auto;
    border-radius: 10px;
    height: var(--height);
    width: 465px;
}

.bubble-container::after {
  content: '';
	position: absolute;
	right: var(--right);
	top: calc(var(--top) + 1.5px);
	width: 0;
	height: 0;
	border: var(--sizearrow) solid transparent;
	border-left-color: #fff;
}

.bubble-container::before {
  content: '';
	position: absolute;
	right: calc(var(--right) - 5px);
	top: var(--top);
	width: 0;
	height: 0;
	border: 22px solid transparent;
	border-left-color: var(--bordercolor);
}