JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<div class="error-label">This field is required.</div>

<div class="arrow-up">

</div>

CSS

html, body: {
  background-color: #dedede;
}
.arrow-up {
    /* width: 0px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #dedede; */
    
    width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 50px 100px;
border-color: transparent transparent #ffffff transparent;
}

div.error-label {
  padding: 10px;
  color: #000;
  background-color: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 300px;
  height:180px;
  
  margin: 30px;
  border:1px #dedede solid;
}

div.error-label:before {
  /* content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  
  top: 10px;
  border: 10px solid transparent;
  border-bottom-color: #dedede; */


width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 50px 100px;
border-color: transparent transparent #ffffff transparent;
}