JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainWrap">

   <div class="row" id="row1"><div id="image1" class="blocksList div_1_1 yellowbg">Block 1</div><div class="rowSubPgm"><div id="block1" class="pgmFirstRow div_1_2 row2"></div><div id="block2" class="pgmFirstRow div_1_3 row3"></div></div></div><div class="clear"></div><div class="row" id="row2"><div id="image2" class="blocksList div_2_1">Block 2</div><div class="rowSubPgm"><div id="block3" class="pgmFirstRow div_2_2 row2"></div><div id="block4" class="pgmFirstRow div_2_3 row3"></div></div></div><div class="clear"></div><div class="row" id="row3"><div id="image3" class="blocksList div_3_1">Block 3</div><div class="rowSubPgm"><div id="block5" class="pgmFirstRow div_3_2 row2"></div><div id="block6" class="pgmFirstRow div_3_3 row3"></div></div></div><div class="clear"></div><div class="row" id="row4"><div id="image4" class="blocksList div_4_1">Block 4</div><div class="rowSubPgm"><div id="block7" class="pgmFirstRow div_4_2 row2"></div><div id="block8" class="pgmFirstRow div_4_3 row3"></div></div></div><div class="clear"></div><div class="row" id="row5"><div id="image5" class="blocksList div_5_1">Block 5</div><div class="rowSubPgm"><div id="block9" class="pgmFirstRow div_5_2 row2"></div><div id="block10" class="pgmFirstRow div_5_3 row3"></div></div></div><div class="clear"></div><div class="row" id="row6"><div id="image6" class="blocksList div_6_1">Block 6</div><div class="rowSubPgm"><div id="block11" class="pgmFirstRow div_6_2 row2"></div><div id="block12" class="pgmFirstRow div_6_3 row3"></div></div></div><div class="clear"></div><div class="row" id="row7"><div id="image7" class="blocksList div_7_1">Block 7</div><div class="rowSubPgm"><div id="block13" class="pgmFirstRow div_7_2 row2"></div><div id="block14" class="pgmFirstRow div_7_3 row3"></div></div></div><div class="clear"></div><div class="row" id="row8"><div id="image8" class="blocksList div_8_1">Block 8</div><div class="rowSubPgm"><div id="block15" class="pgmFirstRow div_8_2...

CSS

.yellowbg{background-color:#f9a600 !important;}

body {background:url('/images/blue_background_by_creativebluediamond.jpg') no-repeat center fixed #0d55a9; font-family:Arial;} 
.row{ height: 49px; overflow: hidden; width: 18632px; margin:0px}
.blocksList{ width:256px; float:left; border:1.5px solid #FFFFFF; height:38px; font-size:26px; color:#FFFFFF; font-weight:bold; margin-right:22px; padding-left:5px; padding-top:9px; position: relative; background-color:#01379b; z-index:10;}
.pgmFirstRow{ width:337px; float:left; border:1.5px solid #FFFFFF; height:38px; font-size:28px; color:#FFFFFF; font-weight:bold; margin-right:0px; padding-left:5px; padding-top:9px; line-height: 27px; overflow:hidden; background:#01379b;}
.clear{ clear:both;}
.mainWrap{ height:344px; overflow:hidden; margin-top:79px; width:1335px;}
.rowSubPgm{ width:3835px;}

JavaScript

var current_col = 1;
var current_row = 1;
var totalrowcount = 17;  //is using for how many blocks of rows I have in total 

$(document).ready(function() 
{
  $("div").show();
$(".div_"+current_col+'_'+current_row).addClass( "yellowbg" );
  getBlocks();
});

$(document).keyup(function(event)
{
  var yellowbg = $(".yellowbg");
  var rowwidth = $(".row").css( "width").split("px");

  var displayrowcount = 7;  //is using for to hide other blocks
  var rowheight = 49; //is using for to make measurement from row 1 to row 7 to hide the other blocks
  var totalwidth_current = 0;
  var totalwidth_current1 = 0;

  if(parseInt(current_row)+parseInt(1) <= 8)
  {
    for(var i=1; i<=(parseInt(current_row)+parseInt(1));i++ )
    {
      var yellowbgnextdivwidth = $(".div_"+current_col+'_'+i).css( "width"); 
      var yellowbgnextdivwidthsplit = yellowbgnextdivwidth.split("px");
      totalwidth_current=parseInt(totalwidth_current)+parseInt(yellowbgnextdivwidthsplit[0]);
    }
  }

  if (event.keyCode == 38) 
  {  //up
    if(current_col > 1 && current_row == 1)
    {
      var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");   
      var calcuatedrowtop = -(current_col*rowheight);
      currentrowtop = parseInt(currentrowtop)-rowheight;
      
      if((currentrowtop - calcuatedrowtop) < rowheight)
      {
	 currentrowtop = parseInt(currentrowtop)+rowheight;
	 currentrowtop = parseInt(currentrowtop)+rowheight;
	 var rowtop = currentrowtop+="px";
	 $(".mainWrap div.row:first-child").css( "margin-top", rowtop );			
      }
      current_col--;
    }
  }
  else if (event.keyCode == 40) 
  {    //down
    if(current_col < totalrowcount && current_row == 1)
    {
      if(current_col >= displayrowcount)
      {
        var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");
        currentrowtop = parseInt(currentrowtop)-rowheight;
        var rowtop = currentrowtop+="px";
        $(".mainWrap div.row:first-child").css( "margin-top", rowtop...