React Features Sections - Bootstrap 4 & Material Design

        
            
                  import React from "react";
                  import {  MDBRow, MDBCol, MDBIcon } from "mdbreact";

                  const FeaturesPage = () => {
                    return (
                        <section className="text-center my-5">
                          <h2 className="h1-responsive font-weight-bold my-5">
                            Why is it so great?
                          </h2>
                          <p className="lead grey-text w-responsive mx-auto mb-5">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                            ad minim veniam.
                          </p>
                          <MDBRow>
                            <MDBCol md="4">
                              <MDBIcon icon="chart-area" size="3x" className="red-text" />
                              <h5 className="font-weight-bold my-4">Analytics</h5>
                              <p className="grey-text mb-md-0 mb-5">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Reprehenderit maiores aperiam minima assumenda deleniti hic.
                              </p>
                            </MDBCol>
                            <MDBCol md="4">
                              <MDBIcon icon="book" size="3x" className="cyan-text" />
                              <h5 className="font-weight-bold my-4">Tutorials</h5>
                              <p className="grey-text mb-md-0 mb-5">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Reprehenderit maiores aperiam minima assumenda deleniti hic.
                              </p>
                            </MDBCol>
                            <MDBCol md="4">
                              <MDBIcon far icon="comments" size="3x" className="orange-text" />
                              <h5 className="font-weight-bold my-4">Support</h5>
                              <p className="grey-text mb-md-0 mb-5">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Reprehenderit maiores aperiam minima assumenda deleniti hic.
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </section>
                    );
                  }

                  export default FeaturesPage;
              
        
    

        
            
                  import React from "react";
                  import {  MDBRow, MDBCol, MDBIcon, MDBBtn } from "mdbreact";

                  const FeaturesPage = () => {
                    return (
                      <section className="my-5">
                        <h2 className="h1-responsive font-weight-bold text-center my-5">
                          Why is it so great?
                        </h2>
                        <p className="lead grey-text w-responsive text-center mx-auto mb-5">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                          ad minim veniam.
                        </p>

                        <MDBRow>
                          <MDBCol md="4" className="md-0 mb-5">
                            <MDBRow>
                              <MDBCol lg="2" md="3" size="2">
                                <MDBIcon icon="bullhorn" size="2x" className="blue-text" />
                              </MDBCol>
                              <MDBCol lg="10" md="9" size="10">
                                <h4 className="font-weight-bold">Marketing</h4>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                  do eiusmod tempor incididunt ut labore et dolore magna
                                  aliqua. Ut enim ad minim veniam.
                                </p>
                                <MDBBtn color="primary" size="sm">
                                  Learn more
                                </MDBBtn>
                              </MDBCol>
                            </MDBRow>
                          </MDBCol>
                          <MDBCol md="4" className="md-0 mb-5">
                            <MDBRow>
                              <MDBCol lg="2" md="3" size="2">
                                <MDBIcon icon="cogs" size="2x" className="pink-text" />
                              </MDBCol>
                              <MDBCol lg="10" md="9" size="10">
                                <h4 className="font-weight-bold">Customization</h4>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                  do eiusmod tempor incididunt ut labore et dolore magna
                                  aliqua. Ut enim ad minim veniam.
                                </p>
                                <MDBBtn color="pink" size="sm">
                                  Learn more
                                </MDBBtn>
                              </MDBCol>
                            </MDBRow>
                          </MDBCol>
                          <MDBCol md="4" className="md-0 mb-5">
                            <MDBRow>
                              <MDBCol lg="2" md="3" size="2">
                                <MDBIcon icon="tachometer-alt" size="2x" className="purple-text" />
                              </MDBCol>
                              <MDBCol lg="10" md="9" size="10">
                                <h4 className="font-weight-bold">Support</h4>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                  do eiusmod tempor incididunt ut labore et dolore magna
                                  aliqua. Ut enim ad minim veniam.
                                </p>
                                <MDBBtn color="purple" size="sm">
                                  Learn more
                                </MDBBtn>
                              </MDBCol>
                            </MDBRow>
                          </MDBCol>
                        </MDBRow>
                      </section>
                    );
                  }

                  export default FeaturesPage;
              
        
    

        
            
                  import React from "react";
                  import {  MDBRow, MDBCol, MDBIcon } from "mdbreact";

                  const FeaturesPage = () => {
                    return (
                      <section className="my-5">
                          <h2 className="h1-responsive font-weight-bold text-center my-5">
                            Why is it so great?
                          </h2>
                          <p className="lead grey-text w-responsive text-center mx-auto mb-5">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                            ad minim veniam.
                          </p>

                          <MDBRow>
                            <MDBCol lg="5" className="text-center text-lg-left">
                              <img
                                className="img-fluid"
                                src="https://mdbootstrap.com/img/Photos/Others/screens-section.webp"
                                alt=""
                              />
                            </MDBCol>
                            <MDBCol lg="7">
                              <MDBRow className="mb-3">
                                <MDBCol size="1">
                                  <MDBIcon icon="share" size="lg" className="indigo-text" />
                                </MDBCol>
                                <MDBCol xl="10" md="11" size="10">
                                  <h5 className="font-weight-bold mb-3">Safety</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
                                    enim ad minima veniam, quis nostrum exercitationem ullam.
                                    Reprehenderit maiores aperiam assumenda deleniti hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                              <MDBRow className="mb-3">
                                <MDBCol size="1">
                                  <MDBIcon icon="share" size="lg" className="indigo-text" />
                                </MDBCol>
                                <MDBCol xl="10" md="11" size="10">
                                  <h5 className="font-weight-bold mb-3">Technology</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
                                    enim ad minima veniam, quis nostrum exercitationem ullam.
                                    Reprehenderit maiores aperiam assumenda deleniti hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                              <MDBRow className="mb-3">
                                <MDBCol size="1">
                                  <MDBIcon icon="share" size="lg" className="indigo-text" />
                                </MDBCol>
                                <MDBCol xl="10" md="11" size="10">
                                  <h5 className="font-weight-bold mb-3">Finance</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
                                    enim ad minima veniam, quis nostrum exercitationem ullam.
                                    Reprehenderit maiores aperiam assumenda deleniti hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                            </MDBCol>
                          </MDBRow>
                        </section>
                    );
                  }

                  export default FeaturesPage;
              
        
    

        
            
                  import React from "react";
                  import {  MDBRow, MDBCol, MDBIcon } from "mdbreact";

                  const FeaturesPage = () => {
                    return (
                      <section className="my-5">
                          <h2 className="h1-responsive font-weight-bold text-center my-5">
                            Why is it so great?
                          </h2>
                          <p className="lead grey-text w-responsive text-center mx-auto mb-5">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                            ad minim veniam.
                          </p>

                          <MDBRow>
                            <MDBCol md="4">
                              <MDBRow className="mb-3">
                                <MDBCol size="2">
                                  <MDBIcon
                                    icon="flag-checkered"
                                    size="2x"
                                    className="deep-purple-text"
                                  />
                                </MDBCol>
                                <MDBCol size="10">
                                  <h5 className="font-weight-bold mb-3">International</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                    hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                              <MDBRow className="mb-3">
                                <MDBCol size="2">
                                  <MDBIcon icon="flask" size="2x" className="deep-purple-text" />
                                </MDBCol>
                                <MDBCol size="10">
                                  <h5 className="font-weight-bold mb-3">Experimental</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                    hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                              <MDBRow className="mb-3">
                                <MDBCol size="2">
                                  <MDBIcon icon="glass-martini" size="2x" className="deep-purple-text" />
                                </MDBCol>
                                <MDBCol size="10">
                                  <h5 className="font-weight-bold mb-3">Relaxing</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                    hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                            </MDBCol>
                            <MDBCol md="4" className="text-name">
                              <img
                                className="img-fluid"
                                src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.webp"
                                alt=""
                              />
                            </MDBCol>
                            <MDBCol md="4">
                              <MDBRow className="mb-3">
                                <MDBCol size="2">
                                  <MDBIcon icon="heart" size="2x" className="deep-purple-text" />
                                </MDBCol>
                                <MDBCol size="10">
                                  <h5 className="font-weight-bold mb-3">Beloved</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                    hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                              <MDBRow className="mb-3">
                                <MDBCol size="2">
                                  <MDBIcon icon="bolt" size="2x" className="deep-purple-text" />
                                </MDBCol>
                                <MDBCol size="10">
                                  <h5 className="font-weight-bold mb-3">Rapid</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                    hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                              <MDBRow className="mb-3">
                                <MDBCol size="2">
                                  <MDBIcon icon="magic" size="2x" className="deep-purple-text" />
                                </MDBCol>
                                <MDBCol size="10">
                                  <h5 className="font-weight-bold mb-3">Magical</h5>
                                  <p className="grey-text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                    hic.
                                  </p>
                                </MDBCol>
                              </MDBRow>
                            </MDBCol>
                          </MDBRow>
                        </section>
                    );
                  }

                  export default FeaturesPage;