JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <div class="row">
      <div class="span4">
      <div class="widget">
        <div class="widget-header">
          <i class="icon-info-sign icon-large"></i>
           <h3 class="clickme">Core</h3>
        </div><!--/widgetheader-->
         <div class="widget-content-box">
          <p>Hello</p>
          
   
         </div><!--/widget content-->
        </div><!--widget-->
      </div><!--span4--><div class="container">

CSS

.widget {
    clear: both;
    margin-bottom: 2em;
    overflow: hidden;
    position: relative;
    width: auto;
    background:url(/assets/memberbg.png) repeat;
}
.widget-header {
    background: -moz-linear-gradient(center top , #FAFAFA 0%, #E9E9E9 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D5D5D5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 40px;
    line-height: 40px;
    position: relative;
}
.widget-header h3 {
    color: #555555;
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    left: 10px;
    line-height: 18px;
    margin-right: 3em;
    position: relative;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    top: 2px;
    }

    .widget-content {
    border:none;
    border-radius: 5px 5px 5px 5px;
   

}
.widget-content-box{
    border:none;
    border-radius: 5px 5px 5px 5px;
    background:white;
   

}

JavaScript

$(".widget-content-box > p").slideUp();
$("h3.clickme").click(function(){
    alert('clicked');
    $(this).parent.next.slideToggle("slow");
  });