JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<div class="grid">
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>    
<div class="gridcell"></div>    
<div class="gridcell"></div>    
    <div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>    
<div class="gridcell"></div>    
<div class="gridcell"></div>  
    <div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>    
<div class="gridcell"></div>    
<div class="gridcell"></div>  <div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>    
<div class="gridcell"></div>    
<div class="gridcell"></div>  <div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>    
<div class="gridcell"></div>    
<div class="gridcell"></div>  <div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>    
<div class="gridcell"></div>    
<div class="gridcell"></div>  <div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>
<div class="gridcell"></div>    
<div class="gridcell"></div>    
<div class="gridcell"></div>  
</div>

CSS

.grid {
    width: 100%;
    text-align: center;
}

.gridcell {
    display: inline-block;
    float: left;
    min-height: 150px;
    width: 180px;
    padding: 15px;
    margin: 10px 10px;
    border: 1px solid #000;
    min-height: 180px; 
}

JavaScript

$(".gridcell").on("click",function(e){
	$(".gridcell").css("width","180px");
	$(e.target).css("width","100%");
});