JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <nav class='navbar'>
    <ul>
        <li class='left'>
            <label class='item text'>
              <span class='pw-bright-blue'>Patient</span>
              <span class='pw-purple'>Wisdom</span>
            </label>
            <div class='vertical-mid-hack'></div>
        </li>
        <li class='left'>
            <label class='item text'>
              My Stories
            </label>
            <div class='vertical-mid-hack'></div>
        </li>
        <li class='right'>
            <label class='item text'>
              Hi John
            </label>
            <div class='vertical-mid-hack'></div>
        </li>
    </ul>
  </nav>
<div ng-app='app' class='main-content'>
  <div class='section page' ng-controller='locationController as locCtl' id='location-page'>
    <!--<div class='content'>-->
      <div class='navbar-under-fill fixed'></div>
      <div class='select fixed'>
        <div class='content'>
        <h4>
          My Care Provider
        </h4>
        <p class='gen-pad-bot'>
          Communication with patients is a very important part of quality medical care. We would like to know how you feel about the way your care provider communicated with you. Your answers are ANONYMOUS and completely confidential, so please be as open and honest as you can. While participation is completely voluntary, we ask for your feedback to help our providers learn from patients. You may receive other surveys about your care -- they are important too.
        </p>
        <label class='title pw-pastel-dark-blue'>
          Please select a location:
        </label>

        <div class='drop-down-box'>
          <div class='selectors'>
            <div class='selected-box'>
              <div class='text'>
                Select
              </div><div class='vertical-mid-hack'></div>
            </div>
            <div class='selector-box'>
              <div...

SCSS

/* reset start */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html {
  height: 100%;
}
/* reset end */
body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: #464B4F;
  background-color: #f3f5f6;
  //background-color: #DCE0E6;
  height: 100%;
}

select {
  width: 100%;
}

.main-content {
  height: 100%;
  overflow: hidden;
}

.doc-summary {
  
  box-shadow: 0 0 8px -2px black;
  background-color: #FAFBFC;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
  position: relative;
  .back {
    padding: 10px 0 10px 0;
    text-align: left;
    .text {
      
      display: inline-block;
      color: #2f89d7;
      &:hover {
        cursor: pointer;
        color: #30538d;
      }
    }
  }
/*  
  .back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0 10px;
    z-index: 5;
   ...

JavaScript

angular.module('app', [])
.controller('locationController', locationController)
.controller('doctorController', doctorController)
.service('doctorService', doctorService)
.service('locationService', locationService);


locationController.$inject = ['doctorService', 'locationService'];
function locationController(doctorService, locationService) {
	var self = this;
  self.location = 'Select';
  self.setLocation = function(location, text) {
  	self.location = location;
    locationService.setLocation(text);
  };
  self.setDoctor = function(newDoc) { doctorService.setDoctor(newDoc); }
  self.options = [
  	{ id: 0, text: 'Select', value: 'select' },
    { id: 1, text: 'Germantown', value: 'germantown' },
    { id: 2, text: 'Jackson', value: 'jackson' },
    { id: 3, text: 'Moorland Reserve', value: 'moorland_reserve' },
    { id: 4, text: 'Springdale', value: 'springdale' },
    { id: 5, text: 'Sunnyslope', value: 'sunnyslope' },
  ];
  self.s3Url = 'https://s3.amazonaws.com/development.patientwisdom.com/public/img/froedtert_providers/';
  
  self.doctors = getDoctors();
}

doctorController.$inject = ['doctorService', 'locationService'];
function doctorController(doctorService, locationService) {
	var self = this;
    self.s3Url = 'https://s3.amazonaws.com/development.patientwisdom.com/public/img/froedtert_providers/';
  self.doctor = function() {
  	return doctorService.doctor;
  }
  self.location = function() {
  	return locationService.location;
  }
  self.matrix = getMatrix();
	
}

function doctorService() {
	var self = this;
  self.doctor = '';
  self.setDoctor = setDoctor;
  
  function setDoctor(newDoc) {
  	self.doctor = newDoc;
  }
}

function locationService() {
	var self = this;
  self.location = '';
  self.setLocation = setLocation;
  
  function setLocation(newLoc) {
  	self.location = newLoc;
  }
}


$(function() {
  $('body').on('click', function(event) {
      var dropDownBoxList = $(event.target).closest('.drop-down-box');
     ...