JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="collapse">Collapse</a> 
<a href="#" class="expand">Expand</a>
<ul>
    <li>
        <h3>Animate float positions in jQuery 1.2</h3>
        <p>
            The question of how to animate an element using floats, or floated elements (ie. float: left, float: right), was posed on Quora the other day and it inspired me to make a quick plugin to achieve this simple task. Out of the box jQuery doesn’t support animating a float postion to the right or left; [...]
        </p>
    </li>
    <li>
        <h3>Javascript Applications 101</h3>
        <p>
            One of my favorite things to do is to build Applications and their inner workings. Scalability and robustness are two things I keep in mind when beginning development. Javascript has become the “go-to” language for Application development these days so it’s important to get a good understanding of how to develop a good base for [...]
        </p>
    </li>
    <li>
        <h3>Pure CSS HTML5 Logo</h3>
        <p>
           With the recent launch of the HTML5 branding I decided to take a stab at making a pure CSS version of the logo.
        </p>
    </li>
    <li>
        <h3>Fix jQuery’s animate() to allow “auto” values</h3>
        <p>
            Going through the jQuery source you start to learn how things are processed by the library. A few months ago I noticed that the .animate() method wasn’t able to compute “auto” values for elements and animate accordingly. After Google-ing the issue I noticed that it’s a big issue for some people. This past month I [...]
        </p>
    </li>
</ul>

CSS

body {
 font-family: sans-serif;   
 color: #666;
 font-size: 12px;
 line-height: 18px;
}

.collapse, .expand {
  text-decoration: none;
  padding: 5px;
  border: 1px solid #d7d7d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ececec));
    background: -moz-linear-gradient(top,  #ffffff,  #ececec);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ececec');
    color: #3d3d3d;
    font-size: 12px;
    text-shadow: 0 1px 1px #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

ul {
 margin: 15px 0 0 0;   
}
ul li {
 width: 100%; 
 margin: 0 0 20px 0;
}

h3 {
 color: #333;
 font-size: 16px;  
 margin: 0 0 10px 0;
}

JavaScript

$("ul li p").bind("collapse", function(){
   $(this).slideUp(500); 
}).bind("expand", function(){
    $(this).slideDown(500);
});

$(".collapse").bind("click", function(event){
    event.preventDefault();
    $("ul li p").trigger("collapse");
});

$(".expand").bind("click", function(event){
   event.preventDefault();
   $("ul li p").trigger("expand"); 
});