💄 Added styling to new task form

frontend/src/components/Welcome.tsx

@@ -7,7 +7,7 @@ const Welcome: FunctionalComponent = () => {
 
   if (hidden) return null
 
-  return <section class="mb-4 border-l-4 border-gray-600 p-2 pl-3 font-semibold bg-gray-100">
+  return <section class="mb-8 border-l-4 border-gray-600 p-2 pl-3 font-semibold bg-gray-100">
     <h3>Welcome to tiny-todo!</h3>
     <p>A simple todo app that's: tiny 🐜, lightweight 🔦🏋️‍♀️, and performant ⚡. Built using Go &amp; Preact!</p>
     <button class="text-sm font-semibold underline underline-dotted hover:underline-solid underline-black" onClick={() => setHidden(true)}>don't show again</button>

frontend/src/routes/todos.tsx

@@ -42,9 +42,13 @@ const NewTask: FunctionalComponent = () => {
     reset()
   }
 
-  return <form onSubmit={handleSubmit(create)} class="mb-8">
-    <input placeholder="Use tiny-todo everyday!" {...register('name', { required: true })} />
-    <input type="submit" value="Create task" />
+  return <form onSubmit={handleSubmit(create)} class="mb-8 space-y-4">
+    <input
+      class="block border-gray-200 border-1 w-full px-4 py-2 rounded-sm focus:border-gray-400 focus:outline-none"
+      placeholder="Use tiny-todo everyday!"
+      {...register('name', { required: true })}
+    />
+    <input class="bg-gray-700 text-white px-3 py-1 font-bold hover:bg-black cursor-pointer rounded-sm" type="submit" value="Create task" />
   </form>
 }