JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<body>
    <div class="notes">
        
    </div>
    <textarea></textarea>
<body>

CSS

* {margin:0px; padding:0px;}

.notes {width: 100%; border: 2px solid #000;}

.note {margin: 10px;}

.note_text { float: left;}

.note_controls {float:right;}

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

JavaScript

$(function() {

    $('body').on('click', '.note_controls', function() {
      $(this).closest('.note').remove();  
    })
  
    $('body').keypress(function(e) {
         if(e.which == 13) {
             $('.notes').append('<div class="note clearfix"><div class="note_text">' + $('textarea').val() + '</div><div class="note_controls">Delete</div></div>'); 
         }  
    })
    
})