JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<div class="clause">
    <table>
        <tr>
            <td><img src="http://i.imgur.com/nSS28.png"/></td>
            <td>
                <div class="label">Location</div>
                <div class="info">Midwest > Indiana, Kentucky; Southwest > Texas, Nevada, Utah; Pacific > California, Hawaii</div>
            </td>
        </tr>
    </table>
</div>
<div class="drawer">
    <table width="100%">
        <tr>
            <td width="25%">Categories:</td>
            <td width="75%"><input width="100%" size="30" type="text" /></td>
        </tr>
        <tr>
            <td width="25%">Values:</td>
            <td width="75%"><input width="100%" size="30" type="text" /></td>
        </tr>
        <tr><td colspan="2"><hr /></td></tr>
        <tr><td colspan="2"><ul><li class="add"><a href="#non">Product set</a></li></ul></td></tr>
    </table>
</div>
<div class="drawer-arrow"></div> 
<div class="drawerBottom"></div>

<div class="container">
    <div class="arrow-up"></div>
    <div class="operator">AND</div>
    <div class="arrow-down"></div>
</div>

<div class="clause">
    <table>
        <tr>
            <td><div class="icon"><img src="http://i.imgur.com/uIOZF.png"/></div></td>
            <td>
                <div class="label">Customer</div>
                <div class="info">Avg. Purchases<br />1-3, 4-6</div>
            </td>
        </tr>
    </table>
</div>
<div class="drawer">
    <table width="100%">
        <tr>
            <td width="25%">Categories:</td>
            <td width="75%"><input width="100%" size="30" type="text" /></td>
        </tr>
        <tr>
            <td width="25%">Values:</td>
            <td width="75%"><input width="100%" size="30" type="text" /></td>
        </tr>
        <tr><td colspan="2"><hr /></td></tr>
        <tr><td colspan="2"><ul><li class="add"><a href="#non">Product set</a></li></ul></td></tr>
    </table>
</div>
<div class="drawer-arrow"></div> 
<div class="drawerBottom"></div>

<div class="container">
    <div...

CSS

body { margin:50px }
hr { background:#dadada; border:none; height:1px; margin:5px 0 0px 0 } 
.clause {
    width:300px;
    height:auto;
    padding:7px 5px 3px 5px;
    border-top-right-radius:3px;
    border-top-left-radius:3px;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:3px;
    border:1px solid #666;
    background: -webkit-linear-gradient(top,  #e6e6e6 0%,#d8d8d8 100%);
}
.clause:hover {
    background: -webkit-linear-gradient(top,  #e6e6e6 50%,#d8d8d8 100%);
    cursor:pointer;
}
.clause .label {
    display:inline;
    vertical-align:top;
    font-size:11px;
    font-family:Helvetica, sans-serif;
    font-weight:bold;
    color:#444;
    text-transform:uppercase;
    text-shadow:0px 1px 0px #e8eae5;
}
.clause .info {
    display:inline;
    line-height:14px;
    vertical-align:top;
    font-size:10px;
    font-family:Helvetica, sans-serif;
    font-weight:light;
    color:#444;
    text-shadow:0px 1px 0px #e8eae5;
}
.clause .icon { padding: 0 10px 0 0 }
.container{
    margin:15px 0 15px 10px;
    text-align:center;
}
.operator {
    width:50px;
    height:25px;
    background:#666;
    text-align:center;
    color:white;
    font-size:11px;
    font-family:Helvetica, sans-serif;
    font-weight:bold;
    line-height:2.4em;
}
.operator:hover {
    cursor:pointer;    
}
.arrow-up {
    margin-left:20px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #666;
}
.arrow-down {
    margin-left:20px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
}
.drawer {
    width:300px;
    padding:10px 6px 6px 6px;
    position:relative;
    margin-top:-3px;
    background:#F4F4F4; 
    z-index:-999;
    display:none;
    transition: display 2s ease; 
    
    font-size:12px;
    font-family:Helvetica, sans-serif;
    font-weight:light;
}
.productSet {
   ...

JavaScript

$(".clause").mouseenter(function() {    
    $(this).nextAll("div.drawer-arrow:first,div.drawerBottom:first").show();    
    $(".clause").css("border-bottom-right-radius", "0px")
                .css("border-bottom-left-radius", "0px");
    
}).mouseleave(function(){
    $(this).nextAll("div.drawer-arrow:first,div.drawerBottom:first").hide();    
    $(".clause").css("border-bottom-right-radius", "3px")
                .css("border-bottom-left-radius", "3px");     
});
    
    
$(".operator").click(function() {
  if($(this).text() == "OR")
    $(this).html("AND");
  else if($(this).text() == "AND")
    $(this).html("NOT");
  else if($(this).text() == "NOT")
    $(this).html("OR");
});

$(".clause").click(function() {
    $(".clause").css("box-shadow", "none");
    var tmp = $(this).next("div.drawer");
    if(tmp.is(":hidden")) {
        tmp.slideDown('2s');
        $(this).css("box-shadow", "0px 3px 5px #AAA");
    }
    else {
        tmp.slideUp('2s');
    }
});