JSFiddle - React, Tailwind, and code Playground
HTML
<body >
<div class="container" >
<h2 style="color:white">
collapse
</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" >
<h3 class="panel-title">
</h3>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
1 .
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body" style="background-color:#c7bfd3">
<ul>
<li>
1.
</li>
<li>
2.
</li>
<li>
3.
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
</h3>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
2 .
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body" style="background-color:#c7bfd3;overflow-y: auto; overflow-x:auto;">
<div style="background-color:#D5C3DB; box-shadow:inset 0 0 7px 7px #c7bfd3;overflow-y: auto;overflow-x:auto;">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
</h3>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
3 .
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div...
CSS
@charset "utf-8";
@import url("Keystone.css");
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0
}
a {
background-color: transparent
}
a:active, a:hover {
outline: 0
}
b, strong {
font-weight: 700
}
dfn {
font-style: italic
}
h1 {
margin: .67em 0;
font-size: 2em
}
mark {
color: #000;
background: #ff0
}
small {
font-size: 80%
}
sub, sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
figure {
margin: 1em 40px
}
hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em
}
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit
}
button {
overflow: visible
}
button, select {
text-transform: none
}
button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled], html input[disabled] {
cursor: default
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0
}
input {
line-height: normal
}
input[type=checkbox], input[type=radio] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
height:auto
}
input[type=search] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid silver
}
legend {
padding: 0;
border: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-spacing: 0;
border-collapse:...
JavaScript
(function ($) {
$(document).ready(function () {
$.ajaxSetup({ cache: false });
setInterval(function () {
$.getJSON('/echo/js/?js={"var1": "30", "var2": "40"}', function (data) {
if (data.var1) {
$('#C1-Cycle').val(data.var1);
}
if (data.var2) {
$('#C2-Cycle').val(data.var2);
}
});
}, 1000);
});
})(jQuery);
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.4",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function...