JSFiddle - React, Tailwind, and code Playground

by Ritesh Pandey

HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul{
    width: 220px;
    height: 108px;
    padding: 0;
    overflow: hidden;
    max-height: 300px;
}
li{
  list-style-type: none;
  background-color: #ccc;
  height: 50px;
  width: 50px;
  display: inline-block;
  position: relative;
}
.bar{
  border: 1px solid #dd0017;
}

JavaScript

$( "li" ).click(function() {
    $("li").removeClass("bar");
    $( this ).addClass("bar");
});
$("li:nth-child(8)").click(function(){
    $("ul").css({'overflow-y': 'scroll'});
    $("ul").animate({
        height: '+300'
    });
});