React input and label not displaying in browser

I am new to coding with React and having trouble displaying my form. I am especially having problems displaying the label and input in the browser, only the topbar and logo displays. There are also no errors in the console. I would really appreciate any advice on how to fix this problem.

Form.js:

   import React, { Component } from 'react';
import classes from './Form.module.css';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    };
  }

  handleUsernameChange = (event) => {
    this.setState({
      username: event.target.value
    });
  };

  render() {
    return (
      <div className={classes.Form}>
        <label>Username</label>
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleUsernameChange}
        ></input>
      </div>
    );
  }
}

export default Form;

Form.module.js:

.input{
    outline: none;
    padding: 16px 22px;
    border: 1px solid #dadce0;
    font-size:18px;
    border-radius:5px;
    }
    .input:focus{
        border: 2px solid royalblue;
        }
  .label{
    color: #8d8d8d;
    position: absolute;
    top: 27px;
    left: 55px;
    background: #ffffff;
    transition: 300ms;
    transform: translate(-50%, -50%)}

App.js

import React from 'react';
import './App.css';
import Topbar from './Topbar';
import Form from './Form';

function App() {
  return (
    <div className="App">
      <Topbar />
      <Form />
    </div>
  );
}

export default App;

Thanks in advance!