JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div id="HOS_SCOPE">
  <div class="hos-privacy_row">
    <label class="hos-checkbox__wrapper">
      <input class="hos-privacy_checkbox hos-checkbox__hidden" type="checkbox">
      <span class="hos-checkbox__fake">
                <span class="hos-checkbox__fake_check hos-icon-ok"></span>
      </span>
    </label>

    <a href="[[[behavior.by_els.ids.privacy_text.props.url]]]" class="hos-privacy_text" data-hos-id="privacy_text">
      [[[content.by_els.ids.privacy_text.props.text]]]
    </a>

  </div>
</div>

CSS

#HOS_SCOPE a {
  cursor: pointer !important;
}

#HOS_SCOPE a[href=""] {
  cursor: text !important;
}




#HOS_SCOPE  .hos-privacy_row {
    text-align: left !important;
    font-size: .8em !important;
    margin-top: 1em !important;
}

#HOS_SCOPE .hos-checkbox__wrapper {
    display: inline-block !important;
    vertical-align: middle !important;
}

#HOS_SCOPE .hos-checkbox__hidden {
    display: none !important;
}

#HOS_SCOPE .hos-checkbox__fake,
#HOS_SCOPE .hos-checkbox__fake_check {
  width: 11px !important;
  height: 11px !important;
}

#HOS_SCOPE .hos-checkbox__fake {
    display: inline-block !important;
    background-color: blue;
    border-radius: 2px !important;
    margin-right: 6px !Important;
    cursor: pointer !important;
}

#HOS_SCOPE .hos-checkbox__fake_check {
  color: yellow;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: .15s !important;
  -webkit-transform: scale(0.2) !important;
  transform: scale(0.2) !important;
  display: block !important;
  text-align: center !important;
  line-height: 11px !important;
}

#HOS_SCOPE .hos-checkbox__hidden:checked ~ .hos-checkbox__fake > .hos-checkbox__fake_check {
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
}