JSFiddle - React, Tailwind, and code Playground
by UserNaN
HTML
<div id='container'>
<div id='title' class='active' data='1'>
<div id='content'>Content 1</div>
<div id='description'>Description 1</div>
</div>
<div id='main' data='1'>
<div id='sub'>
<div id='content'>Content 2</div>
<div id='description'>Description 2</div>
</div>
<div id='sub'>
<div id='content'>Content 3</div>
</div>
<div id='title' data='2'>
<div id='content'>Content 4</div>
</div>
<div id='main' data='2'>
<div id='sub'>
<div id='content'>Content 5</div>
<div id='description'>Description 5</div>
</div>
<div id='sub'>
<div id='content'>Content 6</div>
<div id='description'>Description 6</div>
</div>
<div id='title' class='active' data='3'>
<div id='content'>Content 7</div>
</div>
<div id='main' data='3'>
<div id='sub'>
<div id='content'>Content 8</div>
</div>
<div id='sub'>
<div id='content'>Content 9</div>
</div>
</div>
</div>
</div>
<div id='sub'>
<div id='content'>Content 10</div>
<div id='description'>Description 10</div>
</div>
<div id='title' data='4'>
<div id='content'>Content 11</div>
</div>
<div id='main' data='4'>
<div id='title' data='5'>
<div id='content'>Content 12</div>
</div>
<div id='main' data='5'>
<div id='sub'>
<div id='content'>Content 13</div>
<div id='description'>Description 13</div>
</div>
</div>
<div id='sub'>
<div id='content'>Content 14</div>
</div>
</div>
</div>
<div id='save'>Save</div>
CSS
#container {
padding: 5px;
border: 1px solid #666;
}
#title {
color: #f00;
font-weight: bold;
}
#main {
margin: 10px 0 10px 20px;
}
#content {
font-size: 12px;
}
#description {
font-size: 11px;
font-style: italic;
}
#sub {
margin: 10px 0 10px 20px;
}
#save {
cursor: pointer;
display: inline-block;
margin: 10px 0;
padding: 10px;
color: #fff;
background: #333;
}
JavaScript
$('#save').click(function(){
// $.ajax
alert($('#container').html());
});