JSFiddle - React, Tailwind, and code Playground

by gnossienne

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div id="annotation_panel" class="modal">
    <div id="color_palette_header" class="highlight-modal-header modal-header">
        <button id="annotation_close_but" type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="icon icon-remove-sign"></i>
        </button>
         <h4 id="annotation_panel_title">Add New Note</h4>
    </div>
    <div class="highlight-modal-body modal-body">
        <div id="date_info_container">
            <i style="position:relative; top:-2px;" class="icon icon-time"></i>
            <span id="date_info" title="2013-03-29 16:06:42">2 seconds ago</span> 
        </div>
        <div id="text_area_container">
            <textarea id="text_area"></textarea>
        </div>
    </div>
    <div id="color_palette_footer" class="highlight-modal-footer  modal-footer">
        <button id="annotation_save_but" class="btn btn-small btn-success"><i class="icon icon-white icon-check"></i> Save</button>
        <button id="annotation_remove_but" class="btn btn-small btn-danger"><i class="icon icon-white icon-trash"></i> Delete</button>
    </div>
</div>

CSS

div.highlight-modal-header {
    margin: 0px;
    padding: 0px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: move;
}
div.highlight-modal-footer {
    margin: 0px;
    padding: 8px 15px;
    height: 25px;
}
div.highlight-modal-body {
    padding: 5px;
}

#annotation_panel {
    width: 280px;
    border: 1px solid gray;
}

#date_info_container {
    margin-left: 10px;
    font-family: inherit;
    font-size: 75%;
    min-height: 7px;
}
#text_area {
    resize:none;
    margin-left: 10px;
    margin-top: 5px;
    min-height: 50px;
    /*width: auto !important;*/
}

highlight.has_annotation {
    cursor : pointer;
    text-shadow: -5px 5px 10px #000;
    opacity: 0.7;
}
div.option_menu {
    z-index : 9000;
}

JavaScript

$('#annotation_panel').draggable({
    handle: ".highlight-modal-header"
});