JSFiddle - React, Tailwind, and code Playground

HTML

<form method="get" action="/">
<div class="UserFilter">
<ul class="UserFilter">
   <li>
      <label for="1">
          <input id="1" type="radio" value="1" name="Profile" />
          <span title="User 1"</span>USER 1
          </label>
   </li>
   <li>
      <label for="2">
          <input id="2" type="radio" value="2" name="Profile" />
         </span> USER 2
      </label>
   </li>
</ul>
</div>
</form>

CSS

input
{ /* HIDE ORG RADIO & CHECKBOX */
 opacity:0;
}

div.UserFilter {
    background: none repeat scroll 0 0 #EAE5DA;
    border-bottom: 1px solid #F1EEE6;
    border-top: 3px solid #0888A5;
}
div.UserFilter ul {
    display: inline-block;
}
ol, ul {
    list-style: none outside none;
}
div.UserFilter ul.UserFilter input:checked li label{
    background: none repeat scroll 0 0 #355182;
    border: 1px solid #688ABD;
    color: #FFFFFF;
    cursor: pointer;
    text-shadow: 0 1px 0 #52688A;
    transition: border-color 0.218s ease 0s;
}
div.UserFilter ul li label{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 2px 2px 2px 2px;
    display: inline-block;
    letter-spacing: normal;
    padding: 0 5.666px 0 0;
    transition: background 0.218s ease 0s;
    word-spacing: normal;
}

JavaScript

$('ul.UserFilter input').click(function () {
   //     $('ul.UserFilter input:not(:checked)').parent().removeClass("Selected");
       // $('ul.UserFilter input:checked').parent().addClass("Selected");
        //$(this).closest("form").submit();		
  console.log('click');
  });
     /*  $('ul.UserFilter input').focusout(function(event) {
  console.log('onFocusOut');
  console.log(event);
  });*/
   $('ul.UserFilter input').focusout(function(event) {
  console.log('focus');
  console.log(event);
   });