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
  • avatar

    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.

    avatar
  • avatar

    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);
}