add enable/disable checkbox, and heading modifier

src/shared/Checkbox.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Checkbox = ({ checked, onChange }) => {
+  return (
+    <div className="bg-white border-2 rounded border-gray-400 hover:border-gray-500 w-8 h-8 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500 cursor-pointer">
+      <input
+        type="checkbox"
+        className="w-8 h-8 opacity-0 absolute cursor-pointer"
+        checked={checked}
+        onChange={e => onChange(e.target.checked)}
+      />
+      <i className="material-icons fill-current hidden text-lg font-bold text-gray-800 cursor-pointer">
+        check
+      </i>
+    </div>
+  );
+};
+
+export default Checkbox;

src/shared/TextArea.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const TextArea = ({ label, placeholder, value, onChange, rows = 5 }) => (
-  <div className="my-4 w-full flex flex-col">
+const TextArea = ({ label, placeholder, value, onChange, className, rows = 5 }) => (
+  <div className={`w-full flex flex-col ${className}`}>
     <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
       {label}
     </label>

src/shared/TextField.js

@@ -1,10 +1,12 @@
 import React from 'react';
 
-const TextField = ({ label, placeholder, value, onChange }) => (
-  <div className="my-4 w-full flex flex-col">
-    <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
-      {label}
-    </label>
+const TextField = ({ label, placeholder, value, onChange, className }) => (
+  <div className={`w-full flex flex-col ${className}`}>
+    {label && (
+      <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
+        {label}
+      </label>
+    )}
     <input
       className="appearance-none block w-full bg-gray-200 text-gray-800 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
       type="text"