import React, { Component } from 'react';
class BigText extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
text: '',
summary: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
render() {
return (
<div>
<div>
<h1 className="row px-2">Big Text Notification</h1>
<hr />
<div className="row px-1 py-2 animated fadeIn">
<div className="px-1" style={{ width:50 + '%' }}><br />
<div className="mb-1">
<input type="text"
className="form-control"
placeholder="Title"
name="title"
value={this.state.title}
onChange={this.handleInputChange}
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Text"
name="text"
value={this.state.text}
onChange={this.handleInputChange}
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Summary"
name="summary"
value={this.state.summary}
onChange={this.handleInputChange}
/>
</div>
<br />
<div className="row px-2" >
<div>
<button className="nav-link btn btn-block btn-info">Save</button>
</div>
<div className="px-1">
<button className="nav-link btn btn-block btn-danger"> Cancel</button>
</div>
</div><br />
</div>
<div><br />
<div className="px-1">
<table className="table table-clear table-hover table-striped"
>
<tbody>
<tr>
<td>
<strong>
{this.state.title}
</strong><br />
{this.state.text} <br />{this.state.summary}<br />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default BigText;
I want to make a CSS so that following image be used as the border and whenever i type something it will be wrapped in that as well Actually i want to use this CSS with React JS in which on left input fields were there and on the right that will be shown in this phone component as being typed by the user
