JSFiddle - React, Tailwind, and code Playground

by Marios

HTML

<div class="categories">
		<ul class="category" id="1"><li>Div 1</li></ul>
		<ul class="category" id="2"><li>Div 2</li></ul>
		<ul class="category" id="3"><li>Div 3</li></ul>
		<ul class="category" id="4"><li>Div 4</li></ul>
		<ul class="category" id="5"><li>Div 5</li></ul>
		<ul class="category" id="6"><li>Div 6</li></ul>
		<ul class="category" id="7"><li>Div 7</li></ul>
		<ul class="category" id="8"><li>Div 8</li></ul>
		<ul class="category" id="9"><li>Div 9</li></ul>
		<ul class="category" id="10"><li>Div 10</li></ul>
		<ul class="category" id="11"><li>Div 11</li></ul>
		<ul class="category" id="12"><li>Div 12</li></ul>
		<ul class="category" id="13"><li>Div 13</li></ul>
		<ul class="category" id="14"><li>Div 14</li></ul>
		<ul class="category" id="15"><li>Div 15</li></ul>
		<ul class="category" id="16"><li>Div 16</li></ul>
		<ul class="category" id="17"><li>Div 17</li></ul>
		<ul class="category" id="18"><li>Div 18</li></ul>
	</div>

CSS

.categories {
  width:500px;
  font-size: 12px;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -moz-column-gap: 7px;
  -webkit-column-gap: 7px;
  column-gap: 0px; 
  background:grey;}
.category {
  list-style: none;
  padding-left: 0;
  display: inline-block;
  width: 100%;
  min-height: 26px;
  border-left: 1px groove black;
  cursor: pointer;
  -webkit-column-break-inside: avoid;
  border-bottom: 2px groove #666;
  font-size: 13px;
  /* line-height: 26px; */
  border-right: 1px solid #000; 
  background:black;
  color:white;}

JavaScript

function gotoTop(element){
        	var destinationTop     = $('.categories').offset().top;
                var elementOffsetTop = $(element).offset().top;
                var distanceTop      = (elementOffsetTop - destinationTop);
        	return distanceTop;
        }
                    
        function gotoLeft(element){
                var destinationLeft     = $('.categories').offset().left;
                var elementOffsetLeft = $(element).offset().left;
                var distanceLeft      = (elementOffsetLeft - destinationLeft);
                return distanceLeft;
        }
$('.category').on('click', function(){
		$(this).css('position','relative');
		$(this).css('z-index','9999');
		$(this).siblings().css('z-index','10');
		$(this).animate({
                	top: '-' + gotoTop(this) +'px',
                        left: '-' + gotoLeft(this) +'px'
                        }, 2000
                );
	});