JSFiddle - React, Tailwind, and code Playground

by shorif2000

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js" integrity="sha256-opK2YC6HciT8cYw3AkGXzte62YszfyubKWiOxrCDUKw=" crossorigin="anonymous"></script>

<div id="app">
</div>

CSS

.App {
    text-align: center;
}

.App-header {
    background-color: #222;
    height: 60px;
    padding: 5px;
    color: white;
}

.App-title {
    font-size: 1.5em;
}

Babel + JSX

/*** Markets.js ***/

// import React from 'react';
// import ReactTable from 'react-table'
let ReactTable = window.ReactTable.default
// import {getHttpRequestJSON} from './HTTP.js'
// import './react-table.css'

let dateStart = new Date();
let marketList = [];
let lastList = [];

class Markets extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            secondsElapsed: 0,
            marketData: [],
            lastList: lastList,
            heading: 'LOADING',
            pcnt: 0.1
        }
    }
    
    getBittrexMarkets = () => {
    	let self = this;
    	return new Promise(function(resolve, reject) {
      	let url = `https://cors-anywhere.herokuapp.com/https://bittrex.com/api/v1.1/public/getmarkets`;
        
        getHttpRequestJSON(url).then((response) => {
          response.result.map(function(market, index) {
						if(market.IsActive && (
							(market.MarketName === 'BTC-SC') 
							|| (market.MarketName === 'BTC-XRP')
							|| (market.MarketName === 'ETH-PAY')
							|| (market.MarketName === 'BTC-STRAT')
							|| (market.MarketName === 'BTC-LTC')
							|| (market.MarketName === 'ETH-ADX')
							|| (market.MarketName === 'BTC-QTUM')
							|| (market.MarketName === 'BTC-EMC2')
						)) {
							marketList.push(market);
						}
           });
        
       		return marketList;
        })
        .then((response) => {
       		// eslint-disable-next-line
       		response.map(function(name, index) {
							let key = name.MarketName;
							let obj = {};
							obj[key] = 0;
							lastList.push(obj);
       		});

       		self.getBittrexMarketData();
        })
        .catch(error => {
        	console.log("Failed!", error);
        });
    	});
    }

		getBittrexMarketData = () => {
    	let self = this;
			let marketDataList = [];
			let marketData = [];      
      
    	return new Promise(function(resolve, reject) {
				marketList.map(function(market, index)...