JSFiddle - React, Tailwind, and code Playground

by zulfan ridha

HTML

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>bentuk border</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    function handleShape( e ) {
      $( ".shape" )
        .removeClass( "circle pill square rectangle" )
        .addClass( $( e.target ).val() );
    };
    function handleToggle( e ) {
      var target = $( e.target );
 
      if ( target.is( ".brand-toggle" ) ) {
        var checked = target.is( ":checked" ),
          value = $( "[name='brand']" )
            .filter( ":checked" )
            .attr( "data-" + target[ 0 ].id )
        $( ".shape" ).css( target[ 0 ].id, checked ? value : "" );
      } else {
        $( ".shape" ).toggleClass( target[ 0 ].id, target.is( ":checked") );
      }
    }
    function updateBrand() {
      handleShape( { target: $( "[name='shape']:checked" ) } );
      $( ".toggle:checked" ).each( function() {
        handleToggle( { target: $( this ) } );
      } );
    }

    $( "input" ).checkboxradio();
    $( ".shape-bar, .brand" ).controlgroup();
    $( ".toggles" ).controlgroup( {
      direction: "vertical"
    } );
    $( "[name='shape']").on( "change", handleShape );
    $( ".toggle" ).on( "change", handleToggle );
    $( "[name='brand']").on( "change", updateBrand );

  } );
  </script>
</head>
<body>
  <div class="shape-wrap">
    <h3>pilih bentuk border yang tersedia</h3>
    <div class="shape-bar">
      <label for="shape-circle">bulat</label>
      <input type="radio" name="shape" id="shape-circle" value="circle" checked>
      <label for="shape-square">kubus</label>
      <input type="radio" name="shape" id="shape-square" value="square">
      <label...

CSS

.shape {
      margin-left: 4em;
      margin-top: 2.5em;
      height: 8em;
      width: 8em;
      border: 2px solid #333333;
    }
    .circle, .pill {
      border-radius: 8em;
    }
    .pill, .rectangle {
      width: 16em;
    }
    .square, .circle {
      margin-left: 9em;
    }