JSFiddle - React, Tailwind, and code Playground

by mark69_fnd

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">
</head>
<body class="yui3-skin-sam">
<div id="g1" class="yui3-button-group-exclusive">                                            
  <button id="a" class="yui3-button yui3-button-toggle">a</button>    
  <button id="b" class="yui3-button yui3-button-toggle">b</button>
  <button id="c" class="yui3-button yui3-button-toggle">c</button>
</div>
<div id="g2" class="yui3-button-group-exclusive">                                            
  <button id="x" class="yui3-button yui3-button-toggle">x</button>    
  <button id="y" class="yui3-button yui3-button-toggle">y</button>
  <button id="z" class="yui3-button yui3-button-toggle">z</button>
</div>
</body>
</html>

CSS

button{
    font-family: monospace;
}

JavaScript

YUI({gallery: 'gallery-2012.03.28-20-16'}).use('gallery-button-plugin', 'button', function(Y) {
    Y.ButtonPlugin.addToggles();
    Y.one("#g1").on('click', function (e){ alert("g1." + e.target.get('id') + ' selected = ' + e.target.get('selected')); });
})