React Bootstrap 5 News feed 

import React from "react";
import {
  MDBBtn,
  MDBCol,
  MDBContainer,
  MDBRipple,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <MDBRow className="gx-5">
        <MDBCol md="6" className="mb-4">
          <MDBRipple
            className="bg-image hover-overlay ripple shadow-2-strong rounded-5"
            rippleTag="div"
            rippleColor="light"
          >
            <img
              src="https://mdbcdn.b-cdn.net/img/new/slides/080.webp"
              className="w-100"
            />
            <a href="#!">
              <div
                className="mask"
                style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
              ></div>
            </a>
          </MDBRipple>
        </MDBCol>
        <MDBCol md="6" className="mb-4">
          <span className="badge bg-danger px-2 py-1 shadow-1-strong mb-3">
            News of the day
          </span>
          <h4>
            <strong>Facilis consequatur eligendi</strong>
          </h4>
          <p className="text-muted">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
            consequatur eligendi quisquam doloremque vero ex debitis veritatis
            placeat unde animi laborum sapiente illo possimus, commodi
            dignissimos obcaecati illum maiores corporis.
          </p>
          <MDBBtn>Read More</MDBBtn>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}

import React from "react";
import {
  MDBCard,
  MDBContainer,
  MDBCol,
  MDBIcon,
  MDBRipple,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <MDBCard className="px-3 pt-3" style={{ maxWidth: "32rem" }}>
        <div>
          <MDBRipple
            className="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4"
            rippleTag="div"
            rippleColor="light"
          >
            <img
              src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp"
              className="img-fluid"
            />
            <a href="#!">
              <div
                className="mask"
                style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
              ></div>
            </a>
          </MDBRipple>
          <MDBRow className="mb-3">
            <MDBCol col="6">
              <a href="" className="text-info">
                <MDBIcon fas icon="plane" className="me-1" />
                Travels
              </a>
            </MDBCol>
            <MDBCol col="6" className="text-end">
              <u> 15.07.2020</u>
            </MDBCol>
          </MDBRow>
          <a href="#!" className="text-dark">
            <h5>This is title of the news</h5>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit,
              iste aliquid. Sed id nihil magni, sint vero provident esse numquam
              perferendis ducimus dicta adipisci iusto nam temporibus modi animi
              laboriosam?
            </p>
          </a>
          <hr />
          <a href="#!" className="text-dark">
            <MDBRow className="mb-4 border-bottom pb-2">
              <MDBCol size="3">
                <img
                  src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                  className="img-fluid shadow-1-strong rounded"
                  alt="Hollywood Sign on The Hill"
                />
              </MDBCol>

              <MDBCol size="9">
                <p className="mb-2">
                  <strong>Lorem ipsum dolor sit amet</strong>
                </p>
                <p>
                  <u> 15.07.2020</u>
                </p>
              </MDBCol>
            </MDBRow>
          </a>
          <a href="#!" className="text-dark">
            <MDBRow className="mb-4 border-bottom pb-2">
              <MDBCol size="3">
                <img
                  src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                  className="img-fluid shadow-1-strong rounded"
                  alt="Hollywood Sign on The Hill"
                />
              </MDBCol>

              <MDBCol size="9">
                <p className="mb-2">
                  <strong>Lorem ipsum dolor sit amet</strong>
                </p>
                <p>
                  <u> 15.07.2020</u>
                </p>
              </MDBCol>
            </MDBRow>
          </a>
          <a href="#!" className="text-dark">
            <MDBRow className="mb-4 border-bottom pb-2">
              <MDBCol size="3">
                <img
                  src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                  className="img-fluid shadow-1-strong rounded"
                  alt="Hollywood Sign on The Hill"
                />
              </MDBCol>

              <MDBCol size="9">
                <p className="mb-2">
                  <strong>Lorem ipsum dolor sit amet</strong>
                </p>
                <p>
                  <u> 15.07.2020</u>
                </p>
              </MDBCol>
            </MDBRow>
          </a>
          <a href="#!" className="text-dark">
            <MDBRow className="mb-4 border-bottom pb-2">
              <MDBCol size="3">
                <img
                  src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                  className="img-fluid shadow-1-strong rounded"
                  alt="Hollywood Sign on The Hill"
                />
              </MDBCol>

              <MDBCol size="9">
                <p className="mb-2">
                  <strong>Lorem ipsum dolor sit amet</strong>
                </p>
                <p>
                  <u> 15.07.2020</u>
                </p>
              </MDBCol>
            </MDBRow>
          </a>
        </div>
      </MDBCard>
    </MDBContainer>
  );
}

