JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="https://connect.facebook.net/en_US/all.js"></script>
 <body>
<div id="loginDiv">
  <a href="#" onclick="onLoginButtonClicked()" id="login">Login</a>
</div>
     
<div id="comments">
  <script id="template" type="text/template">
    <img class="pic" src="https://graph.facebook.com/{{userid}}/picture">
    <span><b>{{name}}</b><br/>{{body}}</span>
  </script>
</div>
<div id="textWrap">
  <textarea id="text" rows="3" placeholder="Enter a new comment..." onkeydown="onCommentKeyDown(event)"></textarea>
</div>
<div id="fb-root"></div>
</script>
</body>

CSS

body {
  background: #fbfbfb;
  color: #333;
  font-family: Helvetica, sans-serif;
  line-height: 20px;
  width: 420px;
  margin: auto;
}
#loginDiv {
  float: right;
  margin: 10px 0;
}
#video {
  margin: 5px 0;
}
.comment {
  margin: 7px 0;
  padding: 5px;
  border: 1px solid #ddd;
  background: #fff;
  min-height: 50px;
}
.pic {
  padding-right: 10px;
  float: left;
}
#textWrap {
  padding-top: 5px;
  margin-top: 10px;
  border-top: 1px solid #bbb;
}
#text {
  width: 100%;
  font-size: 100%;
  font-family: Helvetica, sans-serif;
  border: 1px solid #ddd;
}

JavaScript

var commentsRef = new Firebase('https://crowdfluttr.firebaseio.com/');
var myUserID = null;

//Create an Firebase Simple Login client so we can do Facebook auth
//Firebase Simple Login takes in the commentRef and function of error and user
var auth = new FirebaseSimpleLogin(commentsRef, function(error, user) {
  if(user) {
    myUserID = user.id;
    $("#loginDiv").text(user.first_name + " " + user.last_name);
  }
});