JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="currentStore"></ul>

CSS

ul { width: 100%; }
.item { float: left; display: inline-block; width: 20%; padding: .25em; background: #f2f2f2; margin: 3px; list-style: none; }
.item:hover { background: #ccc; color: blue; }

JavaScript

function html_template(index){
    return '<div class="flip-container" ontouchstart="this.classList.toggle(\'hover\');"> \
            <div class="flipper">  \
                <div class="front"> \
                    <span>'+index+'</span> \
                </div> \
                <div class="back"> \
                    <span>Buy</span> \
                </div> \
            </div> \
         </div>';
} 
var toAdd = document.createDocumentFragment();
for(var i=1; i < 101; i++){
   var newLi = document.createElement('li');
   newLi.id = 'Product'+i;
   newLi.className = 'item';
   newLi.innerHTML = html_template(i);
   toAdd.appendChild(newLi);
}

document.getElementById('currentStore').appendChild(toAdd);