JSFiddle - React, Tailwind, and code Playground

by kryo

HTML

<script src="http://dev.sencha.com/deploy/ext-4.0.0/bootstrap.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css">
<div id="placeholder"></div>

CSS

.special-window {
  display: block;
  width: 250px;
  border:  1px solid black;
  background: silver;
  margin: 20px auto;
}
.special-window .title,
.special-window .content {
  padding: 5px;
}
.special-window .title {
  background: orange;
  border-bottom: 1px solid black;
  font-weight: bold;
  font-size: 0.8em;
}
.special-window .content {
  font-size: 1.2em;
}

JavaScript

// define our template
var myTemplate = new Ext.XTemplate(
  '<div class="special-window">',
    '<div class="title">{title}</div>',
    '<div class="content">{content}</div>',
  '</div>'
);

// overwrite placeholder contents
myTemplate.overwrite(Ext.get('placeholder'), {
  title: 'Special Window Title',
  content: 'Example window body text'
});