JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<fieldset>
<legend>
Persönliche Daten
</legend>
<label for="tbName">Name des Interessenten:</label><br>
<input type="text" id="tbName" name="name">
</fieldset>
<fieldset>
<legend>
Gewünschte Leistungsart
</legend>
<div class="labelledRadio">
   <input type="radio" name="leistung" id="rb_evaluationKids" value="proKid">
   <label for="rb_evaluationKids">Probetraining für Kinder</label>
</div>
<div class="labelledRadio">
   <input type="radio" name="leistung" id="rb_athleticKids" value="athKid">
   <label for="rb_athleticKids">Leichtathletik-Training</label>
</div>
<div class="labelledRadio">
   <input type="radio" name="leistung" id="rb_soccerKids" value="socKid">
   <label for="rb_soccerKids">Fußballtraining</label>
</div>
</fieldset>
<fieldset>
<legend>Art der Mitgliedschaft</legend>
<div class="labelledRadio2">
   <input type="radio" name="mitglied" id="rb_membOwn" value="membOwn">
   <label for="rb_membOwn">Eigene</label>
</div>
<div class="labelledRadio2">
   <input type="radio" name="mitglied" id="rb_membKid" value="membKid">
   <label for="rb_membKid">Kind eines Mitglieds</label>
</div>
<div class="labelledRadio2">
   <input type="radio" name="mitglied" id="rb_membSponsored" value="membSpon">
   <label for="rb_membSponsored">Sponsor</label>
</div>
</fieldset>
<button name="submit" value="ok">Absenden</button>

CSS

.labelledRadio {
  border: thin solid #666666;
  display: flex;
  width: 13em;
}
.labelledRadio label {
  padding: 0.2em 0.5em;
}
.labelledRadio:hover {
  background-color: #ccc;  
}

.labelledRadio2 {
  border: thin solid #666666;
  display: flex;
  width: 13em;
}
.labelledRadio2 input[type=radio] {
  width: 0; margin: 0; padding: 0;
}
.labelledRadio2 input[type=radio]:checked + label {
  background: linear-gradient(to right, red 0, 1em, transparent 1em);
}
.labelledRadio2 label {
  width: 100%;
  padding: 0.2em 0.5em 0.2em 1.5em;
}

.labelledRadio2:hover {
  background-color: #ccc;  
}
.labelledRadio2 input[type=radio]:focus + label {
  background-color: #ccc;
}