JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<title>Name of Website</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="assets/css/style.css">
	<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
	<!-- <link rel="icon" type="image/png" href="assets/img/favicon.ico"> -->
</head>
<body>
	<nav class="vertical">
		<div class="rectangle">
			<a href="#Adonis" id="pet-one"><p class="nameNav first active">Adonis</p></a>
			<a href="#Billy" id="pet-two"><p class="nameNav second">Billy</p></a>
			<a href="#Comet" id="pet-three"><p class="nameNav third">Comet</p></a>
			<a href="#Dexter" id="pet-four"><p class="nameNav fourth">Dexter</p></a>
			<a href="#Evan" id="pet-five"><p class="nameNav fifth">Evan</p></a>
			<a href="#Fritz" id="pet-six"><p class="nameNav sixth">Fritz</p></a>
			<a href="#Grommit" id="pet-seven"><p class="nameNav seventh">Grommit</p></a>
		</div><!-- /.rectangle -->
	</nav>

	<main>
		<div id="pets-list"></div>
	</main>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
	<script src="assets/js/scripts.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

		<!-- This is where the template for pets goes -->
		<script id="pets" type="text/x-handlebars-template">
			<div class="container">
				<div class="pet">
					<p class="nameTitle" id="{{name}}">{{name}}</p>
					<img src="{{image}}" alt="">
					<p class="breed">{{breed}}</p>
					<p class="description">{{description}}</p>
					<p class="cost">{{cost}}</p>
					<hr>
				</div><!-- /.pet -->
			</div><!--...

CSS

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap;word-wrap:break-word}q{quotes:\201C \201D \2018 \2019}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:0.35em 0.625em 0.75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body,figure{margin:0}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}* html .clearfix{zoom:1}*:first-child+html...

JavaScript

$(function(){
	  /*-------------------------------------
	  TABLETOP.JS
	  --------------------------------------*/
	  var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1TOIGfwdi1GhV7BMhc5fH481icHi7zEEyXZZx3Y5J61I/pubhtml";

	  $(document).ready( function() {
	  	Tabletop.init( { key: public_spreadsheet_url,
	  		callback: showInfo,
	  		parseNumbers: true } );
	  });
	  function showInfo(data, tabletop) {
	  	var source   = $("#pets").html();
	  	var template = Handlebars.compile(source);

	    // The actual name of the sheet, not entire .csv
	    $.each(tabletop.sheets("Pets").all(), function(i, fact) {
	    	var html = template(fact);

	      // You need an element with this id or class in your HTML
	      $("#pets-list").append(html);
	      $('.container').eq(i).addClass(data.Pets.elements[i]);
	      // console.log(data.Pets.elements[i].name);

	      	// Deals with the left menu
	      	$(".nameNav").click(function(){
	      	   $(".nameNav").removeClass("active");
	      	   $(this).toggleClass("active");
	      	});

	      	/* -------------------------------------
	      	NAVIGATION
	      	--------------------------------------*/

	      	$(window).scroll(function(){
	      		var $pets = $('.pet').map(function(_, i){
	      		    return $(i).offset().top;
	      		});

	      		var scroll = $(window).scrollTop();
	              var index = $pets.filter(function(i, v){ if(v < scroll) return i; }).length;
	              $(".nameNav").removeClass("active");
	              $(".nameNav").eq(index).addClass("active");

	              var navElements = $(".nameNav"); navElements.eq(index % navElements.length).addClass("active");

	              if (index >= 7 && index <= 13) {
	                 $(".first").html(data.Pets.elements[7].name);
	                 $("#pet-one").attr("href", "#" + data.Pets.elements[7].name);

	                 $(".second").html(data.Pets.elements[8].name);
	                 $("#pet-two").attr("href", "#" +...