JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div class="btn-group" data-toggle="buttons">
<div class="panel bk-widget bk-bd-off bk-chrome-fix col-lg-4 col-md-4 col-sm-4 col-xs-4">
    <div class="panel-body bk-bg-sanofi bk-fg-white bk-fg-darken bk-pd-off" style="min-height: 250px">
        <div class="row bk-pd-10 bk-pd-off-b bk-pd-t-15">

            <div class="col-xs-12 text-center bk-vcenter">
                <div>
                    <h5><strong>EVENT 1</strong></h5>
                </div>
            </div>

        </div>

        <hr class="bk-hr-white bk-mg-off bk-opacity-5">

        <div class="col-sm-12 text-center">
            <div class="form-group has-feedback text-center">
                    <label class="btn btn-success-on btn-success-inv bk-fg-white btn-sm bk-rd-off bk-bd-success" style="width: 90px; max-width: 90px;">
                        <input type="radio" name="CHOICES" id="CHOICE1" value="1" /><i class="fa fa-thumbs-o-up"></i> CHOICE 01!</label>
            </div>
        </div>
    </div>
</div>
<div class="panel bk-widget bk-bd-off bk-chrome-fix col-lg-4 col-md-4 col-sm-4 col-xs-4">
    <div class="panel-body bk-bg-sanofi bk-fg-white bk-fg-darken bk-pd-off" style="min-height: 250px">
        <div class="row bk-pd-10 bk-pd-off-b bk-pd-t-15">

            <div class="col-xs-12 text-center bk-vcenter">
                <div>
                    <h5><strong>EVENT 2</strong></h5>
                </div>
            </div>

        </div>

        <hr class="bk-hr-white bk-mg-off bk-opacity-5">

        <div class="col-sm-12 text-center">
            <div class="form-group has-feedback text-center">
                    <label class="btn btn-success-on btn-success-inv bk-fg-white btn-sm bk-rd-off bk-bd-success" style="width: 90px; max-width: 90px;">
     ...

CSS

.btn-success-inv {
  color: #5cb85c;
  background-color: transparent;
  border-color: #5cb85c;
    
}
input[name=CHOICES] {
    display:none
}
.btn-success-inv:hover,
.btn-success-inv:focus,
.btn-success-inv.focus,
.btn-success-inv:active,
.btn-success-inv.active,
.open > .dropdown-toggle.btn-success-inv {
  color: #ffffff;
  background-color: #5cb85c;
  border-color: #5cb85c;
    
}
.btn-success-inv:active,
.btn-success-inv.active,
.open > .dropdown-toggle.btn-success-inv {
  background-image: none;
}
.btn-success-inv.disabled,
.btn-success-inv[disabled],
fieldset[disabled] .btn-success-inv,
.btn-success-inv.disabled:hover,
.btn-success-inv[disabled]:hover,
fieldset[disabled] .btn-success-inv:hover,
.btn-success-inv.disabled:focus,
.btn-success-inv[disabled]:focus,
fieldset[disabled] .btn-success-inv:focus,
.btn-success-inv.disabled.focus,
.btn-success-inv[disabled].focus,
fieldset[disabled] .btn-success-inv.focus,
.btn-success-inv.disabled:active,
.btn-success-inv[disabled]:active,
fieldset[disabled] .btn-success-inv:active,
.btn-success-inv.disabled.active,
.btn-success-inv[disabled].active,
fieldset[disabled] .btn-success-inv.active {
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.btn-success-inv .badge {
  color: #ffffff;
  background-color: #5cb85c;
}


.btn-success-on.active, .btn-success-on:active {
    background-color: #5cb85c;
	color: #FFF;
}


.btn-xs-compete,
.btn-group-xs-compete > .btn {
  padding: 1px 5px;
  magin: 20px;
  font-size: 10px;
  line-height: 1.5;
  border-radius: 3px;
}