JSFiddle - React, Tailwind, and code Playground

CSS

br.clr-r {
    line-height: 3px !important; 
}


.pager-top {
	display: none !important;
    margin-top: 5px !important;
}

.pager ul {
    margin-top: 8px !important;
}

.pager ul li {
    background-color: white !important;
    background-image: none !important;
	padding: 4px 8px !important;
	display: inline-block !important;
	min-width: 20px !important;
	text-align: center;

}

.pager ul li a {
    text-decoration: none !important;
}

.pager ul li.curr {
    background: #e4e8fb !important;
    border: 1px solid #808080  !important;
    
}

div.ad, div#adwrapper-bs.ad.box, div#bb-leader, div#bb-bg {
	position: absolute !important;
	z-index: -11 !important;
	visibility: hidden !important;
}

div#body {
	width: 100% !important;
    background-color: #e4e8fb;
}

body {
	background-size: 200000px 2000px !important;
    background-color: #e4e8fb !important;
}


.head {
    border-bottom: none !important;
}

.footer {
    border-top:  none !important;
}

a.expcol span.ico {
	display: none;
}

#rozbal2 {
	cursor:pointer;
	opacity: 0.5;
    background-image: url("https://www.okoun.cz/css/yui-2.6.0/assets/skins/sam/sprite.png");
    background-repeat: no-repeat;
    background-position: 0 -349px;
    
    padding-left: 20px;
    margin-top:20px;
    margin-left:15px
}

#rozbal2:hover {
	opacity: 1;
}


.yui-u:not(.first) {
	border-radius: 5px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	padding: 4px;
}


#rozbal3 {
	display: none;
	background: aquamarine;
}

.main .ctx {
	border-radius: 5px !important;
   padding: 10px;
   background: aliceblue;
   width: 21% !important;
}

.room .item.new {
    border: 1px solid #80AAFF !important;
}

.welcome {
	display: none;
	/*
    height: 2px !important;
    overflow-y: hidden;
    */
}
.room .main {/*
    padding: 10px;
    margin: 10px;
    */
}


.main .main {
	border-radius: 5px !important;
    background-color: aliceblue;
    width: 75% !important;
    padding: 10px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px...

JavaScript

var $debilove = "NP,FAVORIT11,emzak,El_Diablo,gumatex,tigr_papirosowy,lolec6,Jaromir83"; // prispevky se nezobrazi az po kliknuti na nick
var $ultradebilove = "kakes,buchfa,ondrejdvorak,Smajdlaf,J_H"; // prispevky ani nick se vubec nezobrazi

var podbarvit = `[
	{"nick":"cestujicivnoci", "background_color":"beige"},
	{"nick":"někdo jiný", "background_color":"yellow"}	
]`;


var podbarvit2 = JSON.parse(podbarvit);

var $defaultFormat = "plain"; /* plain | html | radeox */

var $el = $(".main > .yui-g > .yui-u").first();

if ($el.length === 0) {
	$el = $(".main > .yui-gc > .yui-u").first();
}

$el.html("<p title='Naposledy načteno' id='xtime'></p><p><input placeholder='Hledej' id='srchinput'></p>");
$el.append("<h3>S novými <span id='pocetsnovymi'></span></h3><div id='novydiv'></div>");


$el_pager = $("div.pager").first();

$el_pager.detach().prependTo( ".list-and-pagers-wrapper");



$( "<div id='welcome2'></div>" ).insertAfter( $(".welcome"));

//$( ".welcome").hide();

//$('.bmk').first().insertBefore("h2");


$("[name='markWelcomeMsgBoardForm']").hide();

$("h2").append("<span id='rozbal2' title='Rozbal popis klubu'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>");



$( "#welcome2").html("<div id='rozbal3'>"+$( ".welcome" ).html()+"</div>");



var $prispevky = $("div.item");
var $neprecteny;
var $debilove_arr = $debilove.split(",");
var $ultradebilove_arr = $ultradebilove.split(",");


$prispevky.each(function() {
	
	var prispevek = $(this);
	
	if (jQuery.inArray(prispevek.find( "span.user").html(), $debilove_arr )!== -1) {
		$(this).addClass( "hiddenart" );
	}

	var username = prispevek.find( "span.user").html();
	if (jQuery.inArray(username, $ultradebilove_arr )!== -1) {
		$(this).hide();
	}

	if (prispevek.hasClass('new')) { 
		$neprecteny = prispevek;
	}


	$.each(podbarvit2, function(key,value) {
	
	
//		console.log (value.nick);
//		console.log (username);
		
		
		if (username == value.nick) {
		console.log (value.nick);
		console.log...