JSFiddle - React, Tailwind, and code Playground

by austinfrance

HTML

<div id="container">
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
    <p>Line 5</p>
    <p>Line 6</p>
    <p>Line 7</p>
    <p>Line 8</p>
    <p>Line 9</p>
    <p>Line 10</p>
    <p>Line 11</p>
    <p>Line 12</p>
    <p>Line 13</p>
    <p>Line 14</p>
    <p>Line 15</p>
    <p>Line 16</p>
    <p>Line 17</p>
    <p>Line 18</p>
    <p>Line 19</p>
    <p>Line 20</p>
    <p>Line 21</p>
    <p>Line 22</p>
    <button id="button">Click Me</button>
    <p>Line 23</p>
    <p>Line 24</p>
    <p>Line 25</p>
    <p>Line 26</p>
    <p>Line 27</p>
    <p>Line 28</p>
    <p>Line 29</p>
    <p>Line 30</p>
    </div>
</div>
<div id="tabstrip">
    <span id="t1">Tab 1</span>
    <span id="t2">Tab 2</span>
    <span id="t3">Tab 3</span>
</div>

CSS

#container { height: 400px; overflow: scroll; }
#tabstrip { height: 1.5em; background-color: silver; border-top: 1px solid black; }
#tabstrip span { border: 1px solid black; display: inline; float: left; width: 5em; margin-right: 0.2em; padding: 0.4em; background-color: silver; cursor: pointer; }
#tab1, #tab2 { display:none; }
#t3 { background-color: red; } 
#button { height: 4em; width: 200px; }

JavaScript

dojo.connect(button, "onclick", function(e) { 
    alert('button onclick event phase ' + e.eventPhase); 
});
dojo.connect(tabstrip, "onclick", function(e) {
    alert('tabstrip onclick event phase ' + e.eventPhase);
});
dojo.connect(t1, "onclick", function(e) {
    alert('tab1 click event phase ' + e.eventPhase);
});