JSFiddle - React, Tailwind, and code Playground

CSS

/* For sample only: Apply fixed 1080p body sizing/scaling */
body {
    overflow: visible !important;
    width: 1920px !important;
    height: 1080px !important;
    transform: scale3d(0.3, 0.3, 1);
    transform-origin: 0 0;
    -webkit-transform: scale3d(0.3, 0.3, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale3d(0.3, 0.3, 1);
    -moz-transform-origin: 0 0;
    -ms-transform: scale3d(0.3, 0.3, 1);
    -ms-transform-origin: 0 0;
    -o-transform: scale3d(0.3, 0.3, 1);
    -o-transform-origin: 0 0;
}

JavaScript

// +--------------------------------------+
// | Step 4. Create a panel for searching |
// +--------------------------------------+

// source/views.js ========================================================

var kind = require('enyo/kind'),
    Panels = require('moonstone/Panels');

var Panel = require('moonstone/Panel');

    var SearchPanel = kind({
        name: 'SearchPanel',
        kind: Panel,
        title: 'Search Flickr',
        titleBelow: 'Enter search term above',
        headerOptions: {inputMode: true, dismissOnEnter: true},
        handlers: {
            onInputHeaderChange: 'search'
        },
        search: function(sender, ev) {
            alert(ev.originator.get('value'));
        }
    });

var MainView = kind({
  name: 'MainView',
  classes: 'moon enyo-fit',
  components: [
    {kind: Panels, classes: 'enyo-fit', pattern: 'alwaysviewing', popOnBack: true, components: [
      {kind: SearchPanel}  // Use our new SearchPanel
    ]}
  ]
});


// source/app.js =========================================================


require('enyo/options').accessibility = true;

var
	ready = require('enyo/ready');

ready(function () {
	new MainView().renderInto(document.body);
});