JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
</head>

<body>
  <!-- DIRTY Responsive pricing table HTML -->

  <article>

    <ul>
      <li class="bg-purple">
        <button>Self-Employed</button>
      </li>
      <li class="bg-blue">
        <button>Simple Start</button>
      </li>
      <li class="bg-blue active">
        <button>Essentials</button>
      </li>
      <li class="bg-blue">
        <button>Plus</button>
      </li>
    </ul>

    <table>
      <thead>
        <tr>
          <th class="hide"></th>
          <th class="bg-purple">Self-Employed</th>
          <th class="bg-blue">Simple Start</th>
          <th class="bg-blue default">Essentials</th>
          <th class="bg-blue">Plus</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Monthly price</td>
          <td><span class="txt-top">&pound;</span><span class="txt-l">6</span></td>
          <td><span class="txt-top">&pound;</span><span class="txt-l">7</span></td>
          <td class="default"><span class="txt-top">&pound;</span><span class="txt-l">15</span></td>
          <td><span class="txt-top">&pound;</span><span class="txt-l">25</span></td>
        </tr>
        <tr>
          <td colspan="5" class="sep">Get started easily</td>
        </tr>
        <tr>
          <td>Includes free updates and new features as they become available</td>
          <td><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
          <td class="default"><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
        </tr>
        <tr>
    ...

CSS

/* DIRTY Responsive pricing table CSS */

/* 
- make mobile switch sticky
*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 14px;
}

article {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  height: 1000px;
  position: relative;
}

ul {
  display: flex;
  position: sticky;
  top: 0px;
  z-index: 10;
  padding-bottom: 14px;
}

li {
  list-style: none;
  flex: 1;
}

li:last-child {
  border-right: 1px solid #DDD;
}

button {
  width: 100%;
  border: 1px solid #DDD;
  border-right: 0;
  border-top: 0;
  padding: 10px;
  background: #FFF;
  font-size: 14px;
  font-weight: bold;
  height: 60px;
  color: #999
}

li.active button {
  background: #F5F5F5;
  color: #000;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

th {
  background: #F5F5F5;
  display: none;
  position: relative;
}

td,
th {
  height: 53px
}

td,
th {
  border: 1px solid #DDD;
  padding: 10px;
  empty-cells: show;
}

td,
th {
  text-align: left;
}

td+td,
th+th {
  text-align: center;
  display: none;
}

td.default {
  display: table-cell;
}

.bg-purple::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #A32362
}

.bg-blue::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #0097CF;
}

.sep {
  background: #F5F5F5;
  font-weight: bold;
}

.txt-l {
  font-size: 28px;
  font-weight: bold;
}

.txt-top {
  position: relative;
  top: -9px;
  left: -2px;
}

.tick {
  font-size: 18px;
  color: #2CA01C;
}

.hide {
  border: 0;
  background: none;
}

@media (min-width: 640px) {
  ul {
    display: none;
  }

  td,
  th {
    display: table-cell !important;
  }

  td,
  th {
    width: 330px;

  }

  td+td,
  th+th {
    width: auto;
  }
}


thead th {
  position: sticky;
  top: 0;
}

tbody tr:first-child td {
 ...

JavaScript

// DIRTY Responsive pricing table JS

$( 'ul' ).on( 'click', 'li', function() {
  let pos = $(this).index()+2;
  $('tr').find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $('tr').find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});

// Initialize the media query
let mediaQuery = window.matchMedia('(min-width: 640px)');
  
// Add a listen event
mediaQuery.addListener(doSomething);
  
// Function to do something with the media query
function doSomething(mediaQuery) {    
  if (mediaQuery.matches) {
    $('.sep').attr('colspan',5);
  } else {
    $('.sep').attr('colspan',2);
  }
}
  
// On load
doSomething(mediaQuery);