<html>
<head>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class UsernameClass extends React.Component {
render(){
return <div className="form-element">
<label htmlFor="username">Username</label>
<input type="text" id="username"/>
</div>
}
}
class PasswordClass extends React.Component {
render(){
return <div className="form-element">
<label htmlFor="password">Password</label>
<input type="text" id="username"/>
</div>
}
}
class SubmitButtonClass extends React.Component {
render(){
return <button type="submit">Submit</button>
}
}
class SignInFormClass extends React.Component {
render(){
return <form>
<UsernameClass/>
<PasswordClass/>
<SubmitButtonClass/>
</form>
}
}
ReactDOM.render(<SignInFormClass/>, document.getElementById('root'))
</script>
</body>
</html>