JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">Загрузка...</div>

CSS

section.contact{
    width: 1170px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 50px;
}
input{
    width: 400px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: Arial, sans-serif;
    font-size:18px;
    font-weight: 300;    
    color:rgb(0, 0, 0);
    padding-left:20px;
    padding-right:20px;
    margin-bottom:20px;
}
textarea{
    font-family: Arial, sans-serif;
    min-width: 400px;
    min-height: 200px;
    max-width: 600px;
    max-height: 300px;
    border: 1px solid rgba(255,255,255,.4);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
}
input[type=submit] {
    margin-top: 30px;
    cursor:pointer;
    background: rgb(47, 155, 56)
}
input[type=submit]:hover{
    background: rgb(29, 94, 34)
}
@media screen and (max-width:1170px) {
    section.contact{
        width: 100%;
    }
}
@media screen and (max-width:460px) {
    input{
        width: 100%;
    }
    textarea{
        min-width: 100%;
    }
}

JavaScript

class Contact extends Component{
    constructor(props){
        super(props);
        this.state={
            name: '',
            email: '',
        };
        this.handleEmailInput = this.handleEmailInput.bind(this);
        this.handleNameInput = this.handleNameInput.bind(this);
    }
    handleSubmit(event){
        event.preventDefault();
        
    }
    handleNameInput(event){
    
        this.setState({name: event.target.value})
    }
    handleEmailInput(event){
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    let validate = re.test(event.target.value.toLowerCase());
            this.setState({email: event.target.value,emailValid:validate})
    }
    render(){
    return(
        <section className="contact">
            <form action= "#" method= "POST" onSubmit={this.handleSubmit}>
                <p>Name:</p><p> <input type= "text" name= "name" value={this.state.name} onChange={this.handleNameInput}/> </p> 
                <p>E-mail: </p><p> <input type= "text" name= "email" value={this.state.email} onChange={this.handleEmailInput}/></p> 
                <p>Message: </p><p> <textarea rows= "10" cols= "45" name= "message"></textarea></p> 
                <input type= "submit" value= "Отправить"/>
            </form>            
        </section>
    );
    }
}
ReactDOM.render(<Contact />, document.getElementById('root'));