JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clause">
    <div class="icon"><img src="http://i.imgur.com/rTu40.png"/></div>
    <div class="label">Location</div>
    <div class="info">Midwest > Indiana, Kentucky; Southwest > Texas, Nevada, Utah; Pacific > California, Hawaii</div>        
</div>
<div class="drawer">Info 1<br/><br/><br/><br/><br/></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">
    <div class="icon"><img src="http://i.imgur.com/rTu40.png"/></div>
    <div class="label">Customer</div>
    <div class="info">Avg. Purchases: 1-3, 4-6</div>    
</div>
<div class="drawer">Info 2<br/><br/><br/></div>
<div class="drawerBottom"></div>

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

<div class="clause">
    <div class="icon"><img src="http://i.imgur.com/rTu40.png"/></div>
    <div class="label">Product</div>
    <div class="info">Mens > Personal Care > Gillette razor, Gillette shaving cream</div>    
</div>
<div class="drawer">Info 3<br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
<div class="drawerBottom"></div>

CSS

body { margin:50px }
.clause {
    width:300px;
    height:auto;
    padding:5px;
    border-top-right-radius:3px;
    border-top-left-radius:3px;
    border:1px solid #d3d3c0;
    background: -webkit-linear-gradient(top,  #e8eae5 0%,#d3d3c0 100%);
}
.clause:hover {
    background: -webkit-linear-gradient(top,  #e8eae5 25%,#d3d3c0 100%);
    cursor:pointer;
}
.clause .icon {
    display:inline;
}
.clause .label {
    margin:-33px 0 0 25px;
    font-size:11px;
    font-family:Helvetica, sans-serif;
    font-weight:bold;
    color:#444;
    text-transform:uppercase;
    text-shadow:0px 1px 0px #e8eae5;
}
.clause .info {
    margin:0px 0 0 25px;
    font-size:10px;
    font-family:Helvetica, sans-serif;
    font-weight:light;
    color:#444;
    text-shadow:0px 1px 0px #e8eae5;
}
.container{
    margin:15px 0 15px 10px;
}
.operator {
    width:50px;
    height:25px;
    background:#555;
    border-radius:3px;
    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 #555;
}
.arrow-down {
    margin-left:20px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #555;
}
.drawer {
    width:300px;
    padding:6px;
    position:relative;
    margin-top:-3px;
    background:#EFEFEF; 
    z-index:-999;
    display:none;
    transition: display 2s ease; 
    
    font-size:12px;
    font-family:Helvetica, sans-serif;
    font-weight:light;
}
.drawerBottom {
    width:312px;
    height:10px;
    background:#555;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:3px;      
}

JavaScript

$(".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() {
    var tmp = $(this).next("div.drawer");
    if(tmp.is(":hidden"))
        tmp.slideDown('3s');
    else
        tmp.slideUp('3s');
});

$(".clause").hover(function() {
     
});