JSFiddle - React, Tailwind, and code Playground

HTML

<div id='modal-host'></div>
<main></main>

<script id='modal' type='text/ractive'>
    <div id='modal'>
        
        {{#if ready}}
            <div class='content'>
                <button on-click='close()'>X</button>
                {{yield}}
            </div>
        {{/if}}
    </div>
</script>


<script id='person' type='text/ractive'>
    <li on-click='set("showModal", true)'>{{name}} with some text that will overflow
        {{#if ~/showModal}}
        <modal>
            This is {{name}}
            <input value='{{name}}'/>
        </modal>
        {{/if}}
    </li>
</script>

<script id='template' type='text/ractive'>
    <h3>Main Template</h3>
    
    <ul>
    {{#each people}}
        <person/>
    {{/each}}
    <ul>
        

</script>

CSS

#modal-host.active {
    position: fixed;
    top: 0; bottom: 0;
    right: 0; left: 0;
    background: rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content {
    position: relative;
    background: white;
    width: 200px;
    padding: 30px;
    align-self: center;
    margin:
        auto;
}

ul {
    list-style: none;
    margin: 0; padding: 0;
}

li {
    display: inline-block;
    overflow: hidden;
    height: 40px; width: 100px;
    background: lightsteelblue;
    border: 1px solid steelblue;
    margin: 3px;
    cursor: pointer;
}

button {
    position: absolute;
    top: 0; right: 0;
}

JavaScript

Ractive.components.modal = Ractive.extend({
    template: '#modal',
    data: { ready: false, },
    close: function(){
        this.set('ready', false).then(function(){
            this.host.classList.remove('active');
            this.fire('close');
        }.bind(this));
    },
    onteardown: function(){
        if(this.host){
            this.host.innerHTML = '';
            this.host = void 0;
        }
    },
    onrender: function(){
        var host = this.host = document.getElementById('modal-host');
        host.appendChild(this.nodes.modal);
        host.classList.add('active');
        this.set('ready', true);
    }
});

Ractive.components.person = Ractive.extend({
    template: '#person',
    oninit: function(){
        this.on('modal.close', function(){
            this.set('showModal', false);
        });
    }
});

var r = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        people: [ 
            { name: 'alice' },
            { name: 'bob' },
            { name: 'cathy' }
        ]
    }
});