JSFiddle - React, Tailwind, and code Playground

by arpecop

HTML

<html>
 
  <body>
 
    <div id="example1"></div>
    
 
    <h2>Query 3: Last 5 Twitter posts using hastag #Caturday, including images (if any)</h2>
    <div id="example3"></div>
    <h2>Query 4: Last 3 Twitter posts using hastag #API</h2>
    <div id="example4"></div>
     
  </body>
</html>

JavaScript

(function (root, factory) { if (typeof define === 'function' && define.amd) { define([], factory); } else if (typeof exports === 'object') { module.exports = factory(); } else { factory(); } }(this, () => {
  let domNode = ''; let maxTweets = 20; let parseLinks = true; const queue = []; let inProgress = false; let printTime = true; let printUser = true; let formatterFunction = null; let supportsClassName = true; let showRts = true; let customCallbackFunction = null; let showInteractionLinks = true; let showImages = false; let useEmoji = false; let targetBlank = true; const lang = 'en'; let permalinks = true; let dataOnly = false; let script = null; const scriptAdded = false; function handleTweets(tweets) {
    if (customCallbackFunction === null) {
      const x = tweets.length; let n = 0; const element = document.getElementById(domNode); let html = '<ul>'; while (n < x) { html += `<li>${tweets[n]}</li>`; n++; }
      html += '</ul>'; element.innerHTML = html;
    } else { customCallbackFunction(tweets); }
  }
  function strip(data) { return data.replace(/<b[^>]*>(.*?)<\/b>/gi, (a, s) => s).replace(/class="(?!(tco-hidden|tco-display|tco-ellipsis))+.*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi, ''); }
  function targetLinksToNewWindow(el) { const links = el.getElementsByTagName('a'); for (let i = links.length - 1; i >= 0; i--) { links[i].setAttribute('target', '_blank'); } }
  function getElementsByClassName(node, classname) {
    const a = []; const regex = new RegExp(`(^| )${classname}( |$)`); const elems = node.getElementsByTagName('*'); for (let i = 0, j = elems.length; i < j; i++) { if (regex.test(elems[i].className)) { a.push(elems[i]); } }
    return a;
  }
  function extractImageUrl(image_data) { if (image_data !== undefined && image_data.innerHTML.indexOf('data-srcset') >= 0) { const data_src = image_data.innerHTML.match(/data-srcset="([A-z0-9%_\.-]+)/i)[0]; return decodeURIComponent(data_src).split('"')[1]; } }
  var twitterFetcher = {
   ...