JSFiddle - React, Tailwind, and code Playground

by Elvin Asadov

HTML

<div aria-atomic="true" role="alert" class="password-strength-wrap " id="_passwordstrengthpopover">
    <div class="password-strength default-style  popover-bottom ">
      <div aria-hidden="true">Your password must have:</div>


      <div class=" success">
        <span class="icon icon_green_check "></span>
        <span class="message" aria-hidden="true">
                 8 or more characters
             </span>
      </div>
      <div class="success ">
        <span class="icon icon_green_check "></span>
        <span class="message" aria-hidden="true">
                 Upper &amp; lowercase letters
             </span>
      </div>
      <div class="success">
        <span class="icon icon_green_check "></span>
        <span class="message" aria-hidden="true">
                At least one number
            </span>
      </div>


      <div class="title" aria-hidden="true"><span>Strength:</span>


        <span class="hideWeak moderate">weak </span>
        <span class="hideModerate moderate">moderate</span>
        <span class="hideStrong moderate">strong</span>


      </div>
      <div class="progress">
        <div role="progressbar" aria-valuemin="0" aria-valuemax="100" class="progress-bar moderate" aria-valuenow="30" style="width: 30%;">
          <span class="sr-only">30</span>
        </div>
      </div>

      <span class="errorMsg ">Too many consecutive identical characters. </span>
      <span class="errorMsg ">Password can be too easily guessed.</span>
      <span class="errorMsg ">Choose a password you haven't used in the past year.</span>
      <span class="errorMsg ">Password cannot be the same as Apple&nbsp;ID.</span>
      <span class="errorMsg "></span>


      <span class="hint">Avoid using a password that you use with other websites or that might be easy for someone else to guess.</span>


    </div>
  </div>

CSS

.password-strength-wrap {
  z-index: 1;
  position: relative;
}

.password-strength-wrap .popover-bottom::before {
  background-color: #fff;
  border-left: 1px solid #d5d5da;
  border-top: 1px solid #d5d5da;
  content: "";
  height: 16px;
  left: 47%;
  position: absolute;
  top: -9px;
  transform: rotate(45deg);
  width: 16px;
}

.popover-bottom::before {
  bottom: inherit;
  top: -9px;
  transform: rotate(45deg);
}

.password-strength-wrap .popover-bottom {
  background-color: #fff;
  border: 1px solid #d5d5da;
  border-radius: 5px;
  box-shadow: 0 1px 60px rgba(0, 0, 0, 0.07);
  max-width: 250px;
  padding: 20px;
  position: absolute;
}

.password-strength-wrap .default-style {
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}

.password-strength {
  margin-left: 64px;
}

.popover-bottom {
  left: 20px;
  margin-top: 5px;
  top: 0;
  transform-origin: center top 0;
  width: 90%;
}

.password-strength-wrap .default-style {
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}

.password-strength-wrap .default-style .error {
  color: #bababa;
  display: table-row;
}

.password-strength-wrap .default-style .message {
  display: table-cell;
  font-size: 16px;
  font-weight: 400;
  padding-left: 10px;
}

.password-strength-wrap .default-style .error {
  color: #bababa;
  display: table-row;
}

.password-strength-wrap .default-style .title {
  margin: 15px 0 4px;
}

.password-strength-wrap .default-style .progress {
  background-color: #bababa;
  border-radius: 0;
  box-shadow: none;
  height: 5px;
  margin-bottom: 7px;
}

.password-strength-wrap .default-style .errorMsg {
  color: #f5382f;
  display: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.password-strength-wrap .default-style .hint {
  color: #666666;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.password-strength-wrap .default-style .progress-bar.weak {
  background-color: #f5382f;
}

.password-strength-wrap .default-style...