JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
    <li class="list-item" data-value="1"></li>
    <li class="list-item" data-value="2"></li>
    <li class="list-item" data-value="3"></li>
    <li class="list-item" data-value="4"></li>
    <li class="list-item" data-value="5"></li>
    <li class="list-item" data-value="6"></li>
</ul>

<input id="list-value" type="text">

CSS

.list {
    display: flex;
    flex-flow: row wrap;
    
    justify-content: space-between;
    
    max-width: 400px;
    
    margin: 0;
    padding: 0;
    
    list-style: none;
}

.list-item {
    width: 30%;
    
    margin-bottom: 20px;
    
    background: #444;
    
    cursor: pointer;
}

.list-item:after {
    content: '';
    
    display: block;
    padding-top: 100%;
}

.list-item.mf-selected {
    background: #C65959;
}

JavaScript

var list = document.querySelector('.list'),
    items = list.children,
    currItem,
    input = document.querySelector('#list-value');

list.addEventListener('click', function(e) {

    if (!e.target.classList.contains('list-item')) return false;
    
    if (currItem) currItem.classList.remove('mf-selected');    
    
    e.target.classList.add('mf-selected');
    
    currItem = e.target;    
    
    input.value = currItem.getAttribute('data-value');
    
}, false);