JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<head>

</head>  
<body>

<!-- Top Menu -->
<div class="d-flex justify-content-around">  
    <a class="btn btn-text btnAll">All</a>  
    <a class="btn btn-text btnNineToFive">9-5</a> 
    <a class="btn btn-text btnFiveToNine">5-9</a>  
</div>

<!-- two column layout -->
<div class="row">
  <!-- col 1 -->
  <div class="col-xs-6 d-flex flex-column justify-content-center">
  
    <div class="all ntf bg-info">
        9-5
    </div>
    
    <div class="all ntf bg-info">
        9-5
    </div>
    
    <div class="all ftn bg-warning">
        5-9
    </div>
    
    <div class="all ntf bg-info">
        9-5
    </div>

  </div>
  
  <!-- col 2 -->
  <div class="col-xs-6 d-flex flex-column justify-content-center">
    <div class="all ftn bg-warning">
       5-9
    </div>
    
   <div class="all ntf bg-info">
        9-5
    </div>
    
    <div class="all ntf bg-info">
        9-5
    </div>
    
    <div class="all ftn bg-warning">
        5-9
    </div>
  </div>
</div>

</body>
</html>

JavaScript

$(document).ready(function(){

	$('.btnAll').on('click', function(){
  	$('.all').slideDown(500);
  });
  
  $('.btnNineToFive').on('click', function(){
  	$('.ftn').slideUp(500);
    $('.ntf').slideDown(500);
  });
  
  $('.btnFiveToNine').on('click', function(){
  	$('.ntf').slideUp(500);
    $('.ftn').slideDown(500);
  });

});