birtles/notes.html

## notes.html
<!doctype html>
<meta charset=utf-8>
<title>Notes example</title>
<script src="https://unpkg.com/react@%5E16.5.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@%5E16.5.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@%5E15.6/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
:root {
  --yellow-background: hsl(54, 100%, 90.2%);
}

.note {
  box-sizing: border-box;
  box-shadow: 0px 1px 3px rgba(0, 0, 30, 0.2);
}

@supports (display: grid) {
  .note {
    display: grid;
    grid-template-columns: auto 1rem;
    grid-template-rows: 1rem;
    border-radius: 0 1.6rem 0 0;
  }

  .note > .heading, .note > .cornerfiller {
    background: var(--yellow-background);
  }

  .note > .heading {
    grid-row-end: span 2;
  }

  .note > .corner {
    width: 1rem;
    height: 1rem;
  }

  .note > .body {
    background: var(--yellow-background);
    grid-column-end: span 2;
  }
}

@supports not (display: grid) {
  .note {
    background: var(--yellow-background);
    padding-top: 1rem;
  }

  .note > .heading, .note > .corner, .note > .cornerfiller {
    display: none;
  }
}
</style>
<div id=container>
</div>
<script type="text/babel">
function NoteCorner() {
  return (
    <svg className="corner" viewBox="0 0 100 100" role="presentation">
      <polygon fill="#FEFACF" points="0,0 100,100 0,100" />
      <path
        fill="#CCB92D"
        d="M0,0l100,100c0,0-69.5-4.5-78.4-7.09S8.9,85.5,7.2,78.76S0,0,0,0"
      />
      <path
        fill="#FCFBF1"
        d="M0,0l100,100c0,0-62.2-10.3-71-12.8s-12.7-7.4-14.4-14.1S0,0,0,0"
      />
    </svg>
  );
}

class Note extends React.PureComponent {
  static get propTypes() {
     return {
       heading: PropTypes.string.isRequired,
       body: PropTypes.string.isRequired
     };
  }

  render() {
    return (
      <form className="note" autoComplete="off" ref={this.formRef}>
        <div className="heading">
          <input type="text" value={this.props.heading} />
        </div>
        <NoteCorner />
        <div className="cornerfiller" />
        <div className="body">
          <input type="text" value={this.props.body} />
        </div>
      </form>
    );
  }
}

ReactDOM.render(
  <Note heading="Note" body="" />,
  document.getElementById('container')
);
</script>
	<!doctype html>
	<meta charset=utf-8>
	<title>Notes example</title>
	<script src="https://unpkg.com/react@%5E16.5.0/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@%5E16.5.0/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/prop-types@%5E15.6/prop-types.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<style>
	:root {
	--yellow-background: hsl(54, 100%, 90.2%);
	}

	.note {
	box-sizing: border-box;
	box-shadow: 0px 1px 3px rgba(0, 0, 30, 0.2);
	}

	@supports (display: grid) {
	.note {
	display: grid;
	grid-template-columns: auto 1rem;
	grid-template-rows: 1rem;
	border-radius: 0 1.6rem 0 0;
	}

	.note > .heading, .note > .cornerfiller {
	background: var(--yellow-background);
	}

	.note > .heading {
	grid-row-end: span 2;
	}

	.note > .corner {
	width: 1rem;
	height: 1rem;
	}

	.note > .body {
	background: var(--yellow-background);
	grid-column-end: span 2;
	}
	}

	@supports not (display: grid) {
	.note {
	background: var(--yellow-background);
	padding-top: 1rem;
	}

	.note > .heading, .note > .corner, .note > .cornerfiller {
	display: none;
	}
	}
	</style>
	<div id=container>
	</div>
	<script type="text/babel">
	function NoteCorner() {
	return (
	<svg className="corner" viewBox="0 0 100 100" role="presentation">
	<polygon fill="#FEFACF" points="0,0 100,100 0,100" />
	<path
	fill="#CCB92D"
	d="M0,0l100,100c0,0-69.5-4.5-78.4-7.09S8.9,85.5,7.2,78.76S0,0,0,0"
	/>
	<path
	fill="#FCFBF1"
	d="M0,0l100,100c0,0-62.2-10.3-71-12.8s-12.7-7.4-14.4-14.1S0,0,0,0"
	/>
	</svg>
	);
	}

	class Note extends React.PureComponent {
	static get propTypes() {
	return {
	heading: PropTypes.string.isRequired,
	body: PropTypes.string.isRequired
	};
	}

	render() {
	return (
	<form className="note" autoComplete="off" ref={this.formRef}>
	<div className="heading">
	<input type="text" value={this.props.heading} />
	</div>
	<NoteCorner />
	<div className="cornerfiller" />
	<div className="body">
	<input type="text" value={this.props.body} />
	</div>
	</form>
	);
	}
	}

	ReactDOM.render(
	<Note heading="Note" body="" />,
	document.getElementById('container')
	);
	</script>