<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://fb.me/react-0.4.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.4.1.js"></script>
    <script src="../build/typeahead-tokenizer.js"></script>
  </head>
  <body>
    <style>
    .hover {
      border-style: dotted;
      border-width: 1px;
    }
    </style>

    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <TypeaheadTokenizer defaultValue="foo"
          options={
            ["foobar", "spameggs", "hameggs",
             "spamfoo", "spam"]} />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://fb.me/react-0.4.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.4.1.js"></script>
    <script src="../build/typeahead-tokenizer.js"></script>
  </head>
  <body>
    <style>
    .hover {
      border-style: dotted;
      border-width: 1px;
    }
    .typeahead-selector {
      position: absolute;
      border-style: solid;
      border-width: 1px 2px 2px 1px;
      background-color: white;
    }
    .typeahead-token {
      border-style: solid;
      border-color: gray;
      border-width: 1px 2px 2px 1px;
      padding: 1px 5px 1px 5px;
      margin-right: 4px;
      display: inline;
      border-radius: 5px;
    }
    .typeahead {
      display: inline;
    }
    </style>

    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <TypeaheadTokenizer defaultValue="foo"
          options={
            ["foobar", "spameggs", "hameggs",
             "spamfoo", "spam"]} />,
        document.getElementById("example")
      );
    </script>

    <hr />
    This is a footer
  </body>
</html>

Improve styling on tokenizer sample
Improve styling on tokenizer sample

Add some cool styling, also, add a fake footer so you can see how the
typeahead-selector floats/hovers over the other items on the page
