JSFiddle - React, Tailwind, and code Playground

by enyojs

CSS

.straddle > * {
    position: relative;
    z-index:1;
}

.overlay {
    position:absolute; 
    top:0; 
    left:50px;  
    width:100%; 
    height:100%; 
}

.overlay.over {
    z-index:2;
    background:rgba(255,255,255,0.5);
}

.overlay.under {
    z-index:0;
    background:rgba(0,0,0,0.2);
}

JavaScript

enyo.kind({
    name: "MySample",
    kind: "FittableRows",
    classes: "enyo-unselectable straddle",
    style: "background:lightgray; position:relative;",
    handlers: {
        ondrag: "drag"
    },
    components: [
        {kind: "onyx.Toolbar", content: "Your sample here"},
        {allowHtml:true, content:"Foo bar funday sunday.<br>Lorem ipsum dolor sit amet.<br>Foo bar funday sunday.<br>Lorem ipsum dolor sit amet.<br>Foo bar funday sunday.<br>Lorem ipsum dolor sit amet.<br>"},

        {name:"over", classes:"overlay over"},
        {name:"under", classes:"overlay under"}
    ],
    drag:function(inSender, inEvent) {
        var x = inEvent.clientX;
        this.$.over.setBounds({left:x});
        this.$.under.setBounds({left:x});
    }
});

new MySample({fit:true}).write();