JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="wrapper">
    <div id="column-1" class="absolute shadow">
        <div id="basic-post-item" class="item">Basic Post</div>
        <div id="link-post-item" class="item">Link Post</div>
        <div id="photo-post-item" class="item">Photo Post</div>
        <div id="video-post-item" class="item">Video Post</div>
    </div>
    <div id="column-2" class="absolute shadow">
        <form class="form-stacked">
            <fieldset>
                <div id="post-title" class="clearfix">
                    <label for="xlInput">Title</label>
                    <div class="input">
                        <textarea class="xlarge" name="textarea"></textarea>
                    </div>
                </div>
                <div id="post-link" class="clearfix">
                    <label for="xlInput">Link</label>
                    <div class="input-prepend">
                        <span class="add-on">http://</span>
                        <input style="width: 225px;" name="prependedInput" type="text" value="" />
                    </div>
                </div>
                <div id="post-body" class="clearfix">
                    <label for="textarea">Body</label>
                    <div class="input">
                        <textarea class="xlarge" style="height: 200px;" name="textarea"></textarea>
                        <span class="help-block">
                            This text will be used in multiple places.
                        </span>
                    </div>
                </div>
                <div id="post-image" class="clearfix">
                    <label for="xlInput">Image</label>
                    <div class="input">
                        <input class="input-file" name="fileInput" type="file" />
                    </div>
                </div>
                <div id="post-video" class="clearfix">
                    <label...

CSS

body .content { margin-top: 20px; }

#wrapper  { /*  height: 800px; position: relative; overflow: hidden; */ }

body #wrapper .twipsy { font-size: 11px; }

#wrapper input[type="text"] { background: #fff; }

#column-1, #column-2, #preview { float: left; /* -moz-box-shadow: inset 1px 1px 8px #888; -webkit-box-shadow: inset 1px 1px 8px #888; box-shadow: inset 1px 1px 8px #888; */ } 

#wrapper * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

#wrapper textarea { resize: vertical; }

#column-1, #column-2, #preview { /* height: 100%; width: 100%; */ }

#column-2 .form-stacked { padding-left: 26px; background: RGBA(0,0,0,0); }
#column-2 .form-stacked .actions { background: RGBA(0,0,0,0); }

#column-1 { /* background: #dedede url("http://subtlepatterns.com/patterns/whitey.png"); */ /* #444 url("http://themify.me/demo/images/topframe-bg.jpg"); */ width: 140px; /* z-index: 10; */ }
    #column-1 .item { border: 1px solid #ccc; color: #444; font-size: 14px; background: #eee; font-weight: 700; padding: 10px 4px 10px; text-align: center; margin: 0px 35px 13px 0px; border-radius: 3px; cursor: hand; cursor: pointer; /* box-shadow: inset 4px 0px 1px RGBA(0,0,0,0.2), 1px 1px 8px #888; */ }
        #column-1 .active { background: #ccc; border: 1px solid #999; -webkit-transition: all 50ms ease-in-out; }
        #column-1 .selected { background: #888; color: #eee; border: 1px solid #444; cursor: default; box-shadow: inset 1px 1px 7px #222; }

#column-2 { background: #eee; border: 1px solid #ccc; /* background: whiteSmoke; */ width: 333px; /* overflow-y: auto; z-index: 9; left: 140px; */ }
    #column-2 form { background: #eee; }
        #column-2 form .help-block, #column-2 form .help-inline { color: #999; } /* overrides twitter boostrap */

#preview { /* z-index: 11; background: #fff url("http://subtlepatterns.com/patterns/whitey.png"); overflow: auto; left: 473px; */ width: 600px; }
    #preview #preview-items { border: 1px solid #ccc; border-radius: 0px 0px 3px...

JavaScript

/*

TODO:

Features

- wrap previews in div so that slideup animation is smoother!

- automatically expand ALL textareas (even the hidden ones) based on their content
- add photo/video/link content to "You Blog" preview
- slideDown Facebook link section
- Put example text in the previews and don't override until title/body fields are not ""

- Twitter/Facebook dropdown menu for multiple logins (see userData)
- Twitter/Facebook character count
- Facebook video/imageposts
- Image/Video stuff
- Add Email and Landing Page
- Give column-2 width a min and max
- Startup UI (Basic, Link, Photo, and Video post stuff)
- Create more types of posts beside Basic, Link, etc.
- Investigate http://www.gosu.pl/steditor/
- Save as draft
- Handle bolds and newlines (etc.) in title and body. :)

Code Cleanup

- Sandbox the Twitter Boostrap within classname .twitter-bootstrap (or similar) to eliminate the need for overrides

*/

var demoStrings = {
    body: 'It\'s time to reshape the way we think about marketing. Stop pushing. Start attracting. Stop interrupting. Start engaging. HubSpot\'s Inbound Marketing Software gives you all the tools you need to make marketing that people will actually love - earning quality leads and loyal customers in return. <br/><br/><ul><li style="color: #2C2C2C;"><strong>Multi-channel analytics</strong> to measure your true ROI.</li><li style="color: #2C2C2C;"><strong>A/B testing &amp; landing page tools</strong> to increase conversion.</li><li style="color: #2C2C2C;"><strong>Blogging, SEO and social media tools</strong></li><li style="color: #2C2C2C;"><strong>Behavior-driven communications</strong> to nurture leads.</li></ul>',
    title: 'All-in-One Inbound Marketing Software',
    facebook: 'It\'s time to reshape the way we think about marketing. Stop pushing. Start attracting. Stop interrupting. Start engaging. HubSpot\'s Inbound Marketing Software gives you all the tools you need to make marketing that people will actually love - earning quality...