initpage crappy tailwind

app/src/InitPage.js

@@ -10,10 +10,34 @@ export default function InitPage({setUser}) {
 		setUser({name, color});
 	}
 
-	return <form className="InitPage" onSubmit={onSubmit}>
-		<div>welcome to chat app</div>
-		<div>enter name:<input type="text" value={name} onChange={event => setName(event.target.value)} /></div>
-		<div>choose color:<input type="color" value={color} onChange={event => setColor(event.target.value)} /></div>
-		<div><input type="submit" value="ok go"></input></div>
-	</form>
+	return <div className="InitPage p-6 content-center">
+		<div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm m-auto">
+			<form onSubmit={onSubmit}>
+				<div>welcome to chat app</div>
+				<div>
+				<label for="name">enter name:</label>
+				<input type="text" id="name" className="form-control
+				block
+				w-full
+				px-3
+				py-1.5
+				text-base
+				font-normal
+				text-gray-700
+				bg-white bg-clip-padding
+				border border-solid border-gray-300
+				rounded
+				transition
+				ease-in-out
+				m-0
+				focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" value={name} onChange={event => setName(event.target.value)} />
+				</div>
+				<div>
+				<label for="color">choose color:</label>
+				<input type="color" id="color" value={color} onChange={event => setColor(event.target.value)} />
+				</div>
+				<div><input type="submit" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" value="ok go"></input></div>
+			</form>
+		</div>
+	</div>
 }