JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="radio" id="radio-1" name="radio">
<label for="radio-1">
  <i class="fa fa-cc-paypal" aria-hidden="true"></i>
</label>

<input type="radio" id="radio-2" name="radio">
<label for="radio-2">
  <i class="fa fa-credit-card-alt" aria-hidden="true"></i>
</label>

<input type="radio" id="radio-3" name="radio">
<label for="radio-3">
  <i class="fa fa-cc-visa" aria-hidden="true"></i>
</label>

CSS

[id^=radio-] {
  display: none;
}

[id^=radio-] + label {
  display: inline-block;
  vertical-align: middle;
  font-size: 50px;
  color: #555;
  cursor: pointer;
}

[id^=radio-]:checked + label {
  color: tomato;
  cursor: text;
}