JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<!-- Make the tabs look like the screenshots below -->
<div id="tabs">
  <a href="#" class="button selected">HTML</a>
  <a href="#" class="button">CSS</a>
  <a href="#" class="button">JavaScript</a>
  <a href="#" class="button">Console</a>
  <a href="#" class="button">Output</a>
</div>










<!-- Screenshots below.. no need to modify -->

<div id="screenshots" style="margin-top: 50px">
  <strong>Screenshots</strong><br />
<img style="max-width: 100%"
     src="http://msuja.ws/moz/selected.png" />
<img style="max-width: 100%"
     src="http://msuja.ws/moz/selected-hover.png" />
<img style="max-width: 100%"
     src="http://msuja.ws/moz/selected-hover-active.png" />
<img style="max-width: 100%"
     src="http://msuja.ws/moz/unselected-hover.png" />
<img style="max-width: 100%"
     src="http://msuja.ws/moz/unselected-hover-active.png" />
</div>

JavaScript

/* No need to toggle the selected tab... */