JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<script src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>

CSS

.dataviewitem-cfg1 {
    padding: 10px;
    border-bottom: 1px solid #EEEEEE;
    position: relative;
    cursor: pointer;
}

.dataviewitem-cfg1.dataviewitem-hover {
    background-color: #E4EBEE;
}

.dataviewitem-cfg1 img.dataviewitem-img {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 10px;
}

.dataviewitem-cfg2 {
    padding: 10px;
    cursor: pointer;
    display: inline-block;
}

.dataviewitem-cfg2 img.dataviewitem-img {
    width: 48px;
    height: 48px;
}

.dataviewitem-cfg2.dataviewitem-hover {
    background-color: #008BFF;
}

JavaScript

Ext.onReady(function() {
    var tpl1, tpl2, actTpl, view;
    
    // Create template 1
    tpl1 = Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<div class="dataviewitem-cfg1" title="{country}">',
                '<span>{country}</span>',
                '<img class="dataviewitem-img" src="{flagsmall}" />',
            '</div>',
        '</tpl>'
    );
    
    // Create template 2
    tpl2 = Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<div class="dataviewitem-cfg2" title="{country}">',
                '<img class="dataviewitem-img" src="{flaglarge}" />',
            '</div>',
        '</tpl>'
    );
    
    actTpl = tpl1;
    
    // Create new dataview-class (extends dataview)
    Ext.define('Ext.ux.MultiDataView', {
        extend: 'Ext.view.View',
        alias: 'widget.multiview',
        
        setTemplate: function(template, itemSelector) {
            this.tpl = template;
            this.itemSelector = itemSelector;
            this.refresh();
        }
    });
    
    // Create model
    Ext.define('DataViewEntry', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'country',        type: 'string' },
            { name: 'flagsmall',    type: 'string' },
            { name: 'flaglarge',    type: 'string' }
        ]
    });
    
    // Create instance of the new dataview-class
    view = Ext.create('Ext.ux.MultiDataView', {
        store: Ext.create('Ext.data.Store', {
            model: 'DataViewEntry',
            data: [{
                    country: 'Austria',
                    flagsmall: 'http://www.senojflags.com/images/national-flag-icons/Austria-Flag.png',
                    flaglarge: 'http://www.senojflags.com/images/country-flag-icons/Austria-Flag.png'
                },{
                    country: 'USA',
                    flagsmall: 'http://www.senojflags.com/images/national-flag-icons/United-States-of-America-Flag.png',
                    flaglarge:...