JSFiddle - React, Tailwind, and code Playground

by tearex

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js&quot;"></script>
<!DOCTYPE html>




<div id="demos">
    <c:forTokens items="ui,form,toolbox" var="main" delims="," varStatus="j">

      <div class="col" id="col${j.index}">

            <h2>${main} ${j.index < 2 ? '<strong>TOOLS</strong>' : ''}</h2>

        <div class="pic" id="pic-${main}"></div>

            <c:forEach items='<%= area.getCategories((String)pageContext.getAttribute("main")) %>' var="cat" varStatus="i">
              <form name="form1" method="post" action="">
                <input type="radio" name="radio" id="jqt3" value="jqt3">
                <label for="jqt3">label</label>
              </form>

                <div class="cat ${cat.title == 'Combinations' ? 'combinations' : ''}">
                    <h3 title="${cat.description}">${cat.title}</h3>

                    <c:forEach items="${cat.demos}" var="demo">
                        <a href="${demo.path}">${demo.title}</a>
                    </c:forEach>
                </div>

                <c:if test="${i.index == 3}"><br clear="all" /></c:if>

            </c:forEach>

        </div> 

    </c:forTokens>

</div>

CSS

#demos {
    background:#fff url(/img/global/gradient/h150_reverse.png) repeat-x scroll 0 -95px;     
    padding:30px 0 30px 40px;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.col {
    margin-right:0;  
    width:280px; 
    border-right:1px dotted #ccc;
    float:left;
}

#col1, #col2 {
    padding-left:30px;      
}

#col2 {
    border-right:0px;       
    width:310px;
}


.cat {
    width:230px;
    margin-top:25px;
}

.cat a {
    display:block;
    text-decoration:none;
    font-size:11px;
    color:#999; 
    margin:2px 0;
}

.cat a:hover {
    color:#333;
}

.cat h3 {
    font-size:14px;
    margin-bottom:2px;
}

.combinations h3 {
    font-weight:bold;
}

.col h2 {
    font-size:20px;
    text-shadow:0 0 3px #fff;
    text-transform:uppercase;
    font-weight:bold;
}

.col h2 strong {
    color:#5A57AB;
}

.pic {
    background:url(${cdn}${jqt}/img/jqt_sprite_medium.png) no-repeat 0 10px;
    height:200px;
    margin:-10px 0 -50px;   
}

#pic-form {
    background-position:0 -200px;       
}

#pic-toolbox {
    background-position:0 -400px;
}

JavaScript

$(document).ready(function(){$("#jqt3").addClass("active");});

$("#jqt3").addClass("active");