JSFiddle - React, Tailwind, and code Playground

HTML

<span class="wpcf7-not-valid-tip">Please fill the required field.</span>

CSS

.wpcf7-not-valid-tip {
        background: red;
        color: white;
        padding: 10px;
        width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
	position: relative;
}
.wpcf7-not-valid-tip:after {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 0, 0, 0);
	border-top-color: red;
	border-width: 10px;
	left: 50%;
	margin-left: -10px;
}