JSFiddle - React, Tailwind, and code Playground

by mark_kenneth

HTML

<body data-spy="scroll" data-target=".module-sidebar">
    <div class="container">		
        <div class="row">
            <div class="span3 module-sidebar">
                <ul id="sidebar" data-spy="affix"  data-offset="250" data-offset-bottom="0" class="nav nav-list bs-docs-sidenav affix">
                    <li>
                        <a href="#module1"><i class="icon-chevron-right"></i>Module1 Name</a>
                    </li>
                    <li>
                        <a href="#module2"><i class="icon-chevron-right"></i>Module2 Name</a>
                    </li>
                    <li>
                        <a href="#module3"><i class="icon-chevron-right"></i>Module3 Name</a>
                    </li>
                </ul>
            </div>
        
            <div class="span9">
                <section id="module1">
                    <div class="page-header">
                        <h1>Module1 Name</h1>
                    </div>
            
                    <div class="bs-docs-example">
                        <div class="accordion" id="accordion1">
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#function1">Function1 Name</a>
                                </div>
                                <div id="function1" class="accordion-body collapse">
                                    <div class="accordion-inner">
                                    <h3>Topic1 Name</h3>
                                    <p>Topic1 Desc</p>                              
                                        <h4>SubTopic1 Name</h4>
                                        <p>SubTopic1 Desc</p>                                   
                                            <h4><img src="../assets/img/manuals/module1/function1/step1.png"/></h4>
                    ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

html {
  font-size: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map_canvas img,
.google-maps img {
  max-width: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance:...