JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="http://bgrins.github.io/ExpandingTextareas/expanding.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Notes</a>

                </li>
                <li><a href="#">Groups</a>

                </li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-12">
             <h1>Notes <button class="btn btn-default pull-right">New note</button></h1>

        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="note">
                <input type="text" placeholder="Note name" />
                <textarea class="note-body expanding" name="" placeholder="Your note...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic, 400italic, 600italic, 700italic, 400, 300, 600, 700);
 body {
    font-family:'Open Sans', sans-serif!important;
}
.navbar {
    background-color:#fff;
}
.note {
    background-color:#FF851B;
    padding:20px;
    margin-bottom:20px;
}
.note input[type="text"] {
    padding: 10px;
    background:transparent;
    border:none;
    color:#fff;
    font-size:16px;
    display:block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
    border-bottom:1px dotted #fff;
    outline: none;
}
.note input[type="text"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #fff !important;
}
.note input[type="text"]:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #fff !important;
}
.note textarea {
    border:none;
    padding:10px 12px;
    background:transparent;
    display:block;
    width:100%;
    height:100%;
    box-sizing: border-box;
    /* For IE and modern versions of Chrome */
    -moz-box-sizing: border-box;
    /* For Firefox                          */
    -webkit-box-sizing: border-box;
    /* For Safari                           */
    resize: none;
    color:#fff;
    font-size:16px;
    margin-top:10px;
    outline: none;
}
h1 {
    color:#aaa;
    font-weight:300;
    font-size:32px;
    border-bottom:1px dotted #aaa;
    padding: 0 0 10px 0;
    margin-bottom:20px;
}