JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.0.1/ckeditor.js"></script>
<form id="form" method="post">
    <input type="text" id="title" placeholder="Title"/>
    <textarea id="description" name="description"></textarea>
    <input type="submit" id="submit" value="Submit" />
</form>

<div id="notifications"></div>

CSS

.title{
    font-weight: bold;
    display: block;
}
.description{
}
.notification{
    border: 1px solid red;
    margin: 10px;
}
.closeButton{
    float: right;
}

JavaScript

$(document).ready(function(){
    CKEDITOR.replace( 'description' );
    
    $('#title').focus();
    
    $('form').submit(function(event){
        event.preventDefault();
        
        var html=CKEDITOR.instances.description.getSnapshot();
        
        var $closeButton = $('<img class="closeButton" src="http://www.tunesdiary.com/static/images/icon_grey_cross.gif">');
        var $title = $('<span></span>').addClass('title').text($('#title').val());
        var $description = $('<span></span>').addClass('description').html(html);
        var $notification = $('<div></div>').append($closeButton).append($title).append($description).addClass('notification');
        
        $('#notifications').append($notification);
        
        $closeButton.click(function(){
            this.remove();
        });
    });
    
});