JSFiddle - React, Tailwind, and code Playground
by davehol
HTML
<style>
.xm-grouped-table a:hover {
color: rgb(58, 58, 58);
opacity: 0.5;
text-decoration: underline;
}
.rmit-table__wrapper {
overflow-x:auto;
}
.Vocational, .Undergraduate, .Research, .Postgrad, .showAll{
font-family: Arial ;
background-color: rgb(255, 255, 255);
color: #333333;
outline: none;
border-bottom: 2px solid #E1E1E1;
display: block;
font-size: 16px;
margin: 0;
margin-bottom: -2px;
white-space: pre-wrap;
line-height: 16px;
padding: 7px 16px 15px 16px;
text-decoration: none !important;
float: left;
position: relative;
}
.Vocational:hover, .Undergraduate:hover, .Research:hover, .Postgrad:hover, .showAll:hover{
border-bottom: 2px solid #333333;
color: #333333;
}
.filterWrapper{
width: 100%;
border-bottom: 2px solid #E1E1E1;
float: left;
height:20 px;
margin-top:32px;
}
.red
{
border-bottom: 2px solid #E60028;
color: #333333 !important;
}
.rmitFooter__Wrapper{
padding-bottom:60px;
}
@media screen and (max-width: 750px){
.Vocational, .Undergraduate, .Postgrad, .Research, .showAll{
float: none;
background-color: transparent;
border-bottom: 1px solid #e1e1e1;
padding-top: 16px;
}
.red{
color: #000054 !important;
font-weight:bold;
}
.Vocational:hover, .Postgrad:hover, .Undergraduate:hover, .Research:hover, .showAll:hover{
border-bottom: 1px solid #e1e1e1;
}
.filterWrapper {
border:none;
}
}
</style>
<script>
var prog_list = (function() {
var prog_table = $(".xm-grouped-table");
var filterPos = $(".relatedprogramlist");
var init, setStyle, tabe_style, tbl, div1, div2, div3, rows, filterList, GetQueryStringParams, filterVal;
div1 = $("<div/>");
div2 = $("<div/>");
div3 = $("<div/>");
var filterBy = $('<div/>').append("<a class='showAll' href='#'>Show all</a><a class='Vocational' href='#'>Certificates and diplomas</a><a class='Undergraduate ' href='#'>Degrees</a><a class='Postgrad' href='#'>Postgraduate</a><a class='Research'...