JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<script src="http://fast.fonts.net/jsapi/a3c551cc-1db6-4292-a057-adb728401713.js"></script>
<div class="body-content">
      <div class="home-content container-fluid">
        <div class="container">
<div class="patient-box">
    <h2>Prescription Information</h2>
  <div class="content">
        <table class="table table-rx">
          
          <thead>
            <tr>
              <th></th>
              <th>Indication</th>
              <th>Medications</th>
              <th>Dose/Strength</th>
              <th>Directions</th>
              <th>Quantity</th>
              <th>Refills</th>
            </tr>
          </thead>
          
          <tbody>

            <tr data-indication="1">
              <td class="td-radio"><input type="radio" name="indication" /></td>
              <td class="td-indication">GT1b NON-cirrhotic</td>
                <td class="td-medication"><strong>VIEKIRA PAK</strong></td>
              <td class="td-dose">ombitasvir 12.5 mg, paritaprevir 75 mg, ritonavir 50 mg fixed-dose combination tablets copackaged with dasabuvir 250 mg tablets</td>
              <td class="td-directions">Take two pink-colored tablets po once daily (AM) and one beige-colored tablet po twice daily (AM and PM) with a meal</td>
              <td class="td-quantity">28-day supply</td>
              <td class="td-refills">2</td>
            </tr>

            <tr class="alt subrow" data-indication="2">
              <td class="td-radio" rowspan="2"><input type="radio" name="indication" /></td>
                <td class="td-indication" rowspan="2">GT1b NON-cirrhotic<br /> (OR) <br />GT1b Cirrhotic</td>
              <td class="td-medication"><strong>VIEKIRA PAK</strong></td>
              <td...

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  background-color: #F6F5F3;
    padding-top: 2em;
}

.container {
    width: 940px;
}

.patient-box {
    h2 {
          background: #00AFAA;
          line-height: 40px;
          font-size: 16px;
          margin: 0;
          color: #FFF;
          padding: 0 15px;
    }
}

.table-rx {
    font-size: 11px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.25);
    background: #FFF;
    
    tbody tr {
        background: #FFF;
    }
    
    td, th {
       min-width: 3em;
    }
    th{
        font-family:'Serifa W01 65 Bold', serif;
    }
    td{
        font-family:'FrutigerLTW01-55Roman', sans-serif;
        strong{
            font-family:'Frutiger LT W01 65 Bold', sans-serif;
        }
    }
    
    .center {
        text-align: center;
    }
  
    thead {
        background: #EEE;
    }
    input[type="text"] {
        border: 1px solid #CCC;
        background: #FFF;
        width: 4em;
        display: inline;
        margin: 0.125em 0;
    }

    tbody tr {
        border-bottom: 2px solid #CCC;
    }
    
    tbody td {
        border: 1px solid #CCC;
        color: #6c6c6c;
    }
    
    tbody .subrow {
        border-bottom: 1px solid #CCC;
    }
    tbody .last {
        border-bottom: none;
    }
    
    tbody tr td,
    thead tr th {
        text-align: center;
        vertical-align: middle;
        line-height: 1.25;
    }
    
    tbody tr.active {
        td {
            background: #F9F9F9;
            color: #222;
        }
        input {
            border: 2px solid #00AFAA;
        }
    }
    
    .td-radio {
        width: 4em;
        cursor: pointer;
    }
    .td-indication {
        width: 12em;
        border-right: 1px solid #CCC;
        cursor: pointer;
    }
    .td-medication {
    }
    .td-dose {
        font-size: 10px;
    }
    .td-directions {
        font-size: 10px;
    }
    .td-quantity {
   ...

JavaScript

$('head style[type="text/css"]').attr('type','text/less');
less.env = 'development';
less.refreshStyles();

$(function() {
    
    $('.td-radio, .td-radio input, .td-indication').on('click', function() {
        setActiveRow($(this).parents('tr'));
    });
    
    function setActiveRow(row) {
        $(row).parents('table').find('tr').removeClass('active');
        $(row).parent().children('[data-indication=' + $(row).attr('data-indication') + ']').addClass('active');
        $(row).parents('table').find('.td-radio input').prop('checked', false);
        $(row).find('.td-radio input').prop('checked', true);
    }
});