<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> <div class="container"> <div class="col-md-6"> <div class="widget-area no-padding blank"> <div class="status-upload"> <form> <textarea placeholder="What are you doing right now?" ></textarea> <button type="submit" class="btn btn-success green"><i class="fa fa-share"></i> Share</button> </form> </div><!-- Status Upload --> </div><!-- Widget Area --> </div> </div> </div>

.widget-area.blank { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .status-upload { background: none repeat scroll 0 0 #f5f5f5; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; float: left; width: 100%; } .status-upload form { float: left; width: 100%; } .status-upload form textarea { background: none repeat scroll 0 0 #fff; border: medium none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; color: #777777; float: left; font-family: Lato; font-size: 14px; height: 142px; letter-spacing: 0.3px; padding: 20px; width: 100%; resize:vertical; outline:none; border: 1px solid #F2F2F2; } .status-upload ul { float: left; list-style: none outside none; margin: 0; padding: 0 0 0 15px; width: auto; } .status-upload ul > li { float: left; } .status-upload ul > li > a { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; color: #777777; float: left; font-size: 14px; height: 30px; line-height: 30px; margin: 10px 0 10px 10px; text-align: center; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 30px; cursor: pointer; } .status-upload ul > li > a:hover { background: none repeat scroll 0 0 #606060; color: #fff; } .status-upload form button { border: medium none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; color: #fff; float: right; font-family: Lato; font-size: 14px; letter-spacing: 0.3px; margin-right: 9px; margin-top: 9px; padding: 6px 15px; } .dropdown > a > span.green:before { border-left-color: #2dcb73; } .status-upload form button > i { margin-right: 7px; }

$(document).ready(function(){ $("[data-toggle=tooltip]").tooltip(); });