Ahem...

src/components/App.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Message from './Message';
+
+import GithubIcon from 'feather-icons/dist/icons/github.svg';
+import DownloadIcon from 'feather-icons/dist/icons/download.svg';
+import LinkIcon from 'feather-icons/dist/icons/link.svg';
+import ChevronsDownIcon from 'feather-icons/dist/icons/chevrons-down.svg';
+import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+
+const App = () => <Message icon={ ErrorIcon } heading="React App">
+  <p>Placeholder app content</p>
+</Message>;
+
+export default App;

src/components/Message/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import style from './style.css';
+
+const Message = ({ icon, heading, children }) => {
+  const IconComponent = icon;
+  return <div className={ style.message }>
+    <h2>{ IconComponent ? <IconComponent/> : '' }{ heading }</h2>
+    { children }
+  </div>;
+};
+
+export default Message;

src/components/Message/style.css

@@ -0,0 +1,20 @@
+.message {
+  background: var(--color-tan);
+  padding: var(--spacing-margin);
+  margin: var(--spacing-margin) 0;
+}
+
+.message h2 {
+  margin: var(--spacing-margin) 0;
+}
+
+.message h2 svg {
+  margin-right: 0.5rem;
+  height: 3rem;
+  width: 3rem;
+  vertical-align: bottom;
+}
+
+.message p {
+  margin: var(--spacing-margin) 0;
+}