JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>

<div id='app'>   
  <div class="all-players-wrapper" v-filtered-list="filterValue">
    <button id="filter-qb" @click="() => filterValue='QB'">QB</button>
    <ul class="list">
    
      <li v-for="player in playerJSON">
        <div class="player-listing">
          <div class="player-left">
            <div class="player-name">{{player.firstName}} {{player.lastName}}</div>  
            <div class="player-position-wrapper">
              <div class="playerPosition">{{ player.Position }}</div> | 
              <div class="player-college">{{ player.College }}</div>
            </div>   
          </div><!-- end player-left -->
          <div class="player-right">
            <div class="player-grade">GRADE <span>{{player.NFLGrade}}</span></div>
          </div> <!--end player-right -->
        </div>
      </li>
      
    </ul>
  </div>
</div>

CSS

body {
  margin:0px;
}


ul.list {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
}

ul.list > li {
    width: 33%;
    list-style: none;
    margin: 0px;
    padding-left: 0px;
}


.player-listing {
    display: flex;
    width: 100%;
    align-items: center;
    min-height: 120px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
    -webkit-box-shadow: 0 0 7px #00000063;
    -moz-box-shadow: 0 0 7px #00000063;
    box-shadow: 0 0 7px #00000063;
    flex-wrap: no-wrap;
}

.player-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    font-family: 'ez-med';
  padding:10px;
}

.player-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  padding:10px;
}

.player-bottom {
    width: 100%;
    flex-basis: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:10px;
}

.player-position-wrapper {
  display: flex;
}


.player-body {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.player-name {
font-family: 'ez-bold';
}
.player-position {
    font-family: 'ez-bold';
    margin-right: 3px;
    font-size: 24px;
    line-height: 24px;
}

.player-college {
    font-family: 'ez-med';
    margin-left: 3px;
}

.player-grade {
    font-family: 'ez-bold';
    color: #b5b5b5;
    display: flex;
}


.player-grade span {
   color: #6d6d6d;
  font-size:24px;
  line-height:24px;
  margin-left: 3px;
}

.col-wrapper {
  font-family: 'ez-med';
  font-size:11px;
  margin-right: 6px;
  text-align: center;
}

.col-wrapper:last-of-type {
  margin-right: 0px;
}


#videoPlayer {
    background-color: rgba(0, 0, 0,...

JavaScript

var vm = new Vue({ 
  el: '#app',
  data: {
    status: 'Combine Particpants',
    playerJSON: [],
    filterValue: ''
  },
  created: function () {
    this.loadData();
   
  },
  methods: {
    loadData: function () {
     var self = this;      
     axios.get('https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/tiny.json').then(function (response) {
      
       self.playerJSON = response.data
       console.log(response.data);
      })
      .catch(function (error) {
        self.status = 'An error occurred - ' + error
      });
    }
  },
  directives: {
  	filteredList(el, binding) {
			console.log("Binding values", binding.value)
    	if (binding.value) {
        const options = {
          valueNames: [ 'playerPosition' ]
        };
        const featureList = new List(el, options);

				featureList.filter((item) => item.values().playerPosition === binding.value);
      }
   }
  }
});