JSFiddle - React, Tailwind, and code Playground

by callmepc

HTML

<div class="left-right-editor">
</div>

CSS

body
{
    font-size:13px;
    font-family:Sans-serif;
    padding:15px;
}
h3,h4,h5
{
    font-weight:bold;
}
small
{
    color:#777;    
}
.left-list li
{
    list-style:none;
    padding:5px;    
    border-bottom:solid 1px #eee;
    border-top:solid 1px transparent;
    cursor:pointer;    
    position:relative;
}
.left-list li:last-child
{
    border-bottom:none;
}
.left-list li:hover
{
    background:#fafafa;
}
.left-right-editor
{
    position:relative;
}
.right-container
{
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:50%;
    background:#eee;
    border-left:solid 1px #bbb;
    display:none;
}
.right-editor, .right-reader
{
    padding:20px;
    text-shadow:1px 1px 1px #fff;
}
.open-editor, .cancel-editor
{
    text-decoration:underline;
    cursor:pointer;
}
.indicator:before
{
    content:"";
    border-top:solid 11px transparent;
    border-bottom:solid 11px transparent;
    border-right:solid 11px #eee;
    position:absolute;
    top:50%;
    right:50%;
    margin-top:-11px;
    margin-right:-13px;
    z-index:9;
}
.indicator
{
    border-top:solid 10px transparent;
    border-bottom:solid 10px transparent;
    border-right:solid 10px #ccc;
    position:absolute;
    top:50%;
    right:50%;
    margin-top:-10px;
    margin-right:0px;
    z-index:10;
    display:none;
}

JavaScript

var lrdata = [{
    title: 'Apple Inc.',
    description: '1 Infinite Loop, Cupertino, California',
    readerHTML: '<h3>Apple Inc.</h3><a class="open-editor">Edit</a>',
    editorHTML: '<h3>Apple Inc.</h3><br/><input type="text" /><br/><br/><button>Save</button>|<a class="cancel-editor">Cancel</a>'
},
             {
    title: 'Google Mountain View',
    description: '1600 Amphiteatre Pkwy, Mountain View, California',
    readerHTML: '<h3>Google Mountain View</h3><a class="open-editor">Edit</a>',
    editorHTML: '<h3>Google Mountain View</h3><br/><input type="text" /><br/><br/><button>Save</button>|<a class="cancel-editor">Cancel</a>'
},
             {
    title: 'Facebook Inc.',
    description: 'Palo Alto, CAlifornia',
    readerHTML: '<h3>Facebook Inc.</h3><a class="open-editor">Edit</a>',
    editorHTML: '<h3>Facebook Inc.</h3><br/><input type="text" /><br/><br/><button>Save</button>|<a class="cancel-editor">Cancel</a>'
},
             {
    title: 'Twitter',
    description: '795 Folsom Street, San Francisco, CA',
    readerHTML: '<h3>Twitter</h3><a class="open-editor">Edit</a>',
    editorHTML: '<h3>Twitter</h3><br/><input type="text" /><br/><br/><button>Save</button>|<a class="cancel-editor">Cancel</a>'
}];

var liContent = '';
$.each(lrdata, function(index, value){
    liContent += '<li data-itemIndex="'+ index +'" class="left-list-item">'+ 
        '<h4>' + value.title + '</h4>' + 
        '<small>'+ value.description +'</small>'+        
        '<span class="indicator"></span></li>';
});

var ulContent = $('<ul class="left-list"></ul>').append(liContent);
$('.left-right-editor').append(ulContent).append(
    '<div class="right-container">'+
        '<div class="right-reader"></div>'+
        '<div class="right-editor"></div>'+
    '</div>');

$('.left-list-item').click(function(){
    var $this = $(this);    

    $('.indicator').hide();
    $this.find('.indicator').fadeIn();
    
    var activeIndex = $this.attr('data-itemIndex');
   ...