<template>              <section class="gradient-custom">                <MDBContainer class="py-5">                  <MDBRow>                    <MDBCol md="6" lg="5" xl="5" class="mb-4 mb-md-0">                      <h5 class="font-weight-bold mb-3 text-center text-white">                        Member                      </h5>                                  <MDBCard class="mask-custom">                        <MDBCardBody>                          <ul class="list-unstyled mb-0">                            <li                              class="p-2 border-bottom"                              style="                                border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;                              "                            >                              <a                                href="#!"                                class="d-flex justify-content-between link-light"                              >                                <div class="d-flex flex-row">                                  <img                                    src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp"                                    alt="avatar"                                    class="                                      rounded-circle                                      d-flex                                      align-self-center                                      me-3                                      shadow-1-strong                                    "                                    width="60"                                  />                                  <div class="pt-1">                                    <p class="fw-bold mb-0">John Doe</p>                                    <p class="small text-white">                                      Hello, Are you there?                                    </p>                                  </div>                                </div>                                <div class="pt-1">                                  <p class="small text-white mb-1">Just now</p>                                  <MDBBadge color="danger" class="float-end"                                    >1</MDBBadge                                  >                                </div>                              </a>                            </li>                            <li                              class="p-2 border-bottom"                              style="                                border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;                              "                            >                              <a                                href="#!"                                class="d-flex justify-content-between link-light"                              >                                <div class="d-flex flex-row">                                  <img                                    src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp"                                    alt="avatar"                                    class="                                      rounded-circle                                      d-flex                                      align-self-center                                      me-3                                      shadow-1-strong                                    "                                    width="60"                                  />                                  <div class="pt-1">                                    <p class="fw-bold mb-0">Danny Smith</p>                                    <p class="small text-white">                                      Lorem ipsum dolor sit.                                    </p>                                  </div>                                </div>                                <div class="pt-1">                                  <p class="small text-white mb-1">5 mins ago</p>                                </div>                              </a>                            </li>                            <li                              class="p-2 border-bottom"                              style="                                border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;                              "                            >                              <a                                href="#!"                                class="d-flex justify-content-between link-light"                              >                                <div class="d-flex flex-row">                                  <img                                    src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp"                                    alt="avatar"                                    class="                                      rounded-circle                                      d-flex                                      align-self-center                                      me-3                                      shadow-1-strong                                    "                                    width="60"                                  />                                  <div class="pt-1">                                    <p class="fw-bold mb-0">Alex Steward</p>                                    <p class="small text-white">                                      Lorem ipsum dolor sit.                                    </p>                                  </div>                                </div>                                <div class="pt-1">                                  <p class="small text-white mb-1">Yesterday</p>                                </div>                              </a>                            </li>                            <li                              class="p-2 border-bottom"                              style="                                border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;                              "                            >                              <a                                href="#!"                                class="d-flex justify-content-between link-light"                              >                                <div class="d-flex flex-row">                                  <img                                    src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp"                                    alt="avatar"                                    class="                                      rounded-circle                                      d-flex                                      align-self-center                                      me-3                                      shadow-1-strong                                    "                                    width="60"                                  />                                  <div class="pt-1">                                    <p class="fw-bold mb-0">Ashley Olsen</p>                                    <p class="small text-white">                                      Lorem ipsum dolor sit.                                    </p>                                  </div>                                </div>                                <div class="pt-1">                                  <p class="small text-white mb-1">Yesterday</p>                                </div>                              </a>                            </li>                            <li                              class="p-2 border-bottom"                              style="                                border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;                              "                            >                              <a                                href="#!"                                class="d-flex justify-content-between link-light"                              >                                <div class="d-flex flex-row">                                  <img                                    src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp"                                    alt="avatar"                                    class="                                      rounded-circle                                      d-flex                                      align-self-center                                      me-3                                      shadow-1-strong                                    "                                    width="60"                                  />                                  <div class="pt-1">                                    <p class="fw-bold mb-0">Kate Moss</p>                                    <p class="small text-white">                                      Lorem ipsum dolor sit.                                    </p>                                  </div>                                </div>                                <div class="pt-1">                                  <p class="small text-white mb-1">Yesterday</p>                                </div>                              </a>                            </li>                            <li                              class="p-2 border-bottom"                              style="                                border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;                              "                            >                              <a                                href="#!"                                class="d-flex justify-content-between link-light"                              >                                <div class="d-flex flex-row">                                  <img                                    src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp"                                    alt="avatar"                                    class="                                      rounded-circle                                      d-flex                                      align-self-center                                      me-3                                      shadow-1-strong                                    "                                    width="60"                                  />                                  <div class="pt-1">                                    <p class="fw-bold mb-0">Lara Croft</p>                                    <p class="small text-white">                                      Lorem ipsum dolor sit.                                    </p>                                  </div>                                </div>                                <div class="pt-1">                                  <p class="small text-white mb-1">Yesterday</p>                                </div>                              </a>                            </li>                            <li class="p-2">                              <a                                href="#!"                                class="d-flex justify-content-between link-light"                              >                                <div class="d-flex flex-row">                                  <img                                    src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"                                    alt="avatar"                                    class="                                      rounded-circle                                      d-flex                                      align-self-center                                      me-3                                      shadow-1-strong                                    "                                    width="60"                                  />                                  <div class="pt-1">                                    <p class="fw-bold mb-0">Brad Pitt</p>                                    <p class="small text-white">                                      Lorem ipsum dolor sit.                                    </p>                                  </div>                                </div>                                <div class="pt-1">                                  <p class="small text-white mb-1">5 mins ago</p>                                  <span class="text-white float-end"                                    ><i class="fas fa-check" aria-hidden="true"></i                                  ></span>                                </div>                              </a>                            </li>                          </ul>                        </MDBCardBody>                      </MDBCard>                    </MDBCol>                                <MDBCol md="6" lg="7" xl="7">                      <ul class="list-unstyled text-white">                        <li class="d-flex justify-content-between mb-4">                          <img                            src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"                            alt="avatar"                            class="                              rounded-circle                              d-flex                              align-self-start                              me-3                              shadow-1-strong                            "                            width="60"                          />                          <MDBCard class="mask-custom">                            <MDBCardHeader                              class="d-flex justify-content-between p-3"                              style="border-bottom: 1px solid rgba(255, 255, 255, 0.3)"                            >                              <p class="fw-bold mb-0">Brad Pitt</p>                              <p class="text-light small mb-0">                                <MDBIcon iconStyle="far" icon="clock" /> 12 mins ago                              </p>                            </MDBCardHeader>                            <MDBCardBody>                              <p class="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 class="d-flex justify-content-between mb-4">                          <MDBCard class="mask-custom w-100">                            <MDBCardHeader                              class="d-flex justify-content-between p-3"                              style="border-bottom: 1px solid rgba(255, 255, 255, 0.3)"                            >                              <p class="fw-bold mb-0">Lara Croft</p>                              <p class="text-light small mb-0">                                <MDBIcon iconStyle="far" icon="clock" /> 13 mins ago                              </p>                            </MDBCardHeader>                            <MDBCardBody>                              <p class="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"                            class="                              rounded-circle                              d-flex                              align-self-start                              ms-3                              shadow-1-strong                            "                            width="60"                          />                        </li>                        <li class="d-flex justify-content-between mb-4">                          <img                            src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"                            alt="avatar"                            class="                              rounded-circle                              d-flex                              align-self-start                              me-3                              shadow-1-strong                            "                            width="60"                          />                          <MDBCard class="mask-custom">                            <MDBCardHeader                              class="d-flex justify-content-between p-3"                              style="border-bottom: 1px solid rgba(255, 255, 255, 0.3)"                            >                              <p class="fw-bold mb-0">Brad Pitt</p>                              <p class="text-light small mb-0">                                <MDBIcon iconStyle="far" icon="clock" /> 10 mins ago                              </p>                            </MDBCardHeader>                            <MDBCardBody>                              <p class="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 class="mb-3">                          <MDBTextarea                            white                            v-model="textarea"                            id="textAreaExample"                            label="message"                            rows="4"                          ></MDBTextarea>                        </li>                        <MDBBtn color="light" rounded class="float-end"> Send </MDBBtn>                      </ul>                    </MDBCol>                  </MDBRow>                </MDBContainer>              </section>            </template>

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

                          import {                 MDBTextarea,                 MDBContainer,                 MDBRow,                 MDBCol,                 MDBBadge,                 MDBCard,                 MDBCardBody,                 MDBCardHeader,                 MDBIcon               } from "mdb-vue-ui-kit";               import { ref } from "vue";               export default {                 components: {                   MDBTextarea,                   MDBContainer,                   MDBRow,                   MDBCol,                   MDBBadge,                   MDBCard,                   MDBCardBody,                   MDBCardHeader,                   MDBIcon                 },                 setup(){                   const textarea = ref('');                   return {                     textarea                   }                 }               };