import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBContainer,
  MDBCol,
  MDBIcon,
  MDBPagination,
  MDBPaginationItem,
  MDBPaginationLink,
  MDBRipple,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <MDBRow className="gx-5 border-bottom pb-4 mb-5">
        <MDBCol md="6" className="mb-4">
          <MDBRipple
            className="bg-image hover-overlay ripple shadow-2-strong rounded-5"
            rippleTag="div"
            rippleColor="light"
          >
            <img
              src="https://mdbcdn.b-cdn.net/img/new/slides/080.webp"
              className="w-100"
            />
            <a href="#!">
              <div
                className="mask"
                style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
              ></div>
            </a>
          </MDBRipple>
        </MDBCol>
        <MDBCol md="6" className="mb-4">
          <span className="badge bg-danger px-2 py-1 shadow-1-strong mb-3">
            News of the day
          </span>
          <h4>
            <strong>Facilis consequatur eligendi</strong>
          </h4>
          <p className="text-muted">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
            consequatur eligendi quisquam doloremque vero ex debitis veritatis
            placeat unde animi laborum sapiente illo possimus, commodi
            dignissimos obcaecati illum maiores corporis.
          </p>
          <MDBBtn>Read More</MDBBtn>
        </MDBCol>
      </MDBRow>
      <MDBRow className="gx-lg-5">
        <MDBCol lg="4" md="6" className="mb-4 mb-lg-0">
          <div>
            <MDBRipple
              className="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4"
              rippleTag="div"
              rippleColor="light"
            >
              <img
                src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp"
                className="img-fluid"
              />
              <a href="#!">
                <div
                  className="mask"
                  style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
                ></div>
              </a>
            </MDBRipple>
            <MDBRow className="mb-3">
              <MDBCol col="6">
                <a href="" className="text-info">
                  <MDBIcon fas icon="plane" className="me-1" />
                  Travels
                </a>
              </MDBCol>
              <MDBCol col="6" className="text-end">
                <u> 15.07.2020</u>
              </MDBCol>
            </MDBRow>
            <a href="#!" className="text-dark">
              <h5>This is title of the news</h5>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit,
                iste aliquid. Sed id nihil magni, sint vero provident esse
                numquam perferendis ducimus dicta adipisci iusto nam temporibus
                modi animi laboriosam?
              </p>
            </a>
            <hr />
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
          </div>
        </MDBCol>
        <MDBCol lg="4" md="6" className="mb-4 mb-lg-0">
          <div>
            <MDBRipple
              className="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4"
              rippleTag="div"
              rippleColor="light"
            >
              <img
                src="https://mdbcdn.b-cdn.net/img/new/fluid/city/011.webp"
                className="img-fluid"
              />
              <a href="#!">
                <div
                  className="mask"
                  style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
                ></div>
              </a>
            </MDBRipple>
            <MDBRow className="mb-3">
              <MDBCol col="6">
                <a href="" className="text-danger">
                  <MDBIcon fas icon="chart-pie" className="me-1" />
                  Business
                </a>
              </MDBCol>
              <MDBCol col="6" className="text-end">
                <u> 15.07.2020</u>
              </MDBCol>
            </MDBRow>
            <a href="#!" className="text-dark">
              <h5>This is title of the news</h5>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit,
                iste aliquid. Sed id nihil magni, sint vero provident esse
                numquam perferendis ducimus dicta adipisci iusto nam temporibus
                modi animi laboriosam?
              </p>
            </a>
            <hr />
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/031.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/032.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/033.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/034.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
          </div>
        </MDBCol>
        <MDBCol lg="4" md="12" className="mb-4 mb-lg-0">
          <div>
            <MDBRipple
              className="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4"
              rippleTag="div"
              rippleColor="light"
            >
              <img
                src="https://mdbcdn.b-cdn.net/img/new/fluid/city/018.webp"
                className="img-fluid"
              />
              <a href="#!">
                <div
                  className="mask"
                  style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
                ></div>
              </a>
            </MDBRipple>
            <MDBRow className="mb-3">
              <MDBCol col="6">
                <a href="" className="text-warning">
                  <MDBIcon fas icon="code" className="me-1" />
                  Technology
                </a>
              </MDBCol>
              <MDBCol col="6" className="text-end">
                <u> 15.07.2020</u>
              </MDBCol>
            </MDBRow>
            <a href="#!" className="text-dark">
              <h5>This is title of the news</h5>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit,
                iste aliquid. Sed id nihil magni, sint vero provident esse
                numquam perferendis ducimus dicta adipisci iusto nam temporibus
                modi animi laboriosam?
              </p>
            </a>
            <hr />
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/011.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/012.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/013.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
            <a href="#!" className="text-dark">
              <MDBRow className="mb-4 border-bottom pb-2">
                <MDBCol size="3">
                  <img
                    src="https://mdbcdn.b-cdn.net/img/new/standard/city/014.webp"
                    className="img-fluid shadow-1-strong rounded"
                    alt="Hollywood Sign on The Hill"
                  />
                </MDBCol>

                <MDBCol size="9">
                  <p className="mb-2">
                    <strong>Lorem ipsum dolor sit amet</strong>
                  </p>
                  <p>
                    <u> 15.07.2020</u>
                  </p>
                </MDBCol>
              </MDBRow>
            </a>
          </div>
        </MDBCol>
      </MDBRow>
      <nav aria-label="...">
        <MDBPagination circle className="mb-0 justify-content-center">
          <MDBPaginationItem>
            <MDBPaginationLink href="#" tabIndex={-1} aria-disabled="true">
              Previous
            </MDBPaginationLink>
          </MDBPaginationItem>
          <MDBPaginationItem>
            <MDBPaginationLink href="#">1</MDBPaginationLink>
          </MDBPaginationItem>
          <MDBPaginationItem active>
            <MDBPaginationLink href="#">
              2 <span className="visually-hidden">(current)</span>
            </MDBPaginationLink>
          </MDBPaginationItem>
          <MDBPaginationItem>
            <MDBPaginationLink href="#">3</MDBPaginationLink>
          </MDBPaginationItem>
          <MDBPaginationItem>
            <MDBPaginationLink href="#">Next</MDBPaginationLink>
          </MDBPaginationItem>
        </MDBPagination>
      </nav>
    </MDBContainer>
  );
}

