JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<div id="root"></div>

Babel + JSX

/** @jsx React */

function isStateLessComponent(element) {
    return !isClass(element) && typeof element === 'function'
  }
  
  function isClass(func) {
    return typeof func === 'function'
      && /^class\s/.test(Function.prototype.toString.call(func));
  }
  
  function shouldAddEventListener(property) {
    return /^on.*$/.test(property);
  }
  
(() => {
    let rootDOMElement, rootReactElement;
    const REACT_CLASS = 'REACT_CLASS';
  
    function anElement(element, props, children) {
      if (isClass(element)) {
        return handleClass(element, props, children);
      } else if (isStateLessComponent(element)) {
        return element(props);
      } else {
        return handleHtmlElement(element, props, children);
      }
    }
  
    function createElement(el, props, ...children) {
      return anElement(el, props, children);
    }
  
    function handleClass(clazz, props, children) {
      const reactElement = new clazz(props);
      reactElement.children = children;
      reactElement.type = REACT_CLASS;
      return reactElement;
    }
  
    function handleHtmlElement(element, props, children) {
      const anElement = document.createElement(element);
      children.forEach(child => appendChild(anElement, child));
      
      //_.forEach(props, (value, name) => appendProp(anElement, name, value));
      for (var p in props) {
        if( props.hasOwnProperty(p) ) {
          appendProp(anElement, p, props[p]);
        } 
      }
      return anElement;
    }
  
    function appendChild(element, child) {
      if (child.type === REACT_CLASS) {
        appendChild(element, child.render());
      } else if (Array.isArray(child)) {
        child.forEach(ch => appendChild(element, ch));
      } else if (typeof(child) === 'object') {
        element.appendChild(child);
      } else {
        element.innerHTML += child;
      }
    }
  
    function appendProp(element, propName, propVal) {
      if (shouldAddEventListener(propName)) {
       ...