JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<div class="wrapper mt-5 mb-5">
  <div class="bg-white p-5">

    <div class="row minimal" id="group-hospital-list"></div>

    <div class="clearfix"></div>

  </div>
</div>
</div>



<div style="display:none;">

  <!-- This is a clockwise mustache.js template. For more info goto https://mustache.github.io/ -->

  <script id="map_wait_window" type="text/template">

    <div class="map-window-wait grow" id="hospital-window-{{id}}">
		<div class="inner">

			<div class="title">{{{city}}}</div>

			<div class="current-wait"><i class="material-icons">access_time</i> <span class="time blinking">{{{current_wait}}}</span> wait</div>

		</div>
	</div>

</script>

  <script id="map_full_hospital" type="text/template">

    <div class="map-window-full" id="hospital-window-{{id}}">

		<div class="title">{{{hospital_name}}}</div>
		<div class="wait-times">
			<div class="item patients-in-line">
						<i class="material-icons">people</i> Currently <span>{{{current_queue_length}}}</span> are in line.
			</div>

			<div class="item current-wait">
				<i class="material-icons">access_time</i> Expect a <span class="time">{{{current_wait}}}</span> <span class="wait-label">minute wait.</span>
			</div>
		</div>

		{{#drive_time}}
		<div class="drive-time">
			<i class="material-icons">drive_eta</i>
			<a target="_blank" href="https://www.google.com/maps?saddr={{{starting_address}}}&daddr={{{address_1}}}+{{{city}}}+{{{state}}}+{{{zip}}}">Drive Time: {{{drive_time_amount}}} Min</a>

		</div>
		{{/drive_time}} {{^drive_time}}
		<div class="drive-time">
			<i class="material-icons">drive_eta</i>
			<a target="_blank" href="https://www.google.com/maps?saddr=My%20Location&daddr={{{address_1}}}+{{{city}}}+{{{state}}}+{{{zip}}}">Get Directions</a>
		</div>
		{{/drive_time}}

		<div class="location-details">
			<div class="address">{{{address_1}}}<br/>{{{city}}}, {{{state}}} {{{zip}}}</div>
			<div class="phone">{{{phone_number}}}</div>
		</div>

		{{#schedule_button}}
		<div...

JavaScript

<
div class = "col-12 col-lg-4 item"
id = "list-hospital-{{id}}" >

  <
  div class = "inner" >
  <
  div class = "title" >
  <
  a class = "map-tooltip"
onclick = "focusMap({{id}})"
target = "_blank"
title = "" > {
    {
      {
        city
      }
    }
  } <
  /a>


  <
  /div> <
  div class = "wait-times" >

  <
  div class = "current-wait" >
  <
  i class = "material-icons" > access_time < /i> <span class="time blinking">{{{current_wait}}}</span >
  <
  /div>




  <
  div class = "patients-in-line" > < span > {
    {
      {
        current_queue_length
      }
    }
  } < /span> in line</div >

  <
  /div>


{
  {
    #drive_time
  }
} <
div class = "drive-time" >


  <
  a target = "_blank"
href = "https://www.google.com/maps?saddr={{{starting_address}}}&daddr={{{address_1}}}+{{{city}}}+{{{state}}}+{{{zip}}}" > Drive Time: {
  {
    {
      drive_time_amount
    }
  }
}
Min < /a>

  <
  /div> {
    {
      /drive_time}} {{^drive_time}} <
      div class = "drive-time" >

        <
        a target = "_blank"
      href = "https://www.google.com/maps?saddr=My%20Location&daddr={{{address_1}}}+{{{city}}}+{{{state}}}+{{{zip}}}" > Get Directions < /a> <
        /div> {
          {
            /drive_time}}

            <
            div class = "location-details" >


              <
              div class = "get-directions" > < a class = "map-tooltip"
            onclick = "focusMap({{id}})"
            target = "_blank"
            title = "" > View on Map < /a>

              <
              /div> <
              div class = "phone" > {
                {
                  {
                    phone_number
                  }
                }
              } < /div> <
              /div> <
              div class = "schedule-button" > < a class = "btn btn-orange btn-lg px-5"
            href = "/appointments/create/?hospital={{id}}"
            target = "_blank" > Save My Spot! < /a> <
              /div> <
              /div> <
              /div>