JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="switch">
  <div class="switch-toggle switch-ios">
      <input id="on" value="none" name="state-d" type="radio" checked="checked">
      <label for="on" onclick=""><span class="hide">None</span></label>
      <input id="na" value="view" name="state-d" type="radio">
      <label for="na" onclick=""><span class="hide">View</span></label>
      <input id="off" value="update" name="state-d" type="radio">
      <label for="off" onclick=""><span class="hide">Update</span></label>
      <a></a>
  </div>	
  <span class="state">None</span>
</div>

CSS

body{
  background-color:#fff;
}
.switch-toggle a,
.switch-light span span {
  display: none; }

/* We can't test for a specific feature,
 * so we only target browsers with support for media queries.
 */
@media only screen {
  /* Checkbox
 */
  .switch-light {
    position: relative;
    display: block;
    /* simulate default browser focus outlines on the switch,
   * when the inputs are focused.
   */ }
    .switch-light::after {
      clear: both;
      content: "";
      display: table; }
    .switch-light *,
    .switch-light *:before,
    .switch-light *:after {
      box-sizing: border-box; }
    .switch-light a {
      display: block;
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out; }
    .switch-light label,
    .switch-light > span {
      /* breathing room for bootstrap/foundation classes.
     */
      line-height: 2em;
      vertical-align: middle; }
    .switch-light input:focus ~ span a,
    .switch-light input:focus + label {
      outline-width: 2px;
      outline-style: solid;
      outline-color: Highlight;
      /* Chrome/Opera gets its native focus styles.
     */ } }
    @media only screen and (-webkit-min-device-pixel-ratio: 0) {
      .switch-light input:focus ~ span a,
      .switch-light input:focus + label {
        outline-color: -webkit-focus-ring-color;
        outline-style: auto; } }

@media only screen {
  /* don't hide the input from screen-readers and keyboard access
 */
  .switch-light input {
    position: absolute;
    opacity: 0;
    z-index: 3; }
  .switch-light input:checked ~ span a {
    right: 0%; }
  /* inherit from label
 */
  .switch-light strong {
    font-weight: inherit; }
  .switch-light > span {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 2em;
    /* overwrite 3rd party classes padding
   * eg. bootstrap .well
   */
    padding: 0;
    text-align: left; }
  .switch-light span span {
    position:...

JavaScript

$('input[name=state-d]').click(function() {
     var state = $(this).val();
     //console.log(state);
    if(state == 'none'){
      $('.switch-toggle a').removeClass('update view').addClass('none');
       $('.switch-ios.switch-toggle').removeClass('update view').addClass('none');
       $('.state').html('None');
      }
    if(state == 'view'){
      $('.switch-toggle a').removeClass('update none').addClass('view');
      $('.switch-ios.switch-toggle').addClass('view').removeClass('update none');
      $('.state').text('View');
      }
    if(state == 'update'){
      $('.switch-toggle a').removeClass('none view').addClass('update');
      $('.switch-ios.switch-toggle').addClass('update').removeClass('none view');
      $('.state').text('Update');
      };
  
    });