JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<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>
<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" maxlength="1000"...

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:'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 = ['Russian', 'English', 'Ukraine'];
	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();
	$("textarea").val("");
}
$(document).ready(function() {
var k = 0;
	$("#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();
			if (new_header && new_comment) {
				k++;
				addNewNote(new_header, new_comment, k);
			}
		}
	});
});