JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<header>
  <h1>Responsive Service Levels Table</h1>
  <p>The challenge on this project was to craft a responsive comparison table in (almost) pure CSS that used check boxes in its full-width view, but an additive solution in responsive view. Shift the viewport to see what that means. The solution was to use DIV elements, then build the actual table code back up with the CSS and shift context as required</p>
</header>
  
<section class="datawrap">
  <div class="tcol labels">
    <div class="head">
      <div class="labeltop">
        <dl>
          <dt>&nbsp;</dt>
          <dd>&nbsp;</dd>
        </dl>
      </div>
    </div>
    <div class="tbody">
      <div class="trow">
        <div class="tcell">
          <dl class="clicky label">
            <dt>Dynamically Adjusted Water Schedules</dt>
            <dd>It adjusts dynamically. So dynamic.</dd>
          </dl>
        </div>
      </div>
      <div class="trow">
        <div class="tcell">
          <dl class="clicky label">
            <dt>Access and Control from Any Device</dt>
            <dd>I have authoritah.</dd>
          </dl>
        </div>
      </div>
      <div class="trow">
        <div class="tcell">
          <dl class="clicky label">
            <dt>Wireless Network Connectivity (3G)</dt>
            <dd>It sucks for video, but is great for water.</dd>
          </dl>
        </div>
      </div>
      <div class="trow">
        <div class="tcell lastlabel">
          <dl class="clicky label">
            <dt>Automatic Weather Based Adjustments</dt>
            <dd>We think AccuWeather is the best.</dd>
          </dl>
        </div>
      </div>
    </div>
  </div><!-- collapse space between inline tables
  --><div class="tcol mini-table">
    <div class="head">
      <div class="tcell">
        <dl>
          <dt>Basic</dt>
          <dd>$100</dd>
        </dl>
      </div>
    </div>
    <div class="tbody">
      <div class="trow">
        <div class="tcell">
          <dl class="clicky">
 ...

CSS

/**
* Basic responsive mixin
*/
/**
* Define a few site colors
* These are from an actual project I'm drafting for, use your own if you like
*/
/**
 * Begin table SCSS
 */
.datawrap {
  margin: 0 auto;
}
@media screen and (min-width: 1025px) {
  .datawrap {
    display: table;
  }
}
.datawrap .trow {
  display: table-row;
}
@media screen and (min-width: 1025px) {
  .datawrap .trow {
    border: 1px solid #fafafa;
  }
}
.datawrap .tcol {
  display: table;
  margin-bottom: 3rem;
}
@media screen and (min-width: 1025px) {
  .datawrap .tcol {
    display: inline-table;
    margin-bottom: 0;
  }
  .datawrap .tcol.labels {
    vertical-align: bottom;
  }
  .datawrap .tcol.labels .tcell {
    padding-right: 2rem;
    text-align: left;
    border-left: 5px solid #a7a7a7;
  }
  .datawrap .tcol.labels .lastlabel {
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .datawrap .tcol.mini-table {
    width: 120px;
  }
}
@media screen and (max-width: 1024px) {
  .datawrap .tcol.labels {
    display: none;
  }
  .datawrap .tcol.mini-table {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 320px;
  }
}
.datawrap .tcell {
  padding: 10px;
  text-align: center;
}
@media screen and (min-width: 1025px) {
  .datawrap .tcell {
    border-bottom: 1px solid #fafafa;
    border-right: 1px solid #fafafa;
  }
}
.datawrap .head {
  display: table-header-group;
}
.datawrap .head .tcell {
  padding: 0;
}
.datawrap .head dl {
  background: #006d9b;
  margin: 0;
  color: #fafafa;
}
.datawrap .head dl dt, .datawrap .head dl dd {
  margin: 0;
  padding: 10px;
}
.datawrap .head dl dt {
  font-size: 1.2rem;
  border-top: 5px solid #00425e;
}
.datawrap .head dl dd {
  font-size: 1.7rem;
  padding: .5rem 0;
  background: #1aa9cc;
}
@media screen and (min-width: 1025px) {
  .datawrap .head .labeltop {
    border-bottom: 1px solid #fafafa;
    border-right: 1px solid #fafafa;
  }
  .datawrap .head...

JavaScript

jQuery(function($) {
  $('.clicky').find('dt').click(function(){
    $(this).next().slideToggle();
  });
});