JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<h2>
Click "Run" to see the list randomize on load
</h2>


<div class="results">
  <ol data-bind="foreach: { data: docs } ">
    <li class="result" data-bind="component: { name: 'physicianreferral.docresult', params: { doc: $data } }">
      <div class="provider-result-item">
        <div class="provider-photo">
          <a data-bind="attr: { href: profileLink }" target="_parent" href="#/physicianreferral/profile/9492933">
            <img alt="Ginnie Abarbanell" src="//webapi.sironahealth.com/SironaHealth.WebAPI/v1/api/pr/doctors/9492933/photo?apikey=AFF6FC86-4E5E-4207-BE33-1BD829908383&amp;placeholderType=5" data-bind="attr: { src: imgSrc, alt: imgAlt, onError: imgOnError }" onerror="this.src='./Images/pr/missingdocf.jpg'">
          </a>
        </div>

        <div class="provider-info">

          <h4> <a data-bind="text: name, attr: { href: profileLink }" target="_parent" href="#/physicianreferral/profile/9492933">Ginnie Abarbanell, MD</a> </h4>

          <div class="provider-specialty"><span data-bind="html: specialty">Pediatric Cardiology<br></span></div>

          <div class="provider-location"><i class="fa fa-map-marker lightgray" aria-hidden="true"></i> <span data-bind="text: location">Sibley Heart Center Cardiology - Atlanta</span></div>

          <div class="address"><span data-bind="text: address">2835 Brandywine Road Suite 300 Atlanta, GA 30341</span><span data-bind="visible: mapUrl" style="display: none;"><a data-bind="attr: { href: mapUrl }" href="" target="_blank">Map</a></span></div>


          <div class="buttons"><a data-bind="attr: { href: profileLink }" class="common view-profile" target="_parent" href="#/physicianreferral/profile/9492933">View profile</a></div>

        </div>

        <div class="clearall"></div>

      </div>
    </li>








    <li class="result" data-bind="component: { name: 'physicianreferral.docresult', params: { doc: $data } }">
      <div class="provider-result-item">
        <div class="provider-photo">
   ...

CSS

body {
  font-family: arial;
  font-size: 12px;
  line-height: 1.4em;
}

h2 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

img {
  width: 50px;
}

h4 {
  margin: 0px;
}

.results ol li.result {
  margin-bottom: 40px;
}

JavaScript

$(document).ready(function() {
    // RANDOMLY SORT ANY COLLECTION OF GROUPED ELEMENTS
    (function($) {
      $.fn.shuffle = function() {
        var allElems = this.get(),
          getRandom = function(max) {
            return Math.floor(Math.random() * max);
          },
          shuffled = $.map(allElems, function() {
            var random = getRandom(allElems.length),
              randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
          });
        this.each(function(i) {
          $(this).replaceWith($(shuffled[i]));
        });
        return $(shuffled);
      };
    })(jQuery);
    // RANDOMLY SORT PROVIDER RESULTS
    $('.results ol li.result').shuffle();
  });