JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<div id="ck-button">
  <label id="label">
    <input id="checkbox" type="checkbox" value="1" />
    <span className="title">Respirators</span>
    <span className="description">
      Surgical N95 or equivalent
    </span>
  </label>
</div>

CSS

#ck-button {
  margin-bottom: 1rem;
}

#ck-button label {
  width: 85%;
  border: 2px solid #eaf2fd;
  padding: 15px;
  border-radius: 3px;
  display: flex;
}

#ck-button label span {
  padding: 3px 0px;
}
#ck-button .title {
  color: #304256;
  font-weight: 600;
  font-size: 1em;
}
#ck-button .description {
  color: #6984a3;
  font-weight: 400;
  margin-left: 7px;
  font-size: 15px;
}
#ck-button label input {
  position: absolute;
  top: -20px;
}