JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imain"> 
    <h2>Infos</h2> 
   <div id="info121" class="ibox bgred"> <p> kurzer Text 121 </p> </div> 
   <div id="info122" class="ibox bgreen"> <p> kurzer Text 122 </p> </div>
   <div id="info123" class="ibox bgblue"> <p> kurzer Text 123 </p> </div> 
   <div id="info124" class="ibox bgred"> <p> kurzer Text 124 </p> </div> 
   <div id="info125" class="ibox bgreen"> <p> kurzer Text 125 </p> </div> 
   <div id="info126" class="ibox bgblue"> <p> kurzer Text 126 </p> </div> 
   <div id="info127" class="ibox bgred"> <p> kurzer Text 127 </p> </div> 
   <div id="info128" class="ibox bgreen"> <p> kurzer Text 128 </p> </div>
   ... usw ... 
</div>

CSS

#imain { margin:0 auto; width:190px; text-align:center; background:#CCC; } 
#imain h2 { margin:2px; padding:2px; } 

.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(event) { 
        
        var id = event.currentTarget.id; 
        // var id = $(this).attr('id'); 
        
        // ---- alert( id ); 
        
        $("#" + id).css( "color", "red" );  // ---- Text-Farbe aendern 
        $("#" + id).fadeOut("slow");        // ---- Element ausblenden  

    });
});