JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<label for="challenge" class="fat">A. Create a <b>Challenge</b> 
                    <input type="radio" name="create-what" value="challenge" id="challenge">
                </label>
                <label for="team" class="fat">B. Buiild a <b>Team</b> to enter into a challenge 
                    <input type="radio" name="create-what" value="team" id="team">
    </label>
</form>

CSS

form label.fat { padding: 20px; background-color: #fff; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); width: 365px; display: inline-block; float: left; margin-top: 10px; }
form label.fat input { float: right; }
form label.fat a { color: #727272; text-decoration: none; }
form label.fat.active { background-color: #00c3e9; }
form label.fat.active a { color: white; }

JavaScript

$(function() {
            $('input:radio').change(function(){
                 $(this).parent().toggleClass('active', this.checked).siblings().removeClass('active');
            });
        });