import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBContainer,
  MDBPagination,
  MDBPaginationItem,
  MDBPaginationLink,
  MDBIcon,
  MDBTable,
  MDBTableBody,
  MDBTableHead,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <MDBCard className="d-flex" style={{ width: "48rem" }}>
        <MDBCardBody>
          <MDBTable hover forum responsive className="text-center">
            <MDBTableHead>
              <tr>
                <th></th>
                <th className="text-left">Topic</th>
                <th>Comments</th>
              </tr>
            </MDBTableHead>
            <MDBTableBody>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    Styling in the Shadow DOM With CSS Shadow Parts
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    5 obscure HTTP methods to impress your hipster friends
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    Rolling With The Punches: Shifting Attack Tactics &#38;
                    Dropping Packets Faster &#38; Cheaper At The Edge
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    Internship Experience: Cryptography Engineer
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    egghead: Nader Dabit - Full Stack Development in the Era of
                    Serverless Computing
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    10 Interesting JavaScript and CSS Libraries for April 2020
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    bash: Split a String into Parts with `cut` in Bash
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    Node v10.20.1 (LTS)
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
              <tr>
                <td scope="row" className="text-nowrap">
                  <MDBBtn
                    outline
                    color="dark"
                    size="sm"
                    className="p-1 m-0 waves-effect"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-up" className="ms-1" />
                  </MDBBtn>
                  <MDBBtn
                    outline
                    color="danger"
                    size="sm"
                    className="p-1 m-0 waves-effect mx-1"
                  >
                    <span className="value">0</span>

                    <MDBIcon fas icon="thumbs-down" className="ms-1" />
                  </MDBBtn>
                </td>
                <td className="text-start">
                  <a href="#" className="font-weight-bold blue-text">
                    React Digest Issue #247
                  </a>
                  <div className="my-2">
                    <a href="#" className="blue-text">
                      <strong>MDBootstrap</strong>
                    </a>
                    <span className="badge bg-secondary mx-1">staff</span>
                    <span className="badge bg-primary mx-1">pro</span>
                    <span className="badge bg-warning mx-1">premium</span>
                    <span>a year ago</span>
                  </div>
                </td>
                <td>
                  <a href="#" className="text-dark">
                    <span>0</span>
                    <MDBIcon fas icon="comments" className="ms-1" />
                  </a>
                </td>
              </tr>
            </MDBTableBody>
          </MDBTable>
          <div className="d-flex justify-content-center">
            <nav className="my-3 pt-2">
              <MDBPagination circle className="mb-0">
                <MDBPaginationItem>
                  <MDBPaginationLink
                    href="#"
                    tabIndex={-1}
                    aria-disabled="true"
                  >
                    Previous
                  </MDBPaginationLink>
                </MDBPaginationItem>
                <MDBPaginationItem>
                  <MDBPaginationLink href="#">11</MDBPaginationLink>
                </MDBPaginationItem>
                <MDBPaginationItem>
                  <MDBPaginationLink href="#">12</MDBPaginationLink>
                </MDBPaginationItem>
                <MDBPaginationItem active>
                  <MDBPaginationLink href="#">
                    13 <span className="visually-hidden">(current)</span>
                  </MDBPaginationLink>
                </MDBPaginationItem>
                <MDBPaginationItem>
                  <MDBPaginationLink href="#">14</MDBPaginationLink>
                </MDBPaginationItem>
                <MDBPaginationItem>
                  <MDBPaginationLink href="#">15</MDBPaginationLink>
                </MDBPaginationItem>
                <MDBPaginationItem>
                  <MDBPaginationLink href="#">Next</MDBPaginationLink>
                </MDBPaginationItem>
              </MDBPagination>
            </nav>
          </div>
        </MDBCardBody>
      </MDBCard>
    </MDBContainer>
  );
}

