JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

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

CSS

html,body {
  margin: 0;
  background: #e6f6d6;
}
#root {
  margin: 10px
}

.wifi-item {
  padding: 10px;
  background: #8bc34a;
  border-bottom: 1px solid #e6f6d6;
}

.wifi-item:hover {
  background: #cddc39;
}

.lock {
  display: inline-block;
  float: right;
}


input {
      border: 1px solid #b3a0a0;
    padding: 6px;
    border-radius: 4px;
}

button {
    background: #03A9F4;
    border: none;
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    margin: 5px;
}

Babel + JSX

/* @jsx Kek.d */
function K(){}K.n={},K.r=[],K.d=function(n,e){return{n:n,p:e,c:K.r.slice.call(arguments,2)}},K.redraw=function(n,e,r){K.r=[],K.a(n,e,r);var o=Object.keys(K.n);o.length!==K.r&&o.forEach(function(n){-1===K.r.indexOf(n)&&(K.n[n].remove(),delete K.n[n])})},K.e=function(n,e,r){e instanceof Array&&e.forEach(function(e,o){K.a(n,e,r+(!e.p||e.p.id)+o+".")})},K.a=function(n,e,r){K.e(n,e,r),K.node||(K.node=n,K.root=e),n=n||K.node,e=e||K.root,r=r||"0.";var o=e.n,t=e.p,c=e.c;if("boolean"!=typeof e){if(K.r.push(r),"function"==typeof o)return K.a(n,new o(t,c).render(),r);if("string"==typeof e)return n.innerText=e;var a=K.n[r]||document.createElement(o);t&&Object.keys(t).forEach(function(n){a[n]!==t[n]&&(a[n]=t[n])}),n.appendChild(K.n[r]=a),K.e(a,c,r)}},K.append=K.a;var Kek=K;


const state = {
    page: 0,
    wifi: null,
    devicePass: '',
    wifiPass: '',
    wifiList: [
    		{
        	name: 'no passw',
          isOpen: true
        },
        {
        	name: 'passw',
          isOpen: false
        }
    ]
};

const actions = {
		back() {
    		state.page--;
    		Kek.redraw();
    },
    next() {
    		state.page++;
    		Kek.redraw();
    },
    wifiPageLeave() {
    		if (!state.wifiPass) return void alert('Wifi pass is empty');
        
    		state.page++;
    		Kek.redraw();
    },
    selectWifi(wifi) {
        state.page = wifi.isOpen ? 2 : 1;
        state.wifi = wifi;
        Kek.redraw();
    }
};

const renderWifi = function(wifi) {
	return (
  		<div className="wifi-item" onclick={actions.selectWifi.bind(this, wifi)}>
          {wifi.name}
          {wifi.isOpen || <div className="lock">#</div>}
      </div>
  )
}

const wifiPage = function() {
		return (
      <div id="p1">
        <h4 className="header">Select wifi</h4>
        {state.wifiList.map(renderWifi)}
      </div>
    );
}

const onChange = function(name, e) {
		state[name] = e.target.value;
}

const wifiConnectPage = function() {
		return (
      <div id="p2">
        <h4...