JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localStorage/2.0.1/localStorage.min.js"></script>
<div class="scene-wrapper">
  <div class="scene">
    <div class="sections-wrapper">
    
    
      <div class="section section-records-list">
        <div class="section-title">
          <div class="section-title-action">
            <a class="add-new-note-trigger">
              <i class="fa fa-plus"></i>
            </a>
          </div>
          
          <h2 class="text">
            Notes
          </h2>
          
        </div>
        <div class="section-content">
        
        </div>
      </div>
      
      <div class="section section-editor">
         <div class="section-content">
            <textarea class="smde-editor"></textarea>
        </div>
      </div>
      
      
    </div>
  </div>
 
</div>

CSS

.icon{
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}

.icon-trash .icon-detail-cap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
  -webkit-transition: 0.25s cubic-bezier(0, 0, 0, 1.99);
  transition: 0.25s cubic-bezier(0, 0, 0, 1.99);
}

.icon-trash:not(.active-2):hover .icon-detail-cap,
.icon-trash.active:not(.active-2) .icon-detail-cap{
  -webkit-transform-origin-x: 10%;
  transform-origin-x: 10%;
  -webkit-transform-origin-y: 100%;
  transform-origin-y: 100%;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.icon-trash.active-2 .icon-detail-cap{
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin-y: 160%;
    transform-origin-y: 160%;
    -webkit-transform-origin-x: 20%;
    transform-origin-x: 20%;
}

.icon-trash .icon-detail-cap:before{
  content: '';
  position: absolute;
  width: 20%;
  height: 50%;
  top: 0;
  left: 40%;
  border-radius: 40% 40% 0 0;
}

.icon-trash .icon-detail-cap:after{
  content: '';
  position: absolute;
  width: 80%;
  height: 50%;
  top: 50%;
  left: 10%;
}

.icon-trash .icon-detail-body{
  content: '';
  position: absolute;
  width: 70%;
  top:35%;
  left:15%;
  right:0;
  bottom:0;
  border-radius: 0 0 20% 20%;
  -webkit-transition: 0.25s cubic-bezier(0, 0, 0, 1.99);
  transition: 0.25s cubic-bezier(0, 0, 0, 1.99);
}

.icon-trash.active .icon-detail-body{
    transform: rotateZ(80deg);
    -webkit-transform-origin-x: 10%;
    -webkit-transform-origin-y: 10%;
}


.icon-trash .icon-detail-cap:before,
.icon-trash .icon-detail-cap:after,
.icon-trash .icon-detail-body{
  background: #FF404E;
}


/*ICONS END*/


@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
body{
  color: #012D41;  
  margin: 0;
  padding:...

JavaScript

function q(selector){
	return document.querySelector(selector);
}

Element.prototype.q = function(selector){
	return this.querySelector(selector);
};


/*
Storage

list - array of notes ids
currentID - id of current note
'currentID' - value of note

*/

(function(){

var startWithEmptyNote = false;

function setData(key, value){
window.localStorage.setItem(key, JSON.stringify(value));
}

function getData(key){
	var data = window.localStorage.getItem(key);
  return JSON.parse(data);
}

function deleteData(key){
	var data = getData(key);
	if(data != undefined){
  	window.localStorage.removeItem(key);	
  }
}


function createID(){
	return 'note-'+ Math.round(Math.random() * 100000000000)+100000000000;
}


var simplemde = new SimpleMDE({ 
	element: q('.smde-editor') 
});

simplemde.codemirror.on("change", function(){
	var currentID = getData('currentID'),
  		currentIDindex = getData('list').indexOf(currentID);
      
  setData(currentID, simplemde.value());
  
  if(currentIDindex === -1){
  	var list = getData('list');
    list.unshift(currentID);
    setData('list', list);
  }
  
  updateNoteListItemText(currentID, simplemde.value());
});





function prepareEditorData(){
	var list = getData('list');
	if(!list){
  	list = list;
  	setData('list', []);
  }
  
  //Start with new note
  if(!list.length || !list[0]){
    startWithEmptyNote = true;
    setData('currentID', createID());
  } 

}
prepareEditorData();

function deselectNote(){
	var note = q('.note.selected');
  if(note){
  	note.className = 'note';
  }
}


function selectNote(id){
	var noteContent = getData(id) || '',
  		noteDOM = q('#'+id);

  if(noteDOM){
  	setData('currentID', id, noteContent);
    simplemde.value(noteContent);


    deselectNote();
    noteDOM.className = 'note selected';

    simplemde.codemirror.focus();
  }
  
}


function updateNoteListItemText(id, value){
	var noteDOM = q('#'+id),
  		text = (value || '').replace(/<br\s*[\/]?>/gm,'').replace(/\r?\n|\r/gm,...