JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <!-- list here -->
</div>

<script type="text/templatedom" id="template-profile">
    <div class="profile" profileid="@{profileid}">
        <div class="profile-photo">
            <img src="@{photo}" alt="" width="160" height="160">
        </div>
        <div class="profile-info">
            <div class="profile-row">
                <span>First name:</span>
                <span>@{firstname}</span>
            </div>
            <div class="profile-row">
                <span>Last name:</span>
                <span>@{lastname}</span>
            </div>
            <div class="profile-row">
                <span>Gender:</span>
                <span>@{gender}</span>
            </div>
        </div>
    </div>
</script>

CSS

html {
    font: normal 16px/100% Arial,Helvetica,sans-serif;
    color: #666;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    list-style: none;
    outline: 0;
}

a {
    color: #000;
    text-decoration: underline;
}
a:hover { text-decoration: none; }

#box {
    max-width: 400px;
    min-width: 230px;
    padding: 0 25px;
    margin: 40px auto;
}

.profile {
    overflow: hidden;
    padding: 15px;
    margin-bottom: 20px;
    border: solid 1px #DDD;
    background-color: #EEE;
}
.profile:last-child, .profile-row:last-child {
    margin-bottom: 0;
}
.profile-photo, .profile-photo img {
    float: left;
}
.profile-photo {
    overflow: hidden;
    width: 40%;
}
.profile-photo img {
    width: 100%;
    height: auto;
}
.profile-info {
    float: right;
    width: 55%;
}
.profile-row {
    margin-bottom: 6px;
}
.profile-row span {
    display: block;
    margin-bottom: 1px;
}
.profile-row span:nth-child(1) {
    font-size: 0.7rem;
    color: #999;
}
.profile-row span:nth-child(2) {
    font-size: 1rem;
    color: #000;
}

.oneline {
    padding: 10px;
    margin-bottom: 5px;
    border: solid 1px #DDD;
    background-color: #EEE;
}

JavaScript

function xTemplateDOM (parms)
{
    // @param(string):          parms.template_selector
    // @param(string):          parms.template_string
    // @param(object/array):    parms.data

    var template_selector = parms['template_selector'] || '';
    var template_string = parms['template_string'] || '';
    var data = parms['data'] || [];
    var htm = '', tpl = '';

    data = (Array.isArray(data)) ? data : [data];

    if ( (template_string || template_selector) && (data.length > 0) )
    {
        if ( template_string )
        {
            tpl = String(template_string).trim();
        } else {
            tpl = String(document.querySelector(template_selector).innerHTML).trim();
        };

        tpl = tpl.replace(/(@\{)\s*(\S+)\s*(?=})/img,'$1$2');

        for (var i = 0, c = data.length; i < c; i++)
        {
            var row = data[i], str = tpl;

            for (var k in row)
            {
                var key = k, val = row[k];

                var rgx = new RegExp('@{' + key + '}','gi');
                str = str.replace(rgx,val);
            };

            htm += str + '\n';
        };
    };

    return htm;
};

var data_multirows = [
    {
        profileid: 4318,
        firstname: 'Anthony',
        lastname: 'Hopkins',
        gender: 'Male',
        photo:...