JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="error">
    <p class="agreement_t">By clicking sign up, I agree to the <a href="#" class="agreement_a">Terms of Use</p>
</div>

CSS

.error {
    width: 180px;
    text-align: center;
	background: #ffebe6;
	font-family: "ArimoRegular";
	font-size: 14px;
	color: #000;
	border: 1px solid #952424;
	border-radius: 2px;
}
.error:before, .error:after {
    content: "";
    position: absolute;
}
.error:before {
    border-right: 10px solid #952424;
    border-top: 10px solid rgba(113, 101, 58, 0);
    border-bottom: 10px solid rgba(113, 101, 58, 0);
    left: -1px;
    top: 25px;
}

.error:after {
    border-right: 10px solid #ffebe6;
    border-top: 10px solid rgba(255, 241, 190, 0);
    border-bottom: 10px solid rgba(255, 241, 190, 0);
    left: 0;
    top: 25px;
}