JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style type="text/css">
#tabs{
    margin:20 px 0; }
#tabs ul {
    float: center;
    background: #003333;
    height:25px;
    width: 500px;
    padding-top: 4px; }  
#tabs ul li {
    float: left;
    margin-left: 2em; }
#tabs ul li a{
    text-decoration:none;
    color:#FFFFFF;
    font-weight:bold; }
#tabs ul li.active{
    background-color:#669999; }
#tabs div{
    position:absolute;
    width:500px;
    height:500px;
    padding:20px;
    margin-top:2px; }
#tab1{
    background-color:green; }
#tab2{
    background-color:red; }
#blueBox{
    float:left;
    width:100px;
    height:100px;
    background-color:yellow;
    margin-left:5px;
    margin-top:150px; }
</style>

<script src="js/jquery-1.4.2.js" type="text/javascript" /></script>
<script type="text/javascript">
$(function(){
    $('#tabs > div').hide();
    $('#tabs div:first').fadeIn('slow');
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function(){
        $('#tabs ul li.active').removeClass('active');
        $(this).parent().addClass('active');
        var selectedTab=$(this).attr('href');
        $('#tabs > div').fadeOut('slow', function() {
            $(selectedTab).delay(500).fadeIn('slow');
        });        
        return false;
    });
});
</script>



</head>
<body>
<div id="tabs">
<ul>
<li><a href='#Tab1'>Tab 1</a></li>
<li><a href="#Tab2">Tab 2</a></li>
</ul>
<div id="Tab1">
<p>Contents in Tab1 </p>
</div>

<!--this next part is the part I can't get to work. The div blueBox inside the div        Tab2-->

<div id="Tab2">
<p>Contents in Tab2</p>

<div id="blueBox">
<p>Hello</p>
</div>

</div>