JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="responsivegrid">

</div><div class="table rmit-table__nostyle aem-GridColumn aem-GridColumn--default--12">
  <div class="rmit-table__wrapper hidden-xs hidden-sm">
    <div class="cmp-text">
      <table width="100%" cellspacing="0" cellpadding="1" border="1">
        <tbody>
          <tr>
            <th scope="col">Col 1</th>
            <th scope="col">Col 2</th>
            <th scope="col">Col 3</th>
          </tr>
          <tr>
            <td>R1C1</td>
            <td>R1C2</td>
            <td>R1C3</td>
          </tr>
          <tr>
            <td>R2C1</td>
            <td>R2C2</td>
            <td>R2C3</td>
          </tr>
          <tr>
            <td>R3C1</td>
            <td>R3C2</td>
            <td>R3C3</td>
          </tr>
        </tbody>
      </table>

    </div>



  </div>

  <!-- mobile starts -->
  <div class="rmit-table__wrapper--mobi aem-Grid aem-Grid--phone--12 hidden-md hidden-lg">
    <div class="rmittable-mobi__leftchevron">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
            <g fill="none" fill-rule="evenodd">
                <path d="M0 0h32v40H0z"></path>
                <path fill="#333" fill-rule="nonzero" d="M20.889 12h-1.232L12 20.076 19.657 28h1.232l-7.716-7.924z"></path>
            </g>
        </svg>
    </div>

    <div class="rmittable-mobi__rightchevron">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
            <g fill="none" fill-rule="evenodd">
                <path d="M0 0h32v40H0z"></path>
                <path fill="#333" fill-rule="nonzero" d="M12 12h1.314l8.167 8.076L13.314 28H12l8.23-7.924z"></path>
            </g>
        </svg>
    </div>

    <div class="cmp-text">
      <table width="100%" cellspacing="0" cellpadding="1" border="1">
        <tbody>
          <tr>
            <th scope="col">Col 1</th>
            <th scope="col">Col...

CSS

.xm-grouped-table a:hover {
    color: rgb(58, 58, 58);
    opacity: 0.5;
    text-decoration: underline;
}

.rmit-table__wrapper {
  overflow-x:auto;
}
.Vocational, .Undergraduate, .showAll{
    font-family: Arial;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 84);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(0, 0, 84);
    border-image: initial;
    display: inline-block;
    font-size: 14px;
    margin-right: 8px;
    margin-bottom: 8px;
    white-space: pre-wrap;
    line-height: 16px;
    touch-action: unset;
    padding: 7px 32px 9px;
    border-radius: 16px;
    text-decoration:none !important;
}
.Vocational:hover, .Undergraduate:hover, .showAll:hover{
    background-color:#000054;
    color:#ffffff;
  text-decoration:underline !important;
}
.red
{
    background-color:#000054;
    color:#ffffff !important;
}

JavaScript

var prog_list = (function() {

  var prog_table = $(".xm-grouped-table");
  var init, setStyle, tabe_style, tbl, div1, div2, div3, rows, filterList, GetQueryStringParams, filterVal;

  div1 = div2 = div3 = $("<div></div>");

  var filterBy = $('<div/>').append("<a class='Vocational' href='#'>Certificates and diplomas</a>&nbsp<a class='Undergraduate ' href='#'>Degrees</a>&nbsp<a class='showAll' href='#'>Show all</a>").css({
    'margin-bottom': '15px',
  });

  setStyle = function(st) {
    table_style = st;
  }

  $('.responsivegrid').on('click', '.Undergraduate, .Vocational, .showAll', function() {
  
    filterList($(this).attr("class").split(' ')[0], $(this).parent().next("table"));
    $(this).parent().find('a.red').removeClass('red')
        $(this).addClass('red');
    return false;
  });

  init = function() {
   filterVal = GetQueryStringParams("filter");
    $.each(prog_table, function(index) {
      tbl = $(this);
      tbl.find("tr").unwrap();
      tbl.wrapInner("<tbody></tbody>");
      tbl.attr({
        width: "100%",
        cellspacing: "1",
        border: "1",
        cellpadding: "1"
      });
      tbl.find(".m-program-list-location a").contents().unwrap();
      div1.addClass("table rmit-table__" + table_style + " aem-GridColumn aem-GridColumn--default--12");
      div2.addClass("rmit-table__wrapper");
      div3.addClass("cmp-text");
      tbl.wrap(div1).wrap(div2).wrap(div3);
      tbl.removeClass("table");
      tbl.find(".m-program-list-title .visible-xxs").removeClass("visible-xxs").addClass("hide");
      tbl.find("caption").remove();
      tbl.find("th").eq(3).hide();
     tbl.find("tr").each(function(index) {
        if (index !== 0) {
          $row = $(this);
          $row.find("td").eq(4).find("a").eq(1).attr("href", $row.find("td").eq(1).find("a").attr("href")).text("Learn more");
          $row.find("td").eq(3).hide();
        }

      });
        if ((filterVal == 'Undergraduate') || (filterVal == 'Vocational')) {
         ...