JSFiddle - React, Tailwind, and code Playground

HTML

<div id="w">
    <div id="content">
      <h1>Input Radio Block Style</h1>
      
      <form id="fakeform" name="fakeform" method="post" action="#">
        <div id="radiobtns">
          <div class="row">
            <ul class="clearfix">
              <li class="parent">World News:</li>
              <li><a href="#" id="world">World News</a></li>
              <li><a href="#" id="politics">US Politics</a></li>
              <li><a href="#" id="business">Business</a></li>
              <li><a href="#" id="finance">Finance</a></li>
              <li><a href="#" id="breaking">Breaking</a></li>
            </ul>
          </div>
          
          <div class="row">
            <ul class="clearfix">
              <li class="parent">Technology:</li>
              <li><a href="#" id="technews">Tech News</a></li>
              <li><a href="#" id="hardware">Hardware</a></li>
              <li><a href="#" id="software">Software</a></li>
              <li><a href="#" id="mobile">Mobile</a></li>
              <li><a href="#" id="webdesign">Web Design</a></li>
              <li><a href="#" id="programming">Programming</a></li>
              <li><a href="#" id="opensource">Open Source</a></li>
            </ul>
          </div>
          
          <div class="row">
            <ul class="clearfix">
              <li class="parent">Gaming:</li>
              <li><a href="#" id="nintendo">Nintendo</a></li>
              <li><a href="#" id="playstation">PlayStation</a></li>
              <li><a href="#" id="xbox">Xbox</a></li>
              <li><a href="#" id="pcgames">PC Games</a></li>
              <li><a href="#" id="indie">Indie</a></li>
            </ul>
          </div>
          
          <div class="row">
            <ul class="clearfix">
              <li class="parent">Entertainment:</li>
              <li><a href="#" id="celebrities">Celebrities</a></li>
              <li><a href="#" id="music">Music</a></li>
              <li><a href="#"...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body { 
  background: #f0f0f0; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #313131;
  font-size: 62.5%; 
  line-height: 1; 
}

::selection { background: #a4dcec; }
::-moz-selection { background: #a4dcec; }
::-webkit-selection { background: #a4dcec; }

::-webkit-input-placeholder { /* WebKit browsers */
  color: #ccc;
  font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ccc;
  font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ccc;
  font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ccc !important;
  font-style: italic;  
}

br { display: block; line-height: 2.2em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {...

JavaScript

$(function(){
	  $('#radiobtns .row ul li a').on('click', function(e){
		e.preventDefault();
		var catid = '#'+$(this).attr('id') + "-rdio";
		
		var checkedinput = $("input[name='category']:checked").val();
		
		if(checkedinput == undefined) {
		  // if no input is defined then we set the button clicked first
		  $(catid).prop('checked', true);
		} else {
		  // otherwise unset everything and then set the clicked button
		  $("input[name='category']").prop('checked', false);
		  $(catid).prop('checked', true);
		}
		
		var newval = $("input[name='category']:checked").val();
		if($(this).attr('id') == newval) {
		  $('#radiovaltxt').html(newval);
		}

		if($(this).hasClass('sel')) {
		  // if already selected then we do nothing
		} else {
		  $('#radiobtns .row ul li a').removeClass('sel');
		  $(this).addClass('sel');
		}
	  });
	});