JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">

<div class="control choise">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Hi omnes lingua</label>
</div>

SCSS

body {
  font-family: 'Roboto', sans-serif;
}

.choise {
  input {
    position: absolute;
    z-index: -1;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;

    &:checked+label {
      font-weight: 500;
      color: green;
    }
  }
}