import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBContainer,
  MDBIcon,
  MDBRipple,
  MDBTextArea,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <MDBCard style={{ maxWidth: "42rem" }}>
        <MDBCardBody>
          <div className="d-flex mb-3">
            <a href="#!">
              <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/18.webp"
                className="border rounded-circle me-2"
                alt="Avatar"
                style={{ height: "40px" }}
              />
            </a>
            <div>
              <a href="#!" className="text-dark mb-0">
                <strong>Anna Doe</strong>
              </a>
              <a
                href="#!"
                className="text-muted d-block"
                style={{ marginTop: "-6px" }}
              >
                <small>10h</small>
              </a>
            </div>
          </div>
          <div>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque ex
              non impedit corporis sunt nisi nam fuga dolor est, saepe vitae
              delectus fugit, accusantium qui nulla aut adipisci provident
              praesentium?
            </p>
          </div>
        </MDBCardBody>
        <MDBRipple
          className="bg-image hover-overlay ripple rounded-0"
          rippleTag="div"
          rippleColor="light"
        >
          <img
            src="https://mdbcdn.b-cdn.net/img/new/standard/people/077.webp"
            className="w-100"
          />
          <a href="#!">
            <div
              className="mask"
              style={{ backgroundColor: "rgba(251, 251, 251, 0.2)" }}
            ></div>
          </a>
        </MDBRipple>
        <MDBCardBody>
          <div className="d-flex justify-content-between mb-3">
            <div>
              <a href="#!">
                <MDBIcon
                  fas
                  icon="thumbs-up"
                  color="primary"
                  className="me-1"
                />
                <MDBIcon fas icon="heart" color="danger" className="me-1" />
                <span>124</span>
              </a>
            </div>
            <div>
              <a href="#!" className="text-muted">
                8 comments
              </a>
            </div>
          </div>
          <div className="d-flex justify-content-between text-center border-top border-bottom mb-4">
            <MDBBtn size="lg" rippleColor="dark" color="link">
              <MDBIcon fas icon="thumbs-up" className="me-2" /> Like
            </MDBBtn>
            <MDBBtn size="lg" rippleColor="dark" color="link">
              <MDBIcon fas icon="comment-alt" className="me-2" /> Comments
            </MDBBtn>
            <MDBBtn size="lg" rippleColor="dark" color="link">
              <MDBIcon fas icon="share" className="me-2" /> Share
            </MDBBtn>
          </div>
          <div className="d-flex mb-3">
            <a href="#!">
              <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/18.webp"
                className="border rounded-circle me-2"
                alt="Avatar"
                style={{ height: "40px" }}
              />
            </a>
            <MDBTextArea
              label="Message"
              id="textAreaExample"
              rows={2}
              wrapperClass="w-100"
            />
          </div>
          <div className="d-flex mb-3">
            <a href="#!">
              <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp"
                className="border rounded-circle me-2"
                alt="Avatar"
                style={{ height: "40px" }}
              />
            </a>
            <div>
              <div className="bg-light rounded-3 px-3 py-1">
                <a href="#!" className="text-dark mb-0">
                  <strong>Malcolm Dosh</strong>
                </a>
                <a href="#!" className="text-muted d-block">
                  <small>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Natus, aspernatur!
                  </small>
                </a>
              </div>
              <a href="#!" className="text-muted small ms-3 me-2">
                <strong>Like</strong>
              </a>
              <a href="#!" className="text-muted small me-2">
                <strong>Reply</strong>
              </a>
            </div>
          </div>
          <div className="d-flex mb-3">
            <a href="#!">
              <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/5.webp"
                className="border rounded-circle me-2"
                alt="Avatar"
                style={{ height: "40px" }}
              />
            </a>
            <div>
              <div className="bg-light rounded-3 px-3 py-1">
                <a href="#!" className="text-dark mb-0">
                  <strong>Rhia Wallis</strong>
                </a>
                <a href="#!" className="text-muted d-block">
                  <small>
                    Et tempora ad natus autem enim a distinctio quaerat
                    asperiores necessitatibus commodi dolorum nam perferendis
                    labore delectus, aliquid placeat quia nisi magnam.
                  </small>
                </a>
              </div>
              <a href="#!" className="text-muted small ms-3 me-2">
                <strong>Like</strong>
              </a>
              <a href="#!" className="text-muted small me-2">
                <strong>Reply</strong>
              </a>
            </div>
          </div>
          <div className="d-flex mb-3">
            <a href="#!">
              <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/6.webp"
                className="border rounded-circle me-2"
                alt="Avatar"
                style={{ height: "40px" }}
              />
            </a>
            <div>
              <div className="bg-light rounded-3 px-3 py-1">
                <a href="#!" className="text-dark mb-0">
                  <strong>Marcie Mcgee</strong>
                </a>
                <a href="#!" className="text-muted d-block">
                  <small>
                    Officia asperiores autem sit rerum architecto a deserunt
                    doloribus obcaecati, velit ab at, ad delectus sapiente!
                    Voluptatibus quaerat suscipit in nostrum necessitatibus
                    illum nemo quo beatae obcaecati quidem optio fugit ipsam
                    distinctio, illo repellendus porro sequi alias perferendis
                    ea soluta maiores nisi eligendi? Mollitia debitis quam ex,
                    voluptates cupiditate magnam fugiat.
                  </small>
                </a>
              </div>
              <a href="#!" className="text-muted small ms-3 me-2">
                <strong>Like</strong>
              </a>
              <a href="#!" className="text-muted small me-2">
                <strong>Reply</strong>
              </a>
            </div>
          </div>
          <div className="d-flex mb-3">
            <a href="#!">
              <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/10.webp"
                className="border rounded-circle me-2"
                alt="Avatar"
                style={{ height: "40px" }}
              />
            </a>
            <div>
              <div className="bg-light rounded-3 px-3 py-1">
                <a href="#!" className="text-dark mb-0">
                  <strong>Hollie James</strong>
                </a>
                <a href="#!" className="text-muted d-block">
                  <small>
                    Voluptatibus quaerat suscipit in nostrum necessitatibus
                  </small>
                </a>
              </div>
              <a href="#!" className="text-muted small ms-3 me-2">
                <strong>Like</strong>
              </a>
              <a href="#!" className="text-muted small me-2">
                <strong>Reply</strong>
              </a>
            </div>
          </div>
        </MDBCardBody>
      </MDBCard>
    </MDBContainer>
  );
}

import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBRow,
  MDBIcon,
  MDBInput,
  MDBTypography,
  MDBCardText,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <MDBCard style={{ width: "48rem" }}>
        <div className="border border-left border-right px-0">
          <div className="p-3 border-bottom">
            <h4 className="d-flex align-items-center mb-0">
              Home
              <MDBIcon
                far
                icon="star"
                size="xs"
                color="primary"
                className="ms-auto"
              />
            </h4>
          </div>
          <MDBCard className="shadow-0">
            <MDBCardBody className="border-bottom pb-2">
              <div className="d-flex">
                <img
                  src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31).webp"
                  className="rounded-circle"
                  height="50"
                  alt="Avatar"
                  loading="lazy"
                />
                <div className="d-flex align-items-center w-100 ps-3">
                  <div className="w-100">
                    <input
                      type="text"
                      id="form1"
                      className="form-control form-status border-0 py-1 px-0"
                      placeholder="What's happening"
                    />
                  </div>
                </div>
              </div>
              <div className="d-flex justify-content-between">
                <MDBTypography
                  listUnStyled
                  className="d-flex flex-row ps-3 pt-3"
                  style={{ marginLeft: "50px" }}
                >
                  <li>
                    <a href="#!">
                      <MDBIcon far icon="image" className="pe-2" />
                    </a>
                  </li>
                  <li>
                    <a href="#!">
                      <MDBIcon fas icon="photo-video" className="px-2" />
                    </a>
                  </li>
                  <li>
                    <a href="#!">
                      <MDBIcon fas icon="chart-bar" className="px-2" />
                    </a>
                  </li>
                  <li>
                    <a href="#!">
                      <MDBIcon far icon="smile" className="px-2" />
                    </a>
                  </li>
                  <li>
                    <a href="#!">
                      <MDBIcon far icon="calendar-check" className="px-2" />
                    </a>
                  </li>
                </MDBTypography>
                <div className="d-flex align-items-center">
                  <MDBBtn rounded>Tweet</MDBBtn>
                </div>
              </div>
            </MDBCardBody>
          </MDBCard>
          <div className="d-flex p-3 border-bottom">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (29).webp"
              className="rounded-circle"
              height="50"
              alt="Avatar"
              loading="lazy"
            />
            <div className="d-flex w-100 ps-3">
              <div>
                <a href="#!">
                  <h6 className="text-body">
                    Miley Cyrus
                    <span className="small text-muted font-weight-normal mx-1">
                      @mileycyrus
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      •
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      2h
                    </span>
                    <span>
                      <MDBIcon fas icon="angle-down" className="float-end" />
                    </span>
                  </h6>
                </a>
                <p style={{ lineHeight: "1.2" }}>
                  Lorem ipsum dolor, sit amet <a href="#!">#consectetur </a>
                  adipisicing elit. Nobis assumenda eveniet ipsum libero
                  mollitia vero doloremque
                  <a href="#!"> #perspiciatis</a> molestiae omnis, quam iure
                  dicta reprehenderit distinctio facere labore atque, sit
                  <a href="#!"> #ratione</a> quo.
                </p>
                <MDBTypography
                  listUnStyled
                  className="d-flex justify-content-between mb-0 pe-xl-5"
                >
                  <li>
                    <MDBIcon far icon="comment" />
                  </li>
                  <li>
                    <MDBIcon fas icon="retweet" />
                    <span className="small ps-2">7</span>
                  </li>
                  <li>
                    <MDBIcon far icon="heart" />
                    <span className="small ps-2">35</span>
                  </li>
                  <li>
                    <MDBIcon far icon="share-square" />
                  </li>
                </MDBTypography>
              </div>
            </div>
          </div>
          <div className="d-flex p-3 border-bottom">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (29).webp"
              className="rounded-circle"
              height="50"
              alt="Avatar"
              loading="lazy"
            />
            <div className="d-flex w-100 ps-3">
              <div>
                <a href="#">
                  <h6 className="text-body">
                    Miley Cyrus
                    <span className="small text-muted font-weight-normal mx-1">
                      @mileycyrus
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      •
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      3h
                    </span>
                    <span>
                      <MDBIcon fas icon="angle-down" className="float-end" />
                    </span>
                  </h6>
                </a>
                <p style={{ lineHeight: "1.2" }}>
                  Nobis assumenda eveniet ipsum libero mollitia vero doloremque
                  molestiae reprehenderit.
                </p>

                <MDBCard
                  className="border mb-3 shadow-0 "
                  style={{ maxWidth: "540px" }}
                >
                  <MDBRow className="g-0">
                    <MDBCol md="3">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (21).webp"
                        alt="Avatar"
                        className="img-fluid rounded-left"
                      />
                    </MDBCol>
                    <MDBCol md="9">
                      <MDBCardBody>
                        <MDBCardText style={{ lineHeight: "1" }}>
                          Title of the news
                        </MDBCardText>
                        <MDBCardText
                          className="small mb-0"
                          style={{ lineHeight: "1.2" }}
                        >
                          This is a wider card with supporting text below as a
                          natural lead-in to additional content.
                        </MDBCardText>
                        <MDBCardText
                          className="small mb-0"
                          style={{ lineHeight: "1.2" }}
                        >
                          <MDBIcon fas icon="link" size="xs" className="pe-1" />
                          example.pl
                        </MDBCardText>
                      </MDBCardBody>
                    </MDBCol>
                  </MDBRow>
                </MDBCard>
                <MDBTypography
                  listUnStyled
                  className="d-flex justify-content-between mb-0 pe-xl-5"
                >
                  <li>
                    <MDBIcon far icon="comment" />
                  </li>
                  <li>
                    <MDBIcon fas icon="retweet" />
                    <span className="small ps-2">51</span>
                  </li>
                  <li>
                    <MDBIcon far icon="heart" />
                    <span className="small ps-2">185</span>
                  </li>
                  <li>
                    <MDBIcon far icon="share-square" />
                  </li>
                </MDBTypography>
              </div>
            </div>
          </div>
          <div className="d-flex p-3 border-bottom">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (22).webp"
              className="rounded-circle"
              height="50"
              alt="Avatar"
              loading="lazy"
            />
            <div className="d-flex w-100 ps-3">
              <div>
                <a href="#">
                  <h6 className="text-body">
                    Bob Marley
                    <span className="small text-muted font-weight-normal mx-1">
                      @bobmarley
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      •
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      5h
                    </span>
                    <span>
                      <MDBIcon fas icon="angle-down" className="float-end" />
                    </span>
                  </h6>
                </a>
                <p style={{ lineHeight: "1.2" }}>
                  Lorem ipsum dolor, sit amet <a href="#!">#consectetur</a>{" "}
                  adipisicing elit. Officiis, <a href="#!"> #repellat</a>. Error
                  cumque temporibus eum pariatur ducimus facere? Obcaecati
                  fugit, nobis eos <a href="#!">#deserunt</a> odit libero
                  voluptatibus, iste laudantium, tempore ratione ut.
                </p>

                <MDBCard
                  className="border mb-3 shadow-0 "
                  style={{ maxWidth: "540px" }}
                >
                  <MDBRow className="g-0">
                    <MDBCol md="3">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (20).webp"
                        alt="Avatar"
                        className="img-fluid rounded-left"
                      />
                    </MDBCol>
                    <MDBCol md="9">
                      <MDBCardBody>
                        <MDBCardText style={{ lineHeight: "1" }}>
                          Title of the news
                        </MDBCardText>
                        <MDBCardText
                          className="small mb-0"
                          style={{ lineHeight: "1.2" }}
                        >
                          This is a wider card with supporting text below as a
                          natural lead-in to additional content.
                        </MDBCardText>
                        <MDBCardText
                          className="small mb-0"
                          style={{ lineHeight: "1.2" }}
                        >
                          <MDBIcon fas icon="link" size="xs" className="pe-1" />
                          example.pl
                        </MDBCardText>
                      </MDBCardBody>
                    </MDBCol>
                  </MDBRow>
                </MDBCard>
                <MDBTypography
                  listUnStyled
                  className="d-flex justify-content-between mb-0 pe-xl-5"
                >
                  <li>
                    <MDBIcon far icon="comment" />
                  </li>
                  <li>
                    <MDBIcon fas icon="retweet" />
                    <span className="small ps-2">8</span>
                  </li>
                  <li>
                    <MDBIcon far icon="heart" />
                    <span className="small ps-2">97</span>
                  </li>
                  <li>
                    <MDBIcon far icon="share-square" />
                  </li>
                </MDBTypography>
              </div>
            </div>
          </div>
          <div className="d-flex p-3 border-bottom">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (24).webp"
              className="rounded-circle"
              height="50"
              alt="Avatar"
              loading="lazy"
            />
            <div className="d-flex w-100 ps-3">
              <div>
                <a href="#">
                  <h6 className="text-body">
                    Anna Doe
                    <span className="small text-muted font-weight-normal mx-1">
                      @annadoe
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      •
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      7h
                    </span>
                    <span>
                      <MDBIcon fas icon="angle-down" className="float-end" />
                    </span>
                  </h6>
                </a>
                <p style={{ lineHeight: "1.2" }}>
                  Error cumque temporibus eum pariatur ducimus facere? Obcaecati
                  fugit, nobis eos <a href="#!">#deserunt</a> odit libero
                  voluptatibus, iste laudantium, tempore ratione ut.
                </p>
                <img
                  src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp"
                  className="img-fluid rounded mb-3"
                  alt="Fissure in Sandstone"
                />
                <MDBTypography
                  listUnStyled
                  className="d-flex justify-content-between mb-0 pe-xl-5"
                >
                  <li>
                    <MDBIcon far icon="comment" />
                  </li>
                  <li>
                    <MDBIcon fas icon="retweet" />
                    <span className="small ps-2">11</span>
                  </li>
                  <li>
                    <MDBIcon far icon="heart" />
                    <span className="small ps-2">65</span>
                  </li>
                  <li>
                    <MDBIcon far icon="share-square" />
                  </li>
                </MDBTypography>
              </div>
            </div>
          </div>
          <div className="d-flex p-3 border-bottom">
            <img
              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (3).webp"
              className="rounded-circle"
              height="50"
              alt="Avatar"
              loading="lazy"
            />
            <div className="d-flex w-100 ps-3">
              <div>
                <a href="#">
                  <h6 className="text-body">
                    Mark Twain
                    <span className="small text-muted font-weight-normal mx-1">
                      @marktawin
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      •
                    </span>
                    <span className="small text-muted font-weight-normal me-1">
                      10h
                    </span>
                    <span>
                      <MDBIcon fas icon="angle-down" className="float-end" />
                    </span>
                  </h6>
                </a>
                <p style={{ lineHeight: "1.2" }}>
                  Obcaecati fugit, nobis eos odit libero voluptatibus, iste
                  laudantium, tempore ratione ut.
                </p>
                <div className="ratio ratio-16x9 mb-3">
                  <iframe
                    src="https://www.youtube.com/embed/vlDzYIIOYmM"
                    title="YouTube video"
                    allowfullscreen
                  ></iframe>
                </div>
                <MDBTypography
                  listUnStyled
                  className="d-flex justify-content-between mb-0 pe-xl-5"
                >
                  <li>
                    <MDBIcon far icon="comment" />
                  </li>
                  <li>
                    <MDBIcon fas icon="retweet" />
                    <span className="small ps-2">34</span>
                  </li>
                  <li>
                    <MDBIcon far icon="heart" />
                    <span className="small ps-2">159</span>
                  </li>
                  <li>
                    <MDBIcon far icon="share-square" />
                  </li>
                </MDBTypography>
              </div>
            </div>
          </div>
        </div>
      </MDBCard>
    </MDBContainer>
  );
}