JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<div id='container'></div>

<script type='text/ractive' id='tpl'>
    <table>
        {{#items:i}}
            <tr>
                <td class='remove' on-tap='remove:{{i}}'>remove</td>
                <td>{{name}}</td>
                <td>{{today}}</td>
                <td>{{monthly}}</td>
            </tr>
        {{/items}}
    </table>
</script>

CSS

body {
    font-family: 'Arial';
}

table {
    border-spacing: 0;
}

td {
    padding: 0.5em;
    border-bottom: 1px solid #eee;
}

.remove {
    color: rgb(200,0,0);
    font-size: 0.8em;
}

.remove:hover {
    background-color: rgb(200,0,0);
    color: white;
}
}

JavaScript

var items, ractive;

items = [
    { name: 'package one',   today: 39.98, monthly: 9.99 },
    { name: 'package two',   today: 39.98, monthly: 9.99 },
    { name: 'package three', today: 39.98, monthly: 9.99 },
    { name: 'package four',  today: 39.98, monthly: 9.99 },
    { name: 'package five',  today: 39.98, monthly: 9.99 },
    { name: 'package six',   today: 39.98, monthly: 9.99 },
    { name: 'package seven', today: 39.98, monthly: 9.99 },
    { name: 'package eight', today: 39.98, monthly: 9.99 }
];
     
ractive = new Ractive({
    el: 'container',
    template: '#tpl',
    data: { items: items }
});
    
ractive.on( 'remove', function ( event, index ) {
    items.splice( index, 1 );
});