JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
	
	<div class="block">block</div>
	
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
</div>

CSS

* {
    box-sizing: border-box;
}

.items {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
}

.item {
    background: #ccc;
    max-width: 33.333%;
    width: 33.333%;
    border: 1px solid #999;
    padding: 15px;
    cursor: pointer;
}

.item:hover {
    background: #000;
    color: #fff;
}

.block {    
    background: #00f;
    padding: 15px;
    color: #fff;
	margin: 15px 0;
	width: 100%;
	max-width: 100%;
}

.active,
.active:hover {
    background: #00f;
    color: #fff;
    cursor: text;
}

JavaScript

(function() {

    $('.item').on('click', function() {
        $('.active').removeClass('active');
        $(this).addClass('active');
    });
	
	

})();