JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<label>Username</label>
<div style="position:relative;">
<input type="text" style="width:100%;" />
    <div class="validator">
        <span>This feild is required</span>
    </div>
</div>
<label>Password</label>
<div style="position:relative;">
<input type="text" style="width:100%;" />
    <div class="validator">
        <span style="display:none;">This feild is required</span>
    </div>
</div>

CSS

body {
    font-family:arial, sans-serif;
    font-size:14px;
    line-height:1;
}
.validator {
    display:none;
    z-index:100;
	position: absolute;
	background: red;
    color:#fff;
    padding:5px;
    box-shadow:2px 1px 2px #666;
    border-radius:6px;
    top:100%;
    right:0;
	border: 1px solid #c2e1f5;
}
.validator:after, .arrow_box:before {
	bottom: 100%;
	right: 20px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.validator:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: red;
	border-width: 10px;
	margin-left: -20px;
}
.validator:before {
	border-color: rgba(194, 225, 245, 0);
    border-radius:2px;
	border-bottom-color: #c2e1f5;
	border-width: 10px;
	margin-left: -10px;
}

JavaScript

var errspan = $(".validator").children('span');