JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://jakiestfu.com/lab/mention.js"></script>
<p>Type in some text below, and include any of the usernames prepended with an @ symbol (like Twitter): <p>
    <pre><code>["LindsayM", "robdyrdek", "mjgabel", "YoungReckless", "RickyBahner", "HackMurphy", "charlie", "andream", "MissCJ", "Pavilion123", "jenna", "Conlin", "streetleague", "MoneyMo", "NikRichie", "Loudmouthfoods"]</code></pre>

<textarea id="multi-users"></textarea>

CSS

body{
    padding:20px;
    background: #252525;
    color:#fefefe;
    text-shadow:0 1px 2px #000;
}
#multi-users{
    width:100%;
    height:100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul{
    text-shadow:none;
}

textarea{
    padding: 8px 15px;
    background: #444;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #121212;
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    overflow: auto;
    overflow-y: hidden;
    color:#999;
}
pre{
    text-shadow:0 1px 0 #fff;
}

JavaScript

$('#multi-users').mention({
    users: ["LindsayM", "robdyrdek", "mjgabel", "YoungReckless", "RickyBahner", "HackMurphy", "charlie", "andream", "MissCJ", "Pavilion123", "jenna", "Conlin", "streetleague", "MoneyMo", "NikRichie", "Loudmouthfoods"]
});