JSFiddle - React, Tailwind, and code Playground

by BHolm

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Load Handlebars.js from Unpkg. -->
<script src="https://unpkg.com/[email protected]/dist/handlebars.min.js"></script>

<!-- Load jQuery and Sheetrock from Unpkg -->
<script src="https://unpkg.com/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sheetrock.min.js"></script>
<body>      
<div class="row">
  <div class="col-2">
  </div><article class="feed-mt">  
    <div id="hr" class="post-submitted-info">
    
        <script id="hr-template" type="text/x-handlebars-template">
          
                
        
      </div>
    </div>
   </div>
   <div class="col-10">
    <div class="feed-main-content custom-width">
      <div class="header">
        <h2>{{cells.src}}</h2>
      </div>
      <div class="content">
          <div class="field field-name-body field-type-text-with-summary field-label-hidden">
            <div class="field-items">
              <div class="field-item">
                <p>{{cells.src}}</p>
              </div>
            </div>
          </div>
        </div>
        </div>
      </script>
      <footer>
      </footer>
    </div>
   </article>
  </div>
</body>

CSS

/* Fonts families */
body.pff-7, .pff-7 input, .pff-7 select, .pff-7 textarea, .pff-7 blockquote, .pff-7 .ui-widget { font-family: 'Lato', Helvetica Neue, Arial, Sans-serif; }

/*Node type: Blog & Article - Submitted info*/

.feed-mt .post-submitted-info { float: left; font-weight: 700; text-align: center; line-height: 1; position: absolute; 
top:0; left: 0; }

.post-submitted-info { width: 55px; }

.feed-mt .submitted-date { margin: 10px 0 0 0; }

.front .feed-mt .submitted-date { margin-top: 12px; }

.feed-mt .post-submitted-info .year { padding-bottom: 8px }

.feed-mt .post-submitted-info .month, .feed-mt .post-submitted-info .year { border-right: 1px solid #c2c2c2; font-size: 14px; text-transform: uppercase; }

.feed-mt .post-submitted-info .day {  border-right: 1px solid #c2c2c2; font-size: 29px; font-weight: 900; padding-bottom: 2px; }

.feed-mt .feed-main-content.custom-width { margin-left: 75px; 
margin-top: -66px;
}

/*Taxonomy term reference*/

.field-item{
  border-bottom: 1px solid #acacac;
  font-weight: normal;
}

JavaScript

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1pCKsxB77m1oj5qa6oCVXQv-Nz3Hwwz7ugrVjSyK2Xkk/edit?gid=0#gid=0';

// Compile the Handlebars template for HR leaders.
var HRTemplate = Handlebars.compile($('#hr-template').html());

// Load top five HR leaders.
$('#hr').sheetrock({
  url: mySpreadsheet,
  query: "select A,B,C,D,E,F order by A desc",
  fetchSize: 5,
  rowTemplate: HRTemplate
});

// Compile the Handlebars template for HR leaders.
var HRTemplate2 = Handlebars.compile($('#hr-template2').html());

// Load top five HR leaders.
$('#hr2').sheetrock({
  url: mySpreadsheet,
  query: "select A,B,C,D,E,F order by A desc",
  fetchSize: 5,
  rowTemplate: HRTemplate2
});