JSFiddle - React, Tailwind, and code Playground

by Bateman

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Заметки</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Link</a>
      <a class="mdl-navigation__link" href="#">Link</a>
      <a class="mdl-navigation__link" href="#">Link</a>
      <a class="mdl-navigation__link" href="#">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here -->
    	<div class="input mdl-card mdl-shadow--4dp">
<!-- Right aligned menu below button -->
<div id="Applejack">
<button id="demo-menu-lower-right-0"
        class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
    for="demo-menu-lower-right-0">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
</ul>
</div>
    		<div class="mdl-card__actions">
    			<div class="mdl-textfield mdl-js-textfield">
  					<input class="mdl-textfield__input" type="text" maxlength="42" id="header">
  					<label class="mdl-textfield__label" for="header">Введите заголовок</label>
				</div>
			</div>
		
			<div class="mdl-card__actions">
    			<div class="mdl-textfield mdl-js-textfield" id="RainbowDash">
  					<textarea class="mdl-textfield__input" type="text" rows="3"...

CSS

html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  margin: 0;
  padding: 0;
}
textarea {
	resize: none;
}
#Applejack {
	margin-left: 360px;
	margin-top: 10px;
	margin-bottom: -45px;
}
#PinkiePie {
	position: relative;
	left: 160px;
	bottom: 100px;
	margin-bottom: -50px;
}
.input {
	margin: auto;
	margin-top: 10px;
	width: 400px;
}
#notes > div {
	margin: 1%;
	display: inline-block;
}
.menu {
	margin-left: 250px;
	margin-top: -90px;
}

JavaScript

function addNewNote(header, comment, index) {
    var note = $('<div/>', { class: 'note mdl-card mdl-shadow--4dp' });
    var title = $('<div/>', { class: 'mdl-card__title' });
    title.text(header);
    var text = $('<div/>', { class: 'mdl-card__supporting-text' });
    text.text(comment);
    var menu = $('<div/>', { class: 'menu' });
    var id = 'demo-menu-lower-right-' + index;
    var button = $('<button/>', {
        id: id,
        class: "mdl-button mdl-js-button mdl-button--icon"
    });
    var i = $('<i/>', {
        class: 'material-icons',
        text: 'more_vert'
    });
    $(button).append(i);
    var lang = ['Изменить', 'Поделиться', 'Удалить'];
    var mylist = $('<ul/>', {
        class: 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect',
        for: id
    });
    //Наполняем
    $.each(lang, function () {
        $('<li/>', { text: this, class: 'mdl-menu__item' }).appendTo(mylist);
    });
    $(menu).append(button, mylist);
    $(note).append(title, text, menu);
    $("#notes").append(note);
    $("input").val("").focus().parent().removeClass('is-dirty'); // чтобы label'ы снова появились после очистки поля нужно навернуть костыль
    $("textarea").val("").parent().removeClass('is-dirty'); // т.е. убрать класс is-dirty у контейнера
    componentHandler.upgradeElements(note[0]);

    // Удаляет только заметки, созданные функцией
    /*$('ul li:last').click(function() {
        $(this).closest('.note').remove();
    });*/
}
$(document).ready(function () {
    var k = 0;
    var new_header, new_comment;

    $("#PinkiePie").click(function () {
        new_header = $("input").val();
        new_comment = $("textarea").val();
        if (new_header && new_comment) {
            k++;
            addNewNote(new_header, new_comment, k);
        }
    });
    $(document).keydown(function (key) {
        if (parseInt(key.which, 10) === 13) {
            new_header = $("input").val();
            new_comment = $("textarea").val();
  ...