JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div class="popover-container" style="
  position: relative;
  display: inline-block;
">
              <div class="popover">
                
                <div class="popover-text">
                  <p>
                    Like banks and other financial institutions, 
                    we need a <b>Social Security Number</b> to verify your identity 
                    and make sure you meet our signup requirements. 
                    Your information will not be shared and the submission form is completely secure.
                  </p>
                </div>
              </div><div class="popover-toggle-label">iuegfiugfiuwegiugewfiugfew</div>
              
            </div>

CSS

/* line 252, /Users/kylehouston/Sites/Shopkeep/merchant-record-service/app/assets/stylesheets/v2/create_accounts.scss */
.popover-toggle-label {
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;
}

/* line 260, /Users/kylehouston/Sites/Shopkeep/merchant-record-service/app/assets/stylesheets/v2/create_accounts.scss */
.popover-toggle-label:active + .popover {
  display: block;
}

/* line 264, /Users/kylehouston/Sites/Shopkeep/merchant-record-service/app/assets/stylesheets/v2/create_accounts.scss */
.popover {
  position: absolute;
  top: 0;
  right: -11px;
  width: 500px;
  transform: translate(100%, -50%);
}
/* line 273, /Users/kylehouston/Sites/Shopkeep/merchant-record-service/app/assets/stylesheets/v2/create_accounts.scss */
.popover .popover-text {
  padding: 10px 20px;
  font-family: "Open Sans", sans-serif;
  color: #525e71;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  display: block;
}
/* line 288, /Users/kylehouston/Sites/Shopkeep/merchant-record-service/app/assets/stylesheets/v2/create_accounts.scss */
.popover .popover-text:before {
  position: absolute;
  display: inline-block;
  border-top: 10px solid transparent;
  border-right: 10px solid rgba(0, 0, 0, 0.2);
  border-bottom: 10px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.2);
  left: -11px;
  top: 51px;
  content: "";
}
/* line 300, /Users/kylehouston/Sites/Shopkeep/merchant-record-service/app/assets/stylesheets/v2/create_accounts.scss */
.popover .popover-text:after {
  position: absolute;
  display: inline-block;
  border-top: 9px solid transparent;
  border-right: 9px solid #fff;
  border-bottom: 9px solid transparent;
  left: -9px;
  top: 52px;
  content: "";
}

/* line 312, /Users/kylehouston/Sites/Shopkeep/merchant-record-service/app/assets/stylesheets/v2/create_accounts.scss */
.popover:hover {
  display: block;
}