JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contents">
    <div class="radio-wrapper">
      <h2>RADIO</h2>
      <div class="example radio">
        <div>
          <p class="turnBoxButton">OFF</p>
        </div>
        <div>
          <p>ON</p>
        </div>
      </div>
      <div class="example radio">
        <div>
          <p class="turnBoxButton">OFF</p>
        </div>
        <div>
          <p>ON</p>
        </div>
      </div>
      <div class="example radio">
        <div>
          <p class="turnBoxButton">OFF</p>
        </div>
        <div>
          <p>ON</p>
        </div>
      </div>
      <div class="example radio">
        <div>
          <p class="turnBoxButton">OFF</p>
        </div>
        <div>
          <p>ON</p>
        </div>
      </div>
    </div>

    <div class="check-wrapper">
      <h2>CHECK</h2>
      <div class="example check">
        <div>
          <p class="turnBoxButton">OFF</p>
        </div>
        <div>
          <p class="turnBoxButton turnBoxButtonPrev">ON</p>
        </div>
      </div>
      <div class="example check">
        <div>
          <p class="turnBoxButton">OFF</p>
        </div>
        <div>
          <p class="turnBoxButton turnBoxButtonPrev">ON</p>
        </div>
      </div>
      <div class="example check">
        <div>
          <p class="turnBoxButton">OFF</p>
        </div>
        <div>
          <p class="turnBoxButton turnBoxButtonPrev">ON</p>
        </div>
      </div>
      <div class="example check">
        <div>
          <p class="turnBoxButton">OFF</p>
        </div>
        <div>
          <p class="turnBoxButton turnBoxButtonPrev">ON</p>
        </div>
      </div>
    </div>
  </div>

CSS

body {
      background-color: #3a3a3a;
      padding-top: 100px;
      color: white;
      font-size: 0px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
    }
    
    h2 {
      display: block;
      width: 100%;
      font-weight: 300;
      font-size: 20px;
      margin-bottom: 50px;
      text-align: center;
    }
    
    .contents {
      display: inline-block;
    }

    .radio-wrapper, .check-wrapper {
      float: left;
      margin: 0px 20px;
    }
    
    .example {
      font-size: 15px;
      color: #fff;
      margin-bottom: 8px;
    }  

    .example p {
      -webkit-transition: all 100ms ease-in-out 0ms;
      -moz-transition: all 100ms ease-in-out 0ms;
      -ms-transition: all 100ms ease-in-out 0ms;
      -o-transition: all 100ms ease-in-out 0ms;
      transition: all 100ms ease-in-out 0ms;
      line-height: 3.5;
      color: rgba(255, 255, 255, 0.5);
    }

    .example p:hover {
      color: rgba(255, 255, 255, 1);
    cursor:pointer;
    }

    .example.turnBoxCurrentFace1 > .turnBoxFaceNum1 {
      background-color: #333;
    }

    .example.turnBoxCurrentFace1 > .turnBoxFaceNum2 {
      background-color: #0093b1;
    }

    .example .turnBoxFaceNum1 {
      background-color: #262626;
    }

    .example .turnBoxFaceNum2 {
      background-color: #007e98;
    }

    .example .turnBoxFaceNum2 p {
      color: #fff;
    }

JavaScript

/*
 * TURNBOX.js by NOHT CO.,LTD.
 * http://noht.co.jp/
 *
 * Copyright 2014, NOHT CO.,LTD.
 * Licensed under the MIT license.
 *
 */

(function($){
  $.fn.turnBox = function(options)
  {
    var defaults = {
      width: 200,
      height: 50,
      axis: "X",
      perspective: 800,
      duration: 200,
      delay: 0,
      easing: "linear",
      direction: "positive",
      type: "real",
    };

    var setting = $.extend(defaults, options);
    var
    box = this,
    width = setting.width,
    height = setting.height,
    even = setting.even,
    perspective = setting.perspective,
    duration = setting.duration,
    easing = setting.easing,
    delay = setting.delay,
    type = setting.type,
    axis = setting.axis.toUpperCase(),
    direction = setting.direction,
    face_pcs = box.children().length;

    if(face_pcs > 4) {
      var face_pcs = 4;
    }

    if(axis == "Y") {
      var length = width; 
    } else {
      var length = height; 
    }

    if(even == undefined) {
      var even = length;
    }

    if(length !== even) {
      var fixed = false;
      if(type == "skip") {
        var type = "real";    
      }
    } else {
      var fixed = true;
    }

    if(type !== "repeat" && type !== "skip") {
      var type = "real";
    }

    if(direction !== "negative") {
      var direction = "positive";
    }

    // styleをheaderにappend
    function append_styles(box, css_code)
    {
      var box_name = encode_class_id(box.selector);

      var style_id = "turnBoxStyle-" + box_name;
      var css_template = '<style id="%style_id%">\n%css_code%\n</style>';

      var style = css_template.replace(/%style_id%/g, style_id);
      style = style.replace(/%css_code%/g, css_code);

    if(document.getElementById(style_id) != null) {
      $("#" + style_id).remove();
    }

      $("head").append(style);
    }

    //-----------------------------------------------
    // cssコードの取得
    //-----------------------------------------------
    // prefix
   ...