JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-validation-errors">
<div>theres something wrong with color</div>
<div>theres something wrong with size</div>
</div>
<input id="b1" type="button" value="make error">
<input id="b2" type="button" value="no error">
CSS
div:empty {
display:none;
}
.form-validation-errors {
border: 3px black solid;
padding: 10px;
margin: 10px;
background-color: #ddd;
}
.form-validation-errors div {
background-color: white;
padding: 2px;
margin: 2px;
}
JavaScript
$(document).ready(function () {
$('#b1').on('click', function () {
$(".form-validation-errors");
});
$('#b2').on('click', function () {
$(".form-validation-errors").html("");
});
});