JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
var sources = $("#iframe-sources");
$("#dialog-button").click(function() {
$(this).blur();
$("#iframe").empty();
$("#dialog").dialog({
width: 400,
height: 200,
modal: true,
resizable: false,
draggable: true,
title: "Scroll to bottom"
});
return false;
});
$("#iframe-button").click(function() {
$(this).blur();
$("#iframe").html(sources.val());
return false;
});
});
</script>
</head>
<body style="padding:10px 15px">
<p id="iframe" style="float:right"></p>
<p style="width:320px;padding:2px;margin-right:auto;"><select style="width:100%" id="iframe-sources">
<option value='<iframe src="http://dev.sencha.com/deploy/touch/examples/carousel/" border="0" width="320" height="460" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>'>Carousel</option>
<option value='<iframe src="http://dev.sencha.com/deploy/touch/examples/forms/" border="0" width="320" height="460" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>'>Forms</option>
<option value='<iframe src="http://dev.sencha.com/deploy/touch/examples/list/" border="0" width="320" height="460" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>'>List</option>
<option value='<iframe src="http://dev.sencha.com/deploy/touch/examples/picker/" border="0" width="320" height="460"...