Textarea
React Bootstrap Textarea input free examples, templates & tutorial
Responsive React Textarea with Bootstrap 5. How to change textarea height, size, width and style. Examples of textarea editor, comment, contact form, checkout & chat.
Chat
Message textarea inside of a chat UI.
Member
-
John Doe
Hello, Are you there?
Just now
1 -
Danny Smith
Lorem ipsum dolor sit.
5 mins ago
-
Alex Steward
Lorem ipsum dolor sit.
Yesterday
-
Ashley Olsen
Lorem ipsum dolor sit.
Yesterday
-
Kate Moss
Lorem ipsum dolor sit.
Yesterday
-
Lara Croft
Lorem ipsum dolor sit.
Yesterday
-
Brad Pitt
Lorem ipsum dolor sit.
5 mins ago
-
Brad Pitt
12 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Lara Croft
13 mins ago
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-
Brad Pitt
10 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
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>
);
}
.gradient-custom {
/* fallback for old browsers */
background: #fccb90;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(
to bottom right,
rgba(252, 203, 144, 1),
rgba(213, 126, 235, 1)
);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(
to bottom right,
rgba(252, 203, 144, 1),
rgba(213, 126, 235, 1)
);
}
.mask-custom {
background: rgba(24, 24, 16, 0.2);
border-radius: 2em;
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.05);
background-clip: padding-box;
box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
}