JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mobx/2.4.3/mobx.umd.min.js"></script>
<script src="//npmcdn.com/[email protected]/index.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div class="well tweet-box">
        <h3>TweetBox</h3>
        <textarea class="form-control" rows="5" width="100%"></textarea>
        <div class='tweet-actions'>
          <span>140</span>
          <span class='pull-right btn-group'>
            <button class='btn btn-sm btn-default'>Add Photo</button>
            <button class='btn btn-sm btn-primary'>Tweet</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.tweet-actions{
  margin-top: 10px;
}
.form-control{
  border-radius: 0px;
}

Babel + JSX

const { observable, computed, extendObservable } = mobx;
const { observer } = mobxReact;
const { Component} = React;
const { render } = ReactDOM;

class Tweet {
  @observable tweetText=""
}

const tweet = new Tweet()
console.log(tweet)