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