JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<p>Dies ist ein rudimentäres Konzeptbeispiel!</p>

<label>Dings<br>
<input type="text" autofocus><br>
</label>
<label class="inputgroup">
   <input type="checkbox">
   <span>Check me out</span>
</label>
<label>Bums<br>
<input type="text"></label>

CSS

.inputgroup [type=checkbox] {
  width: 0;
}

.inputgroup [type=checkbox]:focus+span {
  outline: 1px solid blue;
}

.inputgroup [type=checkbox]:checked + span::before {
  content: "X ";
}
.inputgroup [type=checkbox]:not(:checked) + span::before {
  content: "O ";
}

label {
  display: block;
}