JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="http://jquery.bassistance.de/treeview/images/treeview-default-line.gif"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<span class="fa-stack green">
    <i class="fa fa-calendar fa-stack-1x fa-lg"></i>

</span>

<span class="fa-stack red">
    <i class="fa fa-calendar fa-stack-1x fa-lg" ></i>
    
</span>

<span class="fa-stack blue">
    <i class="fa fa-calendar fa-stack-1x fa-lg"></i>

</span>
<br/>
<br/>

<span class="fa-stack red">
    <i class="fa fa-calendar-o fa-stack-1x fa-lg"></i>
    <i class="fa fa-caret-up fa-stack-1x"></i>
</span>

<span class="fa-stack green">
    <i class="fa fa-calendar-o fa-stack-1x fa-lg" ></i>
    <i class="fa fa-caret-down fa-stack-1x" style="margin-top:1px"></i>
</span>

<span class="fa-stack blue">
    <i class="fa fa-calendar-o fa-stack-1x fa-lg"></i>
    <i class="fa fa-ellipsis-h fa-stack-1x" style="margin-top:2px"></i>
</span>
<br/>
<br/>

<span class="fa-stack">
    <i class="fa fa-calendar fa-stack-1x fa-lg"></i>
    <i class="fa fa-caret-up fa-stack-1x"></i>
</span>

<span class="fa-stack">
    <i class="fa fa-calendar fa-stack-1x fa-lg" ></i>
    <i class="fa fa-caret-down fa-stack-1x" style="margin-top:1px"></i>
</span>

<span class="fa-stack">
    <i class="fa fa-calendar fa-stack-1x fa-lg"></i>
    <i class="fa fa-ellipsis-h fa-stack-1x" style="margin-top:2px"></i>
</span>


<br/>
<br/>

<span class="fa-stack">
    <i class="fa fa-calendar fa-stack-1x fa-lg"></i>
    <i class="fa fa-caret-up fa-stack-1x green"></i>
</span>

<span class="fa-stack">
    <i class="fa fa-calendar fa-stack-1x fa-lg" ></i>
    <i class="fa fa-caret-down fa-stack-1x red" style="margin-top:1px"></i>
</span>

<span class="fa-stack">
    <i class="fa fa-calendar fa-stack-1x fa-lg"></i>
    <i class="fa fa-ellipsis-h fa-stack-1x blue"...

CSS

body {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 20px;
    color: #aaa;
}
ul {
    list-style-type: none;
}
li {
    border: solid 1px transparent;
}
span {
    display:inline-block;
}
.treeview li {
    background: url('http://jquery.bassistance.de/treeview/images/treeview-default-line.gif') 0 0 no-repeat;
    padding: 3px 0 2px 20px;
}
.treeview li.last {
    background-position: 0 -1766px;
}
span.act {
    color: black;
}
li.drop {
    background-color: #f5f5f5;
    border: dashed 1px #ccc;
    font-size: 80%;
    cursor: pointer;
}
#target {
    color: black;
}

.green{
    color: #5cb85c;
}

.red{
    color: #d9534f;
}

.blue{
    color: #5bc0de;
}

JavaScript

$("li.drop").on('click', function (e) {
    <!-- reset text -->
    $("#above > span").text($("#above > span").data("orig-text"))
    $("#below > span").text($("#below > span").data("orig-text"))
    $("#child > span").text($("#child > span").data("orig-text"))

    $(e.currentTarget).find("span").text($("#target").text())

});