显示移动组件ReactJS

Question

import React, { Component } from 'react';

class BigText extends Component {

  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"
                       />
                    </div>

                    <div className="mb-1">
                      <textarea 
                      className="form-control" 
                      placeholder="Text"
                      name="text"
                      />
                    </div>

                    <div className="mb-1">
                      <textarea
                       className="form-control" 
                       placeholder="Summary"
                       name="summary"
                       />
                    </div>

                    <br />

                    <div className="row px-2" >
                      <div>
                        <button className="nav-link btn btn-block btn-info"  onClick={this.handleClick} >Save</button>
                      </div>
                      <div className="px-1">
                        <button className="nav-link btn btn-block btn-danger"> Cancel</button>
                      </div>
                    </div><br />

                </div>
          </div>
    </div>
    </div>
    )
    
  }
}

export default BigText;

我添加了代码段 我正在做的是我正在尝试在字段的一侧添加一个Mobile框架作为组件，这样我在字段中写的任何内容都将显示在该移动设备中显示为屏幕上的组件 所以我想知道如何添加移动设备以及如何在其中显示文字