JSFiddle - React, Tailwind, and code Playground

by Hui Zheng

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
    <style type="text/css">
        body {
            padding: 20px;
        }
    </style>
    <title>Creating tabbed content with Bootstrap and jQuery</title>
</head>
<body>
 
    <div id="content">
        <ul class="tabs" data-tabs="tabs">
            <li class="active"><a href="#red">Red</a></li>
            <li><a href="#orange">Orange</a></li>
            <li><a href="#yellow">Yellow</a></li>
            <li><a href="#green">Green</a></li>
            <li><a href="#blue">Blue</a></li>
        </ul>
        <div id="my-tab-content" class="tab-content">
            <div class="tab-pane active" id="red">
                <h1>Red</h1>
                <p>red red red red red red</p>
            </div>
            <div class="tab-pane" id="orange">
                <h1>Orange</h1>
                <p>orange orange orange orange orange</p>
            </div>
            <div class="tab-pane" id="yellow">
                <h1>Yellow</h1>
                <p>yellow yellow yellow yellow yellow</p>
            </div>
            <div class="tab-pane" id="green">
                <h1>Green</h1>
                <p>green green green green green</p>
            </div>
            <div class="tab-pane" id="blue">
                <h1>Blue</h1>
                <p>blue blue blue blue blue</p>
            </div>
        </div>
    </div>
 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".tabs").tabs();
        });
    </script>
 
</body>
</html>