JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/gr2m/bootstrap-expandable-input/gh-pages/bootstrap-expandable-input.css">
<script src="https://cdn.rawgit.com/gr2m/bootstrap-expandable-input/gh-pages/bootstrap-expandable-input.js"></script>
<form>
    <p>Using Boostrap/jQuery and <a href="https://github.com/gr2m/bootstrap-expandable-input" target="_blank">https://github.com/gr2m/bootstrap-expandable-input</a></p>
    <p>Credits stackoverflow:</p>
    <ul>
        <li>
            <a href="http://stackoverflow.com/questions/7189223/can-you-have-multiline-html5-placeholder-text-in-a-textarea/25261886#25261886" target="_blank">.attr("placeholder").replace()</a>
        </li>
        <li>
            <a href="http://stackoverflow.com/questions/1011641/how-can-i-use-css-to-preserve-line-breaks-in-an-html-code-block" target="_blank">white-space:pre</a>
        </li>
    </ul>
  <div class="form-group">
    <label for="exampleContenteditable">Example contenteditable</label>
      <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control"></div>    
  </div>
   <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

CSS

.form-control[contenteditable="true"] {
	border:1px solid rgb(238, 238, 238);
	padding:3px 3px 3px 3px;	
	 white-space: pre !important;
    height:auto !important;
    min-height:38px;
}
.form-control[contenteditable="true"]:focus {
	border-color:#66afe9;
}

JavaScript

$(document).ready(function() {
    $('div[contenteditable="true"]').each(function() {
        var s=$(this).attr('placeholder');
		if (s) {
			var s1=s.replace(/\\n/g, String.fromCharCode(10));
			$(this).attr('placeholder',s1);
			console.log("placeholder replaced with "+s1);
		}
    });
});
/* Fiddle by [email protected]
 Credits StackOveflow.
 Using https://github.com/gr2m/bootstrap-expandable-input
 */