JSFiddle - React, Tailwind, and code Playground

by GolezTrol

HTML

<p>
  Safekeeping of <a href="http://stackoverflow.com/questions/34469701/show-a-tick-image-on-clicking-selecting-an-option-using-html-css">this Stack Overflow answer</a> which was deleted before I could post it.
</p>
<p>
  I would try to keep the HTML as clean as possible at all times, and to not use JavaScript, or as little as needed. In this case, I've just taken normal radio buttons and a label to accompany them. The labels contain the text, and they are linked to the
  inputs, so clicking them also works.
</p>

<div class="paymentmethod">
  <label class="pm_label pm_paypal" for="paymentmethod_paypal">
    <input checked class="pm pm_paypal" type="radio" name="paymentmethod" value="paypal"> Pay with PayPal
  </label>
  <label class="pm_label pm_cc" for="paymentmethod_cc">
    <input class="pm pm_cc" type="radio" id="paymentmethod_cc" name="paymentmethod" value="cc"> Pay with credit card
  </label>
  <label class="pm_label pm_amazon" for="paymentmethod_amazon">
    <input class="pm pm_amazon" type="radio" id="paymentmethod_amazon" name="paymentmethod" value="amazon"> Pay with Amazon Payments
  </label>
</div>

CSS

.pm_label,
.pm {
  /* Shared markup for size and behaviour */
  box-sizing: border-box;
  width: 200px;
  height: 130px;
}

.pm {
  /* Hide the radio itself, but still position it, so the check mark can be positioned properly */
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.pm_label {
  display: inline-block;
  position: relative;
  /* Blue border around the options */
  border: 3px solid #39f;
  border-radius: 6px;
  /* The "Pay with" text */
  padding: 100px 0 0 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 8pt;
  font-weight: bold;
  color: #666;
}

.pm:checked::before {
  /* Show the checkmark if the radio is checked */
  box-sizing: border-box;
  display: block;
  visibility: visible;
  position: absolute;
  /* Style it a little */
  border: 3px solid #39f;
  border-radius: 20px;
  background-color: white;
  /* Any of the unicode Check mark characters. You can use wingdings too or
     even use the ::after pseudo-element to construct a CSS checkmark */
  content: '\2713';
  /* And position it */
  width: 40px;
  height: 40px;
  top: -10px;
  right: -10px;
  font-size: 25px;
  text-align: center;
}


/* Space between the choices */

.pm_label {
  margin-left: 40px;
}

/* But not before the first */

.pm_label:first-child {
  margin-left: 0;
}


/* Specific markup for the payment methods. Paypal given as example */

.pm_label.pm_paypal {
  background: url(https://www.paypalobjects.com/webstatic/mktg/logo/bdg_payments_by_pp_2line.png) 50% 40% no-repeat;
}