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="https://raw.github.com/jakiestfu/Mention.js/master/mention.js"></script>
<p>Type in some text below as if you were sending a "tweet". Be sure to try to "mention" someone by typing the @ symbol, then some text</p>

<hr />

<h3>Example #1: Name, Username, &amp; Image</h3>
<p>In this example, a full name, image, and username is shown in the resulting list. You can query by username OR full name (try typing @Jenna)</p>
<textarea id="full"></textarea>

<h3>Example #2: Name, Username</h3>
<p>In this example, a full name and username is shown in the resulting list.</p>
<textarea id="med"></textarea>

<h3>Example #3: Username</h3>
<p>In this example, a full name and username is shown in the resulting list. You can <b>only</b> query by typing the username</p>
<textarea id="light"></textarea>

CSS

body {
  padding:20px;
  background: #EEE;
  color: #252525;
  text-shadow: 0 1px 0 white;
}

ul {
  text-shadow:none;
}
textarea {
  padding: 8px 15px;
  background: #fefefe;
  -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 #999;
  -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:#444;
  width:100%;
  height:100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
pre {
  text-shadow:0 1px 0 #fff;
}
h2{
  border-bottom: 1px solid #CCC;
  margin-bottom: 5px;
  margin-top: 30px;
}


.mention_name{
  font-size:12px;
}
.mention_username{
  font-size:12px;
  color:#999;
}
.mention_image{
  float: left;
  margin-right: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 20px;
  height: 20px;
}
.active .mention_username{
  color:#fff;
}

JavaScript

$("#full").mention({
  users: [
    {
      name: 'Lindsay Made',
      username: 'LindsayM',
      image: 'http://placekitten.com/25/25'
    },
    {
      name: 'Rob Dyrdek',
      username: 'robdyrdek',
      image: 'http://placekitten.com/25/24'
    },
    {
      name: 'Rick Bahner',
      username: 'RickyBahner',
      image: 'http://placekitten.com/25/23'
    },
    {
      name: 'Jacob Kelley',
      username: 'jakiestfu',
      image: 'http://placekitten.com/25/22'
    },
    {
      name: 'John Doe',
      username: 'HackMurphy',
      image: 'http://placekitten.com/25/21'
    },
    {
      name: 'Charlie Edmiston',
      username: 'charlie',
      image: 'http://placekitten.com/25/20'
    },
    {
      name: 'Andrea Montoya',
      username: 'andream',
      image: 'http://placekitten.com/24/20'
    },
    {
      name: 'Jenna Talbert',
      username: 'calisunshine',
      image: 'http://placekitten.com/23/20'
    },
    {
      name: 'Street League',
      username: 'streetleague',
      image: 'http://placekitten.com/22/20'
    },
    {
      name: 'Loud Mouth Burrito',
      username: 'Loudmouthfoods',
      image: 'http://placekitten.com/21/20'
    }
  ]
});


$("#med").mention({
  users: [
    {
      name: 'Lindsay Made',
      username: 'LindsayM'
    },
    {
      name: 'Rob Dyrdek',
      username: 'robdyrdek'
    },
    {
      name: 'Rick Bahner',
      username: 'RickyBahner'
    },
    {
      name: 'Jacob Kelley',
      username: 'jakiestfu'
    },
    {
      name: 'John Doe',
      username: 'HackMurphy'
    },
    {
      name: 'Charlie Edmiston',
      username: 'charlie'
    },
    {
      name: 'Andrea Montoya',
      username: 'andream'
    },
    {
      name: 'Jenna Talbert',
      username: 'calisunshine'
    },
    {
      name: 'Street League',
      username: 'streetleague'
    },
    {
      name: 'Loud Mouth Burrito',
      username: 'Loudmouthfoods'
    }
  ]
});

$("#light").mention({
  users: [
    { username:...