JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div id="container">
    <ul id="tab">
        <li><a href="#tab1">Profile</a>
        </li>
        <li><a href="#tab2">Profile</a>
        </li>
        <li><a href="#tab3">Profile</a>
        </li>
        <li><a href="#tab4">History</a>
        </li>
        <li><a href="#tab5" class="active">Crew</a>
        </li>
    </ul>
    <div id="tabArea">
        <div id="tab1" class="active">コンテンツ1</div>
        <div id="tab2">コンテンツ2</div>
        <div id="tab3">コンテンツ3</div>
        <div id="tab4">コンテンツ3</div>
        <div id="tab5">コンテンツ3</div>
    </div>
</div>

CSS

#tab_container {


    width: 830px;


}


/* タブ */


#tab {


    width: 100%;


    overflow: hidden;


    padding: 10px;


}


#tab li {


    float: left;


    width: 20%;


}


#tab li a {


    width: 99%;


    display: box;


    display: -moz-box;


    display: -webkit-box;


    box-align: center;


    -moz-box-align: center;


    -webkit-box-align: center;


    box-pack: center;


    -moz-box-pack: center;


    -webkit-box-pack: center;


    box-flex: 1;


    -moz-box-flex: 1;


    -webkit-box-flex: 1;


    height: 30px;


    margin: 0 auto;


    background: #d8d8d8;


    text-decoration: none;


    color:#999999;


}


#tab li a.active {


    background: #51514f;


    font-weight: bold;


    color:#ffffff;


}


/* タブコンテンツ */


#tabArea div[id^=tab] {


    display: none;


    height: 400px;


    /* [disabled]padding: 10px; */


}


#tabArea div[id^=tab]:first-child {


    display: block;


}

JavaScript

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/
(function (e, t) {
    var n, r, i = typeof t,
        o = e.document,
        a = e.location,
        s = e.jQuery,
        u = e.$,
        l = {}, c = [],
        p = "1.9.1",
        f = c.concat,
        d = c.push,
        h = c.slice,
        g = c.indexOf,
        m = l.toString,
        y = l.hasOwnProperty,
        v = p.trim,
        b = function (e, t) {
            return new b.fn.init(e, t, r)
        }, x = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
        w = /\S+/g,
        T = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
        N = /^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,
        C = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
        k = /^[\],:{}\s]*$/,
        E = /(?:^|:|,)(?:\s*\[)+/g,
        S = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
        A = /"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,
        j = /^-ms-/,
        D = /-([\da-z])/gi,
        L = function (e, t) {
            return t.toUpperCase()
        }, H = function (e) {
            (o.addEventListener || "load" === e.type || "complete" === o.readyState) && (q(), b.ready())
        }, q = function () {
            o.addEventListener ? (o.removeEventListener("DOMContentLoaded", H, !1), e.removeEventListener("load", H, !1)) : (o.detachEvent("onreadystatechange", H), e.detachEvent("onload", H))
        };
    b.fn = b.prototype = {
        jquery: p,
        constructor: b,
        init: function (e, n, r) {
            var i, a;
            if (!e) return this;
            if ("string" == typeof e) {
                if (i = "<" === e.charAt(0) && ">" === e.charAt(e.length - 1) && e.length >= 3 ? [null, e, null] : N.exec(e), !i || !i[1] && n) return !n || n.jquery ? (n || r).find(e) : this.constructor(n).find(e);
                if (i[1]) {
                    if (n = n instanceof b ? n[0] : n, b.merge(this, b.parseHTML(i[1], n && n.nodeType ? n.ownerDocument || n...