JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="https://raw.github.com/brennanmceachran/jquery-mentions-input/master/lib/jquery.events.input.js"></script>
<script src="https://raw.github.com/brennanmceachran/jquery-mentions-input/master/lib/jquery.elastic.js"></script>
<script src="https://raw.github.com/brennanmceachran/jquery-mentions-input/master/jquery.mentionsInput.js"></script>
<link rel="stylesheet" href="http://aristath.github.com/elusive-iconfont/assets/elusive-font/css/elusive-webfont.css">
<div class="header">
    <div class="logo"><i class="icon-address-book"></i></div>
    <h1>jquery.<strong>mentionsInput</strong>.js</h1>
    <p><a href="http://podio.github.com/jquery-mentions-input/" class="github-project"><i class="icon-github" title="forked from" style="vertical-align: middle;font-size: 22px;line-height: 22px;"></i> Github Project</a></p>
    <div class="dropdown-options">
        <a href="#">Old Version</a> <a href="#" class="big-btn">jquery.mentionInput.js</a>
    </div>
</div>
<div class="main">
    <div class="content">
        <button style="float:right;" class="get-syntax-text">Get Syntax Text</button>
        <button style="float:right;" class="get-mentions">Get Mentions</button>
        <p style="text-left;margin:0 0 10px">
            Try @mentioning people or #tagging issues.
        </p>
        <textarea class="mention-github" placeholder="Mention here... (pulls data from the github api)"></textarea>
        <table width="100%" style="margin-top:25px;">
            <tr>
                <td width="33%" style="font-size:55px;text-align:center;">
                    <i class="icon-facebook"></i>
                    <i class="icon-github"></i>
                </td>
                <td width="33%" colspan="2" valign="top">
                    <h3 style="margin-top:0;">Based of techniques used by the big...

CSS

input, textarea{
    font-family: helvetica, arial, sans-serif;
    font-size: 14px;
    font-weight:300;
}
body {
    background: #f6f6f6 url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png);
    margin: 0;
    padding: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 14px;
    font-weight:300;
}

.header{
    padding:50px 0 35px;
    background: #061935 url(https://enterprise.github.com/assets/the-final-frontier.jpg) center bottom no-repeat;
    background-size: cover;
    text-align:center;
    color:rgba(255,255,255,0.5);
}
.header .logo{
    font-size:75px;
    color:#fafafa;
    text-shadow:
        0 1px 0px rgba(0,0,0,0.31),
        0 1px 3px rgba(0,0,0,0.2),
        0 2px 5px rgba(0,0,0,0.1),
        0 0 15px rgba(0,0,0,0.1);
}
.header h1{
    font-size:45px;
    font-weight:100;
    color:rgba(255,255,255,0.7);
    text-shadow:
        0 1px 0px rgba(0,0,0,0.31),
        0 1px 3px rgba(0,0,0,0.2),
        0 2px 5px rgba(0,0,0,0.1),
        0 0 15px rgba(0,0,0,0.1);
}
.header h1 strong{
    font-size:45px;
    font-weight:400;
}
.header p{
    line-height:16px;
}

.header a, .header a:link, .header a:visited{
    display:inline-block;
    color:rgba(255,255,255,0.6);
    text-decoration:none;
    padding: 2px 1px;
    -webkit-transition: all 0.3s linear;
}
.header a:hover{
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
}

.dropdown-options{
    position:relative;
    padding:0px;
    width:320px;
    height:0;
    line-height:0;
    margin:0 auto;
    background:#222;
    box-shadow:
        inset 0 2px 10px rgba(0,0,0,0.4),
        inset 0 -1px 0px rgba(255,255,255,0.5);
    border-radius:4px;
    opacity:0;
    -webkit-transition:
        height 0.3s,
        line-height 0.3s,
        padding 0.3s,
        opacity 0.2s linear;
}
.dropdown-options:before,
.dropdown-options:after {
    content: "";
    position: absolute;
    visibility:hidden;
    top: -10px;
    left: 50%;
    margin-left:-10px;
   ...

JavaScript

$(function () {

  $('.mention-github').mentionsInput({
    triggerChar : ['@','#'],
    minChars: 0,
    onCaret: true,
    parseValue: function(item, triggerChar) {
        if(triggerChar === "@"){
            return "@"+item.value;
        } else{
            return "#"+item.value
        }        
    },
    onDataRequest: function (mode, query, triggerChar, callback) {
        if(triggerChar === '@'){
            getPeopleMentions(query, callback);
        } else if(triggerChar === '#'){
            getIssueMentions(query, callback);
        }
    }

  });
 $('.get-syntax-text').click(function() {
    $('.mention-github').mentionsInput('val', function(text) {
      alert(text);
    });
  });

  $('.get-mentions').click(function() {
    $('.mention-github').mentionsInput('getMentions', function(data) {
      alert(JSON.stringify(data));
    });
  }) ;

    
    $('.github-project').on({
        "click": function(e){
            $('.dropdown-options').toggleClass('open');
            
            return false;
        }
    });
});

function getPeopleMentions(query, callback){
  var people;
      
  people = $.getJSON('https://api.github.com/repos/twitter/bootstrap/contributors');
      
  people.success(function(response){
      
      var peopleResult = _.map(response, function(person){
      
          return {
            id: person.id,
            name: person.login,
            value: person.login,
            avatar: person.avatar_url,
            type: person.type
          }  
      
      });
    
      peopleResult = _.filter(peopleResult, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
                              
      callback(peopleResult);
  
  });
      
}
      
      
function getIssueMentions(query, callback){
  var issues;
      
  issues = $.getJSON('https://api.github.com/repos/twitter/bootstrap/issues');
      
  issues.success(function(response){
      
      var issuesResult = _.map(response,...