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" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
<body>

<div id="container">
<div id="left">

    <p class="p1">
    <a href="#target1" class="panel"><img src="images/upcycled_logo.gif" /></a>
    </p>
    <p class="p2"><a href="#target2" class="panel">
    <img src="images/simplicity_logo.gif" /></a></p>
    <p class="p3"><a href="#target3" class="panel"><img src="images/verticalventures_logo.gif" /></a>
    </p>
    
    
</div>

<div id="right">
    <div class="panel" id="target1">Target1</div>
    <div class="panel" id="target2">Target 2</div>
    <div class="panel" id="target3">Target 3</div>
</div></div>


</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

body {font-family:geneva; text-decoration:none;}

#container {width:1000px;margin:0px;}
#left, #right {
    position: relative;
    float: left;
    margin: 0;
    overflow: hidden;
    height:100%;    
    padding:20px;
}

#left {width:200px; background-color:#fff;text-align:center;}

.p1,.p2,.p3 {padding:20px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;margin: 30px 0px 30px 0px;}
.p1 img,.p2 img,.p3 img {width:160px;height:100px;border:0px;}
.p1:hover {background-color:#0FF;}
.p2:hover {background-color:#F0F;}
.p3:hover {background-color:#FF0;}

#right {width:700px; background-color:#000;color:#fff;}

div.panel {position: absolute;height: 100%; width: 100%;display: none; padding-top:30px; }

JavaScript

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');
        
        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });

});