JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<ul class="grid-list">
  <li class="li">One</li>
  <li class="li">Two</li>
  <li class="li">Three</li>
  <li class="li">Four</li>
  <li class="li">Five</li>
  <li class="li">Six</li>
  <li class="li">Seven</li>
  <li class="li">Eight</li>
  <li class="li">Nine</li>
  <li class="li">Ten</li>
  </ul>

CSS

* {
  box-sizing: border-box;
}
  .li {
    display: inline-block;
    width: 25%;
    height: 100px;
    line-height: 100px;
    border: 1px solid;
    margin: 0 1% 10px 0;
    text-align: center;
    position: relative;   
    cursor: pointer;
    &:hover {
      background-color: #eee;
    }
    .li:active {
        background-color: #eee;
        &:after {
          content: '';
          height: 0;
          width: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid #000;
          position: absolute;
          bottom: -10px;
          left: 50%;
          margin-left: -5px;
        }
      }
    }
  .cloned-expand{
      display: block;
      float: left;
      min-height: 80px;
      width: 97%;
      margin: 0 0 10px;
      padding: 10px 30px;
      -webkit-animation: fadeinLoad .5s forwards;
      -moz-animation: fadeinLoad .5s forwards;
      animation: fadeinLoad .5s forwards;
      &-close {
        position: absolute;
        right: -1px;
        top: -1px;
        height: 20px;
        width: 20px;
        line-height: 20px;
        border: 1px solid;
        text-align: center;        
        cursor: pointer;
    }
  }
}
@-webkit-keyframes fadeinLoad {
    from { opacity: 0;}
    to { opacity: 1; }
}
@-moz-keyframes fadeinLoad {
    from { opacity: 0; -moz-transform: translate(0, -20px); }
    to { opacity: 1; -moz-transform: translate(0, 0); }
}
@keyframes fadeinLoad {
    from { opacity: 0; transform: translate(0, -20px); }
    to { opacity: 1; transform: translate(0, 0); }
}

JavaScript

$(".grid-list .li").click(function() {
      var li = $(this);

      if ($(this).hasClass("active")) {
        $(".grid-list .li.cloned-expand").remove();
        $(".grid-list .li").removeClass("active");
      } else {
        $(".grid-list .li.cloned-expand").remove();
        $(".grid-list .li").removeClass("active");
        var cloned = li.clone().addClass("cloned-expand").append("<span class='cloned-expand-close'>X</span>");
        li.addClass("active").after(cloned);
        $('html, body').animate({
          scrollTop: $(this).offset().top
        }, 400);
      }
    });

    $(document).on("click", ".cloned-expand-close", function() {
      $(".grid-list .li.cloned-expand").remove();
      $(".grid-list .li").removeClass("active");
    });