JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="header">
    <img src="http://www.pureflex.com/images/logo.png" alt=""/>
    <h1>Pureflex Chemical Resistance Guide</h1>
    <p>This resource is intended as a guideline to be used with all available information to determine suitability of material selection. We suggest thorough research which should include known applications when determining material. The information contained herein is provided only as a guide for the use of Pureflex products. The information is based on technical data and testing that PureFlex believes to be reliable. It is intended for use by persons having technical skill, at their own discretion and risk. Pureflex makes no warranties, expressed or implied, and assumes no liability in connection with any use of this information.
</p><p>
Although recommended for thermoplastics, some services, specifically halogenated liquids/gases, are known to permeate through thermoplastic linings. </p>
</div>
<div class="grid legend">
    <div class="col-1-3">A = ??</div>
    <div class="col-1-3">A = ??</div>
    <div class="col-1-3">A = ??</div>
</div>

<section> <span class="chemName">Chemical X</span>

    <div class="chemStats grid">
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
        <div class="col-1-9 mobile-col-1-3"><span>Material Name XX:</span> A</div>
    </div>
    <div class="chemStats grid">
        <div class="col-1-9...

CSS

/*
  Simple Grid
  Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - dallasbass.com
*/
 *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0px;
    font-size:16px;
}
[class*='col-'] {
    float: left;
    padding-right: 20px;
    /* column-space */
}
.grid {
    width: 100%;
    /* max-width: 1140px; */
    min-width: 200px;
    margin: 0 auto;
    overflow: hidden;
}
.grid:after {
    content:"";
    display: table;
    clear: both;
}
.grid-pad {
    padding-top: 20px;
    padding-left: 20px;
    /* grid-space to left */
    padding-right: 0px;
    /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
    float: right;
}
/* Content Columns */
 .col-1-1 {
    width: 100%;
}
.col-2-3, .col-8-12 {
    width: 66.66%;
}
.col-1-2, .col-6-12 {
    width: 50%;
}
.col-1-3, .col-4-12 {
    width: 33.33%;
}
.col-1-4, .col-3-12 {
    width: 25%;
}
.col-1-5 {
    width: 20%;
}
.col-1-6, .col-2-12 {
    width: 16.667%;
}
.col-1-7 {
    width: 14.28%;
}
.col-1-8 {
    width: 12.5%;
}
.col-1-9 {
    width: 11.1%;
}
.col-1-10 {
    width: 10%;
}
.col-1-11 {
    width: 9.09%;
}
.col-1-12 {
    width: 8.33%
}
/* Layout Columns */
 .col-11-12 {
    width: 91.66%
}
.col-10-12 {
    width: 83.333%;
}
.col-9-12 {
    width: 75%;
}
.col-5-12 {
    width: 41.66%;
}
.col-7-12 {
    width: 58.33%
}
/* Pushing blocks */
 .push-2-3, .push-8-12 {
    margin-left: 66.66%;
}
.push-1-2, .push-6-12 {
    margin-left: 50%;
}
.push-1-3, .push-4-12 {
    margin-left: 33.33%;
}
.push-1-4, .push-3-12 {
    margin-left: 25%;
}
.push-1-5 {
    margin-left: 20%;
}
.push-1-6, .push-2-12 {
    margin-left: 16.667%;
}
.push-1-7 {
    margin-left: 14.28%;
}
.push-1-8 {
    margin-left: 12.5%;
}
.push-1-9 {
    margin-left: 11.1%;
}
.push-1-10 {
   ...

JavaScript

$('.chemStats').hide();

$('section').click(function () {
    var thisOff = $(this).offset();
    $(this).siblings().find('.chemStats').slideUp(500);
    $('.activeChem').removeClass('activeChem');
    $(this).addClass('activeChem');

    $(this).find('.chemStats').slideToggle(500);
    
    //alert($(this).offset().top);
   
    $("body,html").animate({scrollTop: thisOff.top}, 500 );
})