JSFiddle - React, Tailwind, and code Playground

by anilkamath87

HTML

<div class="ad-validation-error  left" style="display: block;">
    <div class="ad-validation-arrow"></div>
    <ul class="ad-validation-inner">
        <li>Required</li>
        <li>Should be 8 or more characters</li>
    </ul>
</div>

CSS

ul{
margin:0;
    padding:0;
    list-style:none;
}
.ad-validation-error {
position: absolute;
z-index: 1030;
display: block;
font-size: 12px;
line-height: 1.4;
visibility: visible;
}


.ad-validation-error.left .ad-validation-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-left-color: red;
border-width: 5px 0 5px 5px;
}
.ad-validation-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}


.ad-validation-inner {
max-width: 200px;
padding: 3px 8px;
color: red;
text-align: center;
text-decoration: none;
background-color: transparent;
border:1px solid red;
border-radius: 4px;
}
.ad-validation-error.top {
  padding: 5px 0;
  margin-top: -3px;
}

.ad-validation-error.right {
  padding: 0 5px;
  margin-left: 3px;
}

.ad-validation-error.bottom {
  padding: 5px 0;
  margin-top: 3px;
}

.ad-validation-error.left {
  padding: 0 5px;
  margin-left: -3px;
}

.ad-validation-error.top .ad-validation-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-color: red;
  border-width: 5px 5px 0;
}

.ad-validation-error.right .ad-validation-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-right-color: red;
  border-width: 5px 5px 5px 0;
}

.ad-validation-error.left .ad-validation-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-left-color: red;
  border-width: 5px 0 5px 5px;
}

.ad-validation-error.bottom .ad-validation-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: red;
  border-width: 0 5px 5px;
}