JSFiddle - React, Tailwind, and code Playground

by waxwing

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">
<br><br>

<div class="outer">
    <div class="toolbar">
        <i class="fa fa-magic toggler toggly" title="Assisted mode"></i>
        <i class="fa fa-code toggler toggly" title="Raw mode"></i>
        <i class="fa favorite fa-star-o" title="Favorite"></i>
    </div>

<textarea class="advanced toggly">
(FieldA &gt; 0 AND FieldA &lt; 100) OR (matches(TextField, '\d+'))
</textarea>

<div class="holder toggly">
    Either
    <div>
        Both
        <div>
            <span class="editable"><span class="field">FieldA</span> is greater than 0</span>
        </div>
        And 
        <div>
            <span class="editable"><span class="field">FieldA</span> is less than 100</span>
        </div>
    </div>
    Or
    <div>
        <span class="editable"><span class="field">TextField</span> <span class="expandable"><span class="compact">is numeric</span><span class="expanded"> matches the expression <span class="regexp">\d+</span></span></span>
    </div>
</div>

    
</div>

CSS

.outer {
    position: relative;
}

.advanced, .fa-magic {
    display: none;
}

.toolbar {
    position: absolute;
    top: 5px;
    right: 5px;
}

textarea {
    height: 100px;
    width: 100%;
}

.holder {
    border: 1px solid black;
    padding: 5px;
    margin-left: 0;
}

div {
    margin-left: 1em;
}

.expanded {
    display: none;
}

.regexp,.field {
    border: 1px solid grey;
    border-radius: 2px;
    padding: 1px;
}

.regexp {
    background-color: #ffdada;
}

.field {
    background-color: #dadada;
}

.fa:hover {
    border: 1px solid #dadada;
}

.fa {
    cursor: pointer;
    padding: 2px;
    border-radius: 2px;
    border: 1px solid transparent;
}

.editable {
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 2px;
}

.editable::after {
    content: '';
}

.editable .fa {
    visibility: hidden;
}

.editable:hover .fa {
    visibility: visible;
}

.editable:hover {
    border: 1px solid #ccc;
}

JavaScript

//$('.editable').append(' <i class="fa fa-pencil"></i>');

$('.expandable').append(' <i class="expander fa fa-plus"></i>');

$('.expander').click(function () {
    $(this).parent().children('.compact, .expanded').toggle();
});

$('.toggler').click(function () {
    $('.toggly').toggle();
});

$('.favorite').click(function () {
    $(this).toggleClass('fa-star fa-star-o');
});