JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#main').resizable({
ghost: true,
helper: 'border_accord'});
$('#accord p').hide();
$('#accord h3').toggle(function(){
$(this).addClass('h3_click');
$(this).next('p').slideDown().siblings('p:visible').slideUp();
$(this).siblings('h3').removeClass('h3_click');},
function(){
$(this).removeClass('h3_click').next('p').slideUp();
});
});
</script>
<style type="text/css">
*, html, body{
padding:0px; margin:0px;}
#main{
width:200px;
min-height:200px;
background-color:#e9e9e9;
padding:10px;}
#header{
height:22px;
background-image:url(images/bg_header.png);
border:1px solid #C90;
color:#FFF;
text-align:center;
font-size:18px;
font-weight:bold;
padding-top:3px;}
#accord h3{
height:25px;
border-radius:5px;
border:1px solid #ccc;
background-image:url(images/bg_h3.png);
margin-top:1px;
margin-bottom:1px;
text-align:center;
font-size:14px;
color:#6699CC;
padding-top:5px;
cursor:pointer;}
#accord p{
min-height:100px;
border-radius:5px;
border:1px solid #ccc;
padding:10px;
color:#333;}
#accord p span{
display:block;
margin-left:5px;
margin-top:5px;}
.button_size{
width:85px;
height:25px;
margin-top:5px;}
#accord h3:hover{
...