JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imain"> 
   <div id="info123" class="ibox bgblue"> <p> kurzer Text 333 </p> </div> 
   <div id="info124" class="ibox bgred"> <p> kurzer Text 444 </p> </div> 
   <div id="info125" class="ibox bgreen"> <p> kurzer Text 555 </p> </div> 
   <div id="info126" class="ibox bgblue"> <p> kurzer Text 666 </p> </div> 
   <div id="info127" class="ibox bgred"> <p> kurzer Text 777 </p> </div> 
   <div id="info128" class="ibox bgreen"> <p> kurzer Text 888 </p> </div>
   ... usw ... 
</div>

CSS

#imain { margin:0 auto; width:190px; text-align:center; background:#CCC; } 
.ibox { margin:0 auto; width:170px; text-align:left; } 
.ibox p { margin:4px; padding:2px; } 

.bgblue  { background:#66AAFF; }
.bgred   { background:#FF66AA; }
.bgreen  { background:#66FFAA; }

JavaScript

$(document).ready(function(){ 

    $( ".ibox" ).click(function() { 
        var id = this.id; 
        $("#" + id).css( "color", "red" ); 
        $("#" + id).fadeOut("slow"); 
    });
    
});