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 10: Connect the input, collection, and grid |
// +--------------------------------------------------+

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

var kind = require('enyo/kind'),
    Panels = require('moonstone/Panels'),
		Panel = require('moonstone/Panel'),
    DataGridList = require('moonstone/DataGridList'),
    GridListImageItem = require('moonstone/GridListImageItem'),
    Collection = require('enyo/Collection');

var myPiyush;

var SearchPanel = kind({
  name: 'SearchPanel',
  kind: Panel,
  title: 'Search Flickr',
  titleBelow: 'Enter search term above',
  headerOptions: {inputMode: true, dismissOnEnter: true},
  handlers: {
    onInputHeaderChange: 'search'
  },
  components: [
    {kind: DataGridList, fit: true, name: 'resultList', minWidth: 250, minHeight: 300, components: [
      {kind: GridListImageItem, imageSizing: 'cover', useSubCaption: false, centered: false, bindings: [
        {from: 'model.title', to: 'caption'},
        {from: 'model.thumbnail', to: 'source'}
      ]}
    ]}
  ],
  bindings: [
    {from: 'photos', to: '$.resultList.collection'}
  ],
  create: function() {
    this.inherited(arguments);
    var searchcollection=new SearchCollection();
    console.log(searchcollection);
    myPiyush=searchcollection;
    this.set('photos', searchcollection);
  },
  search: function(sender, ev) {
    this.$.resultList.collection.set('searchText', 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/data/data.js ===================================================


var JsonpSource = require("enyo/JsonpSource"),
    Collection = require("enyo/Collection"),
    utils = require("enyo/utils"),
    Model...