JSFiddle - React, Tailwind, and code Playground

HTML

<div id="large">
    <img src="http://placehold.it/400x400&amp;text=N1" alt="N1" />
</div>
<ul id="images">
    <li class="active">
        <img src="http://placehold.it/150x150&amp;text=1" alt="1" />
    </li>
    <li>
        <img src="http://placehold.it/150x150&amp;text=2" alt="2" />
    </li>
    <li>
        <img src="http://placehold.it/150x150&amp;text=3" alt="3" />
    </li>
</ul>

CSS

#images {
    list-style: none;
    margin: 0 0 0 420px;
}
#images li {
    float: left;
    margin: 0 1em 1em 0;
    padding: 1px;
    cursor: pointer;
}
#images img {
    display: unblock;
}
#large {
    float: left;
    width: 400px;
    padding: 0 10px 10px;
}
#images .active {
    border: 1px solid red;
    padding: 0;
}

JavaScript

(function(window, document) {
    // Nagykép
    var large = document.getElementById('large'),
        // Kisképek
        images = document.getElementById('images'),
        // Trim reguláris kifejezése
        trim = /^\s*([\S\s]*?)\s*$/,
        lis, i, li,
        // Alap eseménykezelés
        addEvent = document.addEventListener ?
        function(element, event, callback) {
            element.addEventListener(event, callback, false);
        } : document.attachEvent ?
        function(element, event, callback) {
            element.attachEvent('on' + event, callback);
        } : function(element, event, callback) {
            element['on' + event] = callback;
        }
        // A nagykép és a kisképek léteznek
        if (large && images) {
            large = large.getElementsByTagName('img')[0];

            // Végigmegyünk a kisképeken
            lis = images.getElementsByTagName('li');
            for (i = lis.length - 1; i >= 0; i -= 1) {
                li = lis[i];
                // Hozzáadjuk a click kezelését.
                addEvent(li, 'click', function() {
                    var i, li,
                    // Az aktuális kiskép
                    img = this.getElementsByTagName('img')[0];

                    // Megváltoztatjuk a nagykép 'src' és 'alt' tulajdonságát.
                    large.src = img.src.replace('150x150', '400x400').replace(/(&text=)(\d)[^&]*/, '$1N$2');
                    large.alt = 'N' + img.alt;
                    // Végigmegyünk az összes kisképen és eltávolitjuk az 'active' osztályt róluk.
                    for (i = lis.length - 1; i >= 0; i -= 1) {
                        li = lis[i];
                        li.className = (' ' + li.className + ' ').replace(' active ', ' ').replace(trim, '$1');
                    }
                    // Hozzáadjuk az 'active' osztályt az aktuális elemhez.
                    this.className = (this.className + ' active').replace(trim, '$1');
                    return...