JSFiddle - React, Tailwind, and code Playground

by neilbowers

HTML

<div class=entity>
    <div class=header>
        <input type=text value="This is the title" class=title>
            <a href="#" class=open>[open]</a>
    </div>
    <div class=body>
        <textarea class=description>This is the description</textarea>
    </div>
</div>

CSS

.header {
    background-color: #ccc;
}
.body {
    display: none;
    background-color: #eaeaea;
}
input.title {
    background-color: #ccc;
    border: solid 1px #ccc;
}
input:focus, textarea:focus {
    background-color: yellow;
}
a.open {
    float: right;
}
div.entity {
    margin: 2em;
}

JavaScript

$('a.open').on('click', function () {
    $('.body').toggle();
});

$('input.title').on('focus', function () {
    $(this).css('background-color', 'yellow');
});

$('input.title').on('blur', function () {
    if ($('.body').css('display') != 'none') {
        $(this).css({'background-color', 'white', 'border-color': 'black'});
    } else {
        $(this).css({'background-color', '#ccc', 'border-color': '#ccc'});
    }
});