JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>
          <div>&nbsp;</div>
          One-off payment:
          <hr> Monthly payment:
        </th>
        <th>
          <div>Simple</div>
          Free
          <hr> Free
        </th>
        <th>
          <div>Basic</div>
          € 12,50
          <hr> € 5,- p/m
        </th>
        <th>
          <div>Super</div>
          € 25,-
          <hr> € 10,- p/m
        </th>
        <th>
          <div>Perfect</div>
          € 50,-
          <hr> € 17,50 p/m
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Fully-featured Engine
          <div class="more-info">
            <span class="info">?</span>
            <div class="more-info-popup">
              <span class="popup-title">title</span>
              <p>
                text
              </p>
            </div>
          </div>
        </td>
        <td>
          <svg viewBox="0 0 150 150">
            <path d="M10,50 l25,40 l95,-70" />
          </svg>
        </td>
        <td>
          <svg viewBox="0 0 150 150">
            <path d="M10,50 l25,40 l95,-70" />
          </svg>
        </td>
        <td>
          <svg viewBox="0 0 150 150">
            <path d="M10,50 l25,40 l95,-70" />
          </svg>
        </td>
        <td>
          <svg viewBox="0 0 150 150">
            <path d="M10,50 l25,40 l95,-70" />
          </svg>
        </td>
      </tr>
      <tr>
        <td>Desktop Exports
          <div class="more-info">
            <span class="info">?</span>
            <div class="more-info-popup">
              <span class="popup-title">title</span>
              <p>
                text
              </p>
            </div>
          </div>
        </td>
        <td>&nbsp;</td>
        <td>
          <svg viewBox="0 0 150 150">
            <path d="M10,50 l25,40 l95,-70" />
          </svg>
        </td>
        <td>
          <svg viewBox="0 0 150 150">
            <path d="M10,50...

CSS

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  background-color: #fff;
  height: 100%;
  width: 100%;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: #444;
  padding: 15px;
  height: 100%;
  width: 100%;
  max-height: 100vh;
  min-width: 16.666667em;
  overflow-x: hidden;
  font-family: 'Helvetica', sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1.65em;
  transition: 1000ms opacity cubic-bezier(.4, 0, .2, 1);
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table thead th,
table tbody td {
  padding: 10px;
}

table thead th {
  vertical-align: top;
  white-space: nowrap;
  font-weight: 400;
}

table tbody td {
  border: 1px solid #dedede;
}

table tbody td:first-child {
  background-color: #eee;
  padding-right: 20px;
  border: 1px solid #ccc;
}

table tbody td:not(:first-child) {
  text-align: center;
}

table thead th:not(:first-child) {
  background-color: #F18A11;
  color: #fff;
  border: 1px solid #EF9834;
  border-top: 0;
}

table thead th div {
  margin-bottom: 10px;
  font-size: 1.25em;
  font-weight: 700;
}

table thead th hr {
  margin: 10px -10px;
  border: 0;
  border-top: 1px solid #EF9834;
}

table thead th:first-child hr {
  border-color: #dedede;
  margin: 10px 20px;
}

table svg {
  fill: none;
  height: 24px;
  width: 24px;
  stroke: #40a240;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  vertical-align: middle;
  -webkit-animation: check 1s cubic-bezier(.4, 0, .2, 1) forwards 300ms;
  -moz-animation: check 1s cubic-bezier(.4, 0, .2, 1) forwards 300ms;
  -o-animation: check 1s cubic-bezier(.4, 0, .2, 1) forwards 300ms;
  animation: check 1s cubic-bezier(.4, 0, .2,...

JavaScript

$(document).ready(function () {
  var target = '';
  $('table tbody td:not(:first-child) svg').each(function (index, el) {
    $(this).css('animation-delay', (300 + (75 * index)) + 'ms');
  });
  $(document).on('click touch', function (event) {
    target = $(event.target);
    if (target.hasClass('info')) {
      target = target.parent();
    }
    if (!target.hasClass('more-info') || !target.hasClass('open')) {
      $('.more-info').removeClass('open');
    }
    
    if($(".table-wrapper").hasClass("added_space")){    
    $(".table-wrapper").height( $(".table-wrapper").height()-75);
    $(".table-wrapper").removeClass("added_space");
    }
    // if the last one is clicked add space for the pop-up
    if(target.hasClass("last_one")){
    
    if($(".table-wrapper").hasClass("added_space")){    
    $(".table-wrapper").height( $(".table-wrapper").height()-75);
    $(".table-wrapper").removeClass("added_space");
    }
    if(!target.hasClass("open")){
         
    $(".table-wrapper").height( $(".table-wrapper").height()+75);
    $(".table-wrapper").addClass("added_space");
    }
    
    }
    if (target.hasClass('more-info')) {
    
      $('more-info.open').removeClass('open');
      if (target.hasClass('open')) {
          target.removeClass('open');        
      } else {
   
        target.toggleClass('open');
      }
    }
  });
});