JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div class="row">
	<div class="large-12 columns">
        <h2>Tabs Only</h2>
		<div class="section-container tabs" data-section="tabs">
			<section>
				<p class="title"><a href="#tab-1">Tab 1</a></p>
				<div class="content" data-slug="tab-1">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
			<section>
				<p class="title"><a href="#tab-2">Tab 2</a></p>
				<div class="content" data-slug="tab-2">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
			<section>
				<p class="title"><a href="#tab-3">Tab 3</a></p>
				<div class="content" data-slug="tab-3">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
		</div>
	</div>
</div>

<div class="row">
	<div class="large-12 columns">
        <h2>Accordion Only</h2>
		<div class="section-container accordion" data-section="accordion">
			<section>
				<p class="title"><a href="#tab-1">Tab 1</a></p>
				<div class="content" data-slug="tab-1">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
			<section>
				<p class="title"><a href="#tab-2">Tab 2</a></p>
				<div class="content" data-slug="tab-2">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
			<section>
				<p class="title"><a href="#tab-3">Tab 3</a></p>
				<div class="content" data-slug="tab-3">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
		</div>
	</div>
</div>

<div class="row">
	<div class="large-12 columns">
        <h2>Accordion within Tab</h2>
		<div class="section-container tabs" data-section="tabs">
			<section>
				<p class="title"><a href="#tab-1">Tab 1</a></p>
				<div class="content" data-slug="tab-1">
                    
                    <div class="section-container accordion" data-section="accordion">
                        <section>
                            <p class="title"><a href="#tab-1-1">Tab 1-1</a></p>
      ...

CSS

@charset "UTF-8";
/* normalize.css v2.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address styling not present in IE 8/9.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in...

JavaScript

/*
 * Foundation Responsive Library
 * http://foundation.zurb.com
 * Copyright 2013, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
*/

/*jslint unparam: true, browser: true, indent: 2 */

// Accommodate running jQuery or Zepto in noConflict() mode by
// using an anonymous function to redefine the $ shorthand name.
// See http://docs.jquery.com/Using_jQuery_with_Other_Libraries
// and http://zeptojs.com/
var libFuncName = null;

if (typeof jQuery === "undefined" &&
    typeof Zepto === "undefined" &&
    typeof $ === "function") {
  libFuncName = $;
} else if (typeof jQuery === "function") {
  libFuncName = jQuery;
} else if (typeof Zepto === "function") {
  libFuncName = Zepto;
} else {
  throw new TypeError();
}

(function ($, window, document, undefined) {
  'use strict';

  // add dusty browser stuff
  if (!Array.prototype.filter) {
    Array.prototype.filter = function(fun /*, thisp */) {
      "use strict";
   
      if (this == null) {
        throw new TypeError();
      }

      var t = Object(this),
          len = t.length >>> 0;
      if (typeof fun != "function") {
          return;
      }

      var res = [],
          thisp = arguments[1];
      for (var i = 0; i < len; i++) {
        if (i in t) {
          var val = t[i]; // in case fun mutates this
          if (fun && fun.call(thisp, val, i, t)) {
            res.push(val);
          }
        }
      }

      return res;
    }
  }

  if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
      if (typeof this !== "function") {
        // closest thing possible to the ECMAScript 5 internal IsCallable function
        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
      }
   
      var aArgs = Array.prototype.slice.call(arguments, 1), 
          fToBind = this, 
          fNOP = function () {},
          fBound = function () {
            return fToBind.apply(this instanceof...