JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<table>
    <tr>
        <td class="first-cell">
            <textarea></textarea>
        </td>
        <td class="second-cell">
            <textarea></textarea>
        </td>
    </tr>
    <tr>
        <td class="third-cell">
            <textarea></textarea>
        </td>
        <td class="fourth-cell">
            <textarea></textarea>
        </td>
    </tr>            
</table>

CSS

html, body, table{
    width:100%;
    height:100%;
}
table td{
    width:50%;
    height:50%;
}
table textarea{
    width:100%;
    height:100%;
    border:none;
    outline:1px solid #eee;
    resize:none;
}
table textarea:focus{
    outline: none;
    background:#fefefe;
    }

JavaScript

var Quad = {
    toggle: function(className) {
        console.log(className);
        switch (className) {
        case 'first-cell':
            $('.first-cell').css({
                width: '75%',
                height: '75%'
            });
            break;
        case 'second-cell':
            $('.first-cell').css({
                width: '25%',
                height: '75%'
            });
            break;
        case 'third-cell':
            $('.first-cell').css({
                width: '75%',
                height: '25%'
            });
            break;
        case 'fourth-cell':
            $('.first-cell').css({
                width: '25%',
                height: '25%'
            });
            break;
        }
        $('body').on('click', function() {
            $('.first-cell').css({
                width: '50%',
                height: '50%'
            });
        });
    }
};

$('table').on('click', 'td', function(){
    Quad.toggle($(this).attr('class'));
});