React Bootstrap Textarea input free examples, templates & tutorial

  import React from 'react'; import { MDBContainer, MDBCol, MDBRow, MDBTextArea, MDBBtn, MDBCardBody, MDBCardHeader, MDBCard, MDBBadge, MDBIcon } from 'mdb-react-ui-kit'; export default function App() { return ( <section className='gradient-custom'> <MDBContainer className='py-5'> <MDBRow> <MDBCol md='6' lg='5' xl='5' className='mb-4 mb-md-0'> <h5 className='font-weight-bold mb-3 text-center text-white'>Member</h5> <MDBCard className='mask-custom'> <MDBCardBody> <ul className='list-unstyled mb-0'> <li className='p-2 border-bottom' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3)', }} > <a href='#!' className='d-flex justify-content-between link-light'> <div className='d-flex flex-row'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp' alt='avatar' className=' rounded-circle d-flex align-self-center me-3 shadow-1-strong ' width='60' /> <div className='pt-1'> <p className='fw-bold mb-0'>John Doe</p> <p className='small text-white'>Hello, Are you there?</p> </div> </div> <div className='pt-1'> <p className='small text-white mb-1'>Just now</p> <MDBBadge color='danger' className='float-end'> 1 </MDBBadge> </div> </a> </li> <li className='p-2 border-bottom' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3)', }} > <a href='#!' className='d-flex justify-content-between link-light'> <div className='d-flex flex-row'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp' alt='avatar' className=' rounded-circle d-flex align-self-center me-3 shadow-1-strong ' width='60' /> <div className='pt-1'> <p className='fw-bold mb-0'>Danny Smith</p> <p className='small text-white'>Lorem ipsum dolor sit.</p> </div> </div> <div className='pt-1'> <p className='small text-white mb-1'>5 mins ago</p> </div> </a> </li> <li className='p-2 border-bottom' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3) ', }} > <a href='#!' className='d-flex justify-content-between link-light'> <div className='d-flex flex-row'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp' alt='avatar' className=' rounded-circle d-flex align-self-center me-3 shadow-1-strong ' width='60' /> <div className='pt-1'> <p className='fw-bold mb-0'>Alex Steward</p> <p className='small text-white'>Lorem ipsum dolor sit.</p> </div> </div> <div className='pt-1'> <p className='small text-white mb-1'>Yesterday</p> </div> </a> </li> <li className='p-2 border-bottom' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3) ', }} > <a href='#!' className='d-flex justify-content-between link-light'> <div className='d-flex flex-row'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp' alt='avatar' className=' rounded-circle d-flex align-self-center me-3 shadow-1-strong ' width='60' /> <div className='pt-1'> <p className='fw-bold mb-0'>Ashley Olsen</p> <p className='small text-white'>Lorem ipsum dolor sit.</p> </div> </div> <div className='pt-1'> <p className='small text-white mb-1'>Yesterday</p> </div> </a> </li> <li className='p-2 border-bottom' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3) ', }} > <a href='#!' className='d-flex justify-content-between link-light'> <div className='d-flex flex-row'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp' alt='avatar' className=' rounded-circle d-flex align-self-center me-3 shadow-1-strong ' width='60' /> <div className='pt-1'> <p className='fw-bold mb-0'>Kate Moss</p> <p className='small text-white'>Lorem ipsum dolor sit.</p> </div> </div> <div className='pt-1'> <p className='small text-white mb-1'>Yesterday</p> </div> </a> </li> <li className='p-2 border-bottom' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3) ', }} > <a href='#!' className='d-flex justify-content-between link-light'> <div className='d-flex flex-row'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp' alt='avatar' className=' rounded-circle d-flex align-self-center me-3 shadow-1-strong ' width='60' /> <div className='pt-1'> <p className='fw-bold mb-0'>Lara Croft</p> <p className='small text-white'>Lorem ipsum dolor sit.</p> </div> </div> <div className='pt-1'> <p className='small text-white mb-1'>Yesterday</p> </div> </a> </li> <li className='p-2'> <a href='#!' className='d-flex justify-content-between link-light'> <div className='d-flex flex-row'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp' alt='avatar' className=' rounded-circle d-flex align-self-center me-3 shadow-1-strong ' width='60' /> <div className='pt-1'> <p className='fw-bold mb-0'>Brad Pitt</p> <p className='small text-white'>Lorem ipsum dolor sit.</p> </div> </div> <div className='pt-1'> <p className='small text-white mb-1'>5 mins ago</p> <span className='text-white float-end'> <i className='fas fa-check' aria-hidden='true'></i> </span> </div> </a> </li> </ul> </MDBCardBody> </MDBCard> </MDBCol> <MDBCol md='6' lg='7' xl='7'> <ul className='list-unstyled text-white'> <li className='d-flex justify-content-between mb-4'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp' alt='avatar' className=' rounded-circle d-flex align-self-start me-3 shadow-1-strong ' width='60' /> <MDBCard className='mask-custom'> <MDBCardHeader className='d-flex justify-content-between p-3' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3)' }} > <p className='fw-bold mb-0'>Brad Pitt</p> <p className='text-light small mb-0'> <MDBIcon far icon='clock' /> 12 mins ago </p> </MDBCardHeader> <MDBCardBody> <p className='mb-0'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </MDBCardBody> </MDBCard> </li> <li className='d-flex justify-content-between mb-4'> <MDBCard className='mask-custom w-100'> <MDBCardHeader className='d-flex justify-content-between p-3' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3)' }} > <p className='fw-bold mb-0'>Lara Croft</p> <p className='text-light small mb-0'> <MDBIcon far icon='clock' /> 13 mins ago </p> </MDBCardHeader> <MDBCardBody> <p className='mb-0'> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p> </MDBCardBody> </MDBCard> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp' alt='avatar' className=' rounded-circle d-flex align-self-start ms-3 shadow-1-strong ' width='60' /> </li> <li className='d-flex justify-content-between mb-4'> <img src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp' alt='avatar' className=' rounded-circle d-flex align-self-start me-3 shadow-1-strong ' width='60' /> <MDBCard className='mask-custom'> <MDBCardHeader className='d-flex justify-content-between p-3' style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.3)' }} > <p className='fw-bold mb-0'>Brad Pitt</p> <p className='text-light small mb-0'> <MDBIcon far icon='clock' /> 10 mins ago </p> </MDBCardHeader> <MDBCardBody> <p className='mb-0'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </MDBCardBody> </MDBCard> </li> <li className='mb-3'> <MDBTextArea contrast id='textAreaExample' label='message' rows={4}></MDBTextArea> </li> <MDBBtn color='light' rounded className='float-end'> {' '} Send{' '} </MDBBtn> </ul> </MDBCol> </MDBRow> </MDBContainer> </section> ); }