JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<div class="wrap">
    <img...

CSS

body {
  margin: 0 auto;
  background: #695d7a;
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
}

a {
  color: #fff; ;
  background: #da727e;
  font-weight: bold;
  font-family: arial;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 35px;
  padding-right: 35px;
  border-radius: 6px;
  display: inline-block;
  text-decoration: none;
}


.wrap {
  width: 100%;
  position: absolute;
  top: 25%;}

h1 { font-size: 30px; }

.tea-maker { margin-top: 15px; }

#tea_maker {
  font-size: 100px;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

JavaScript

var Tea = (function () {
  'use strict';

  /**
   * INTERNAL VARS
   */

  var topics  = {};
  var exports = {};
  var options = {
    staff: [
      'Connor',
      'Jon',
      'Jerome',
      'Mark',
      'Marf',
      'Iain',
      'Jason',
      'Natalie',
      'Ollie'
    ],
    exec: '',
    target: ''
  };

  /**
   * INTERNAL API
   */

  var _execute = function (args) {
    options = _objMerge(options, args);

    var elem = document.querySelector(options.target);
    var index;
    var data;

    if (!elem)
      return;

    index = _randIndex(options.staff)
    data  = _getIndex(index, options.staff);

    _setData(elem, data);
  };

  var _type = function (item) {
    return Object.prototype.toString.call(item);
  };

  var _arrIndex = function (index, arr) {
    return arr[index];
  };

  var _objIndex = function (index, obj) {
    var i = 0;
    var item;

    for (item in obj)
      if (obj.hasOwnProperty(item))
        if (i < index)
          i++;
        else if (i === index)
          return obj[item];
  };

  var _objMerge = function (obj1, obj2) {
    for (var prop in obj2) {
      if (obj2.hasOwnProperty(prop)) {
        try {
          if (obj2[prop].constructor === Object)
            obj1[prop] = _objMerge(obj1[prop], obj2[prop]);
          else
            obj1[prop] = obj2[prop];
        } catch (e) {
          obj1[prop] = obj2[prop];
        }
      }
    }

    return obj1;
  };

  var _arrMerge = function (arr1, arr2) {
    return arr1.concat(arr2);
  };


  var _randIndex = function (collection) {
    var length = collection.length || 0;

    return Math.floor(Math.random() * length);
  };

  var _getIndex = function (index, collection) {
    index      = index      || 0;
    collection = collection || {};

    switch (_type(collection)) {
      case '[object Object]':
        return _objIndex(index, collection);
        break;
      case '[object Array]':
        return _arrIndex(index, collection);
        break;
     ...