web
mobile

React Bootstrap E-commerce components MDB Pro component

React E-commerce components - Bootstrap 4 & Material Design

React e-commerce components is a set of components which are necessary to build online stores and any other e-commerce businesses.


Product card v.1

Shoes

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.


        import React from "react";
        import { MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBTooltip, MDBCardFooter, MDBIcon, MDBBtn } from "mdbreact";

        const eCommercePage = () => {
          return (
            <MDBCard className="m-2" style={{ width: "22rem" }} cascade ecommerce wide>
              <MDBCardImage
                cascade
                top
                src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(2).jpg"
                waves
              />
              <MDBCardBody cascade className="text-center">
                <MDBCardTitle tag="h5">Category</MDBCardTitle>
                <MDBCardTitle>
                  <a href="#!">
                    <strong>Product name</strong>
                  </a>
                </MDBCardTitle>
                <MDBCardText>
                  Temporibus autem quibusdam et aut officiis debitis aut rerum
                  necessitatibus saepe eveniet ut et voluptates.
                </MDBCardText>
                <MDBCardFooter>
                  <span className="float-left">49$</span>
                  <span className="float-right">
                    <MDBTooltip placement="top">
                      <MDBBtn tag="a" href="https://mdbootstrap.com" target="_blank" color="transparent" size="lg" className="p-1 m-0 mr-2 z-depth-0" >
                          <MDBIcon icon="share-alt"/>
                      </MDBBtn>
                      <div>Share</div>
                    </MDBTooltip>
                    <MDBTooltip placement="top">
                      <MDBBtn tag="a" color="transparent" size="lg" className="p-1 m-0 z-depth-0" >
                        <MDBIcon icon="heart" className="red-text"/>
                      </MDBBtn>
                      <div>Added to Wishlist</div>
                    </MDBTooltip>
                  </span>
                </MDBCardFooter>
              </MDBCardBody>
            </MDBCard>
          );
        };

        export default eCommercePage;
      

Product card v.2

Category

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.


        import React from "react";
        import { MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBTooltip, MDBCardFooter, MDBBtn, MDBIcon} from "mdbreact";

        const eCommercePage = () => {
          return (
            <MDBCard className="m-2" style={{ width: "22rem" }} cascade ecommerce narrow>
              <MDBCardImage cascade top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(5).jpg" waves />
              <MDBCardBody cascade className="text-center">
                <MDBCardTitle tag="h5">
                  Shoes
                </MDBCardTitle>
                <MDBCardTitle>
                  <a href="#!"><strong>Product name</strong></a>
                </MDBCardTitle>
                <MDBCardText>
                  Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                  eveniet ut et voluptates. Temporibus autem quibusdam. Lorem Ipsum dolor ament.
                </MDBCardText>
                <MDBCardFooter>
                  <span className="float-left">49$</span>
                  <span className="float-right">
                    <MDBTooltip placement="top">
                      <MDBBtn tag="a" href="https://mdbootstrap.com" target="_blank" color="transparent" size="lg" className="p-1 m-0 mr-2 z-depth-0" >
                          <MDBIcon icon="eye"/>
                      </MDBBtn>
                      <div>Quick Look</div>
                    </MDBTooltip>
                    <MDBTooltip placement="top">
                      <MDBBtn tag="a" color="transparent" size="lg" className="p-1 m-0 z-depth-0" >
                        <MDBIcon icon="heart"/>
                      </MDBBtn>
                      <div>Added to Wishlist</div>
                    </MDBTooltip>
                  </span>
                </MDBCardFooter>
              </MDBCardBody>
            </MDBCard>
          );
        }

        export default eCommercePage;
      

Product card v.3

Category

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.


        import React from "react";
        import { MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBTooltip, MDBCardFooter, MDBBtn, MDBIcon } from "mdbreact";

        const eCommercePage = () => {
          return (
            <MDBCard className="m-2" style={{ width: "22rem" }} cascade ecommerce>
              <MDBCardImage cascade top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.jpg" waves />
              <MDBCardBody cascade className="text-center">
                <MDBCardTitle tag="h5">
                  Shoes
                </MDBCardTitle>
                <MDBCardTitle>
                  <a href="#!"><strong>Product name</strong></a>
                </MDBCardTitle>
                <MDBCardText>
                  Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                  eveniet ut et voluptates. Temporibus autem quibusdam. Lorem Ipsum dolor ament.
                </MDBCardText>
                <MDBCardFooter>
                  <span className="float-left">49$ <span className="discount">199$</span></span>
                  <span className="float-right">
                  <MDBTooltip placement="top">
                      <MDBBtn tag="a" color="transparent" size="lg" className="p-1 m-0 z-depth-0" >
                        <MDBIcon icon="heart"/>
                      </MDBBtn>
                      <div>Added to Wishlist</div>
                    </MDBTooltip>
                  </span>
                </MDBCardFooter>
              </MDBCardBody>
            </MDBCard>
          );
        }

        export default eCommercePage;
      

Product card v.4

Category

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.


        import React from "react";
        import { MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBTooltip, MDBCardFooter, MDBIcon, MDBBtn} from
        "mdbreact";

        const eCommercePage = () => {
          return (
            <MDBCard className="m-2" style={{ width: "22rem" }} cascade ecommerce wide>
              <MDBCardImage cascade top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(4).jpg" waves />
              <MDBCardBody cascade className="text-center">
                <MDBCardTitle tag="h5">
                  Shoes
                </MDBCardTitle>
                <MDBCardTitle>
                  <a href="#!"><strong>Product name</strong></a>
                </MDBCardTitle>
                <ul className="rating">
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                </ul>
                <MDBCardText>
                  Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                  eveniet ut et voluptates. Temporibus autem quibusdam. Lorem Ipsum dolor ament.
                </MDBCardText>
                <MDBCardFooter>
                  <span className="float-left">49$</span>
                  <span className="float-right">
                  <MDBTooltip placement="top">
                      <MDBBtn tag="a" href="https://mdbootstrap.com" target="_blank" color="transparent" size="lg" className="p-1 m-0 mr-2 z-depth-0" >
                          <MDBIcon icon="share-alt"/>
                      </MDBBtn>
                      <div>Share</div>
                    </MDBTooltip>
                    <MDBTooltip placement="top">
                      <MDBBtn tag="a" color="transparent" size="lg" className="p-1 m-0 z-depth-0" >
                        <MDBIcon icon="heart" className="red-text"/>
                      </MDBBtn>
                      <div>Added to Wishlist</div>
                    </MDBTooltip>
                  </span>
                </MDBCardFooter>
              </MDBCardBody>
            </MDBCard>
          );
        }

        export default eCommercePage;
      

Product card v.5

Shoes

Product name

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.


        import React from "react";
        import { MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBTooltip, MDBCardFooter, MDBIcon, MDBBtn} from
        "mdbreact";

        const eCommercePage = () => {
          return (
            <MDBCard className="m-2" style={{ width: "22rem" }} cascade ecommerce wide>
              <MDBCardImage cascade top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).jpg"
                waves />
              <MDBCardBody cascade className="text-center">
                <MDBCardTitle tag="h5">
                  Shoes
                </MDBCardTitle>
                <MDBCardTitle>
                  <a href="#!"><strong>Product name</strong></a>
                </MDBCardTitle>
                <ul className="rating">
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                  <li>
                    <MDBIcon icon="star" />
                  </li>
                  <li>
                    <MDBIcon className="far" icon="star" />
                  </li>
                </ul>
                <MDBCardText>
                  Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                  eveniet ut et voluptates. Temporibus autem quibusdam. Lorem Ipsum dolor ament.
                </MDBCardText>
                <MDBCardFooter>
                  <span className="float-left">49$</span>
                  <span className="float-right">
                    <MDBTooltip placement="top">
                      <MDBBtn tag="a" color="transparent" size="lg" className="p-1 m-0 mr-2 z-depth-0" >
                          <MDBIcon icon="shopping-cart"/>
                      </MDBBtn>
                      <div>Add to Cart</div>
                    </MDBTooltip>
                    <MDBTooltip placement="top">
                      <MDBBtn tag="a" href="https://mdbootstrap.com" target="_blank" color="transparent" size="lg" className="p-1 m-0 mr-2 z-depth-0" >
                          <MDBIcon icon="share-alt"/>
                      </MDBBtn>
                      <div>Share</div>
                    </MDBTooltip>
                    <MDBTooltip placement="top">
                      <MDBBtn tag="a" color="transparent" size="lg" className="p-1 m-0 z-depth-0" >
                        <MDBIcon icon="heart" className="red-text"/>
                      </MDBBtn>
                      <div>Added to Wishlist</div>
                    </MDBTooltip>
                  </span>
                </MDBCardFooter>
              </MDBCardBody>
            </MDBCard>
          );
        }

        export default eCommercePage;
      

Collection cards


        import React from "react";
        import { MDBCard, MDBCardImage, MDBIcon} from "mdbreact";

        const eCommercePage = () => {
          return (
            <MDBCard className="mx-4" style={{ width: "20rem" }} collection>
              <MDBCardImage className="img-fluid" zoom src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(5).jpg" />
              <div className="stripe light">
                <a href="#!">
                  <p>Title
                    <MDBIcon icon="chevron-right" />
                  </p>
                </a>
              </div>
            </MDBCard>
          );
        }

        export default eCommercePage;
      

Dark version


        import React from "react";
        import { MDBCard, MDBCardImage, MDBIcon} from "mdbreact";

        const eCommercePage = () => {
          return (
            <MDBCard className="mx-4" style={{ width: "20rem" }} collection>
              <MDBCardImage className="img-fluid" zoom src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(5).jpg" />
              <div className="stripe dark">
                <a href="#!">
                  <p>Title
                    <MDBIcon icon="chevron-right" />
                  </p>
                </a>
              </div>
            </MDBCard>
          );
        }

        export default eCommercePage;
      

Shopping Cart Table

Product Color Price QTY Amount
iPhone

Apple

White $800 $800
Headphones

Sony

Red $200 $600
iPad Pro

Apple

Gold $600 $1200

Total

$2600



        import React, { Component } from "react";
        import { MDBRow, MDBCard, MDBCardBody, MDBTooltip, MDBTable, MDBTableBody, MDBTableHead, MDBInput, MDBBtn } from "mdbreact";

        class eCommercePage extends Component {
        state = {
          data: [
              {
                src: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.jpg",
                title: "iPhone",
                subTitle: "Apple",
                color: "White",
                price: "800",
                qty: "2"
              },
              {
                src: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/6.jpg",
                title: "Headphones",
                subTitle: "Sony",
                color: "Red",
                price: "200",
                qty: "2"
              },
              {
                src: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/1.jpg",
                title: "iPad Pro",
                subTitle: "Apple",
                color: "Gold",
                price: "600",
                qty: "1"
              },
            ],
            columns: [
              {
                label: '',
                field: 'img',
              },
              {
                label: <strong>Product</strong>,
                field: 'product'
              },
              {
                label: <strong>Color</strong>,
                field: 'color'
              },
              {
                label: <strong>Price</strong>,
                field: 'price'
              },
              {
                label: <strong>QTY</strong>,
                field: 'qty'
              },
              {
                label: <strong>Amount</strong>,
                field: 'amount'
              },
              {
                label: '',
                field: 'button'
              }
          ]
        }

        render() {

            const rows = [];
            const { columns, data } = this.state;

            data.map(row => {
              return rows.push(
                {
                'img': <img src={row.src} alt="" className="img-fluid z-depth-0" />,
                'product': [<h5 className="mt-3" key={new Date().getDate + 1}><strong>{row.title}</strong></h5>, <p key={new
                  Date().getDate} className="text-muted">{row.subTitle}</p>],
                'color': row.color,
                'price': `$${row.price}`,
                'qty':
                <MDBInput type="number" default={row.qty} className="form-control" style={{ width: "100px" }} />,
                'amount': <strong>${row.qty * row.price}</strong>,
                'button':
                <MDBTooltip placement="top">
                    <MDBBtn color="primary" size="sm">
                        X
                    </MDBBtn>
                    <div>Remove item</div>
                </MDBTooltip>
                }
              )
            });

            return (
            <MDBRow className="my-2" center>
              <MDBCard className="w-100">
                <MDBCardBody>
                  <MDBTable className="product-table">
                    <MDBTableHead className="font-weight-bold" color="mdb-color lighten-5" columns={columns} />
                    <MDBTableBody rows={rows} />
                  </MDBTable>
                </MDBCardBody>
              </MDBCard>
            </MDBRow>
            );
          }
        }

        export default eCommercePage;
      

Checkout panel

@
Please select a valid country.
Please provide a valid state.
Zip code required.


Second sample image
Additional premium support

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti, dolorem.


Second sample image
MDB Membership

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti, dolorem.


Full name as displayed on card
Name on card is required
Credit card number is required
Expiration date required
Security code required

Summary


MDBootstrap UI KIT (jQuery version) - License 6-10 poeple + unlimited projects
$ 2000

Premium support - 2 years
$ 2000

MDB Membership - 2 years
$ 2000

Total
$ 2000


        import React, { Component } from "react";
        import { MDBContainer, MDBCol, MDBRow, MDBCard, MDBCardBody, MDBBtn, MDBNav, MDBNavItem, MDBNavLink, MDBTabPane,
        MDBTabContent, MDBSelect, MDBSelectInput, MDBSelectOption, MDBSelectOptions } from "mdbreact";

        class eCommercePage extends Component {
        state={
          activePill: "1",
        }

        togglePills = tab => {
          if (this.state.activePill !== tab) {
            this.setState({
              ctivePill: tab
            });
          }
        }

        selectNextTab = () => {
          this.setState({
            activePill: (+this.state.activePill + 1).toString()
          });
        }

        render() {
          const { activePill } = this.state;

        return (
            <MDBContainer>
              <MDBRow className="my-2" center>
                <MDBCard className="w-100">
                  <MDBCardBody>
                    <MDBRow>
                      <MDBCol lg="8" className="mb-4">
                        <MDBNav pills color="primary" className="nav-justified">
                          <MDBNavItem>
                            <MDBNavLink to="#" className={activePill==="1" ? "active" : "" } onClick={()=> this.togglePills("1")}
                              >
                              <strong>1. Billing</strong>
                            </MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#" className={activePill==="2" ? "active" : "" } onClick={()=> this.togglePills("2")}
                              >
                              <strong>2. Addons</strong>
                            </MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#" className={activePill==="3" ? "active" : "" } onClick={()=> this.togglePills("3")}
                              >
                              <strong>3. Payment</strong>
                            </MDBNavLink>
                          </MDBNavItem>
                        </MDBNav>
                        <MDBTabContent className="pt-4" activeItem={activePill}>
                          <MDBTabPane tabId="1">
                            <form>
                              <MDBRow>
                                <MDBCol md="6" className="mb-4">
                                  <label htmlFor="firstName">First name</label>
                                  <input type="text" id="firstName" className="form-control" />
                                </MDBCol>
                                <MDBCol md="6" className="mb-2">
                                  <label htmlFor="lastName">Last name</label>
                                  <input type="text" id="lastName" className="form-control" />
                                </MDBCol>
                                <MDBCol>
                                  <div className="input-group mb-4">
                                    <div className="input-group-prepend">
                                      <span className="input-group-text" id="basic-addon1">@</span>
                                    </div>
                                    <input type="text" className="form-control py-0" placeholder="Username" aria-describedby="basic-addon1" />
                                  </div>
                                  <label htmlFor="email">Email (optional)</label>
                                  <input type="text" id="email" className="form-control mb-4" placeholder="youremail@example.com" />
                                  <label htmlFor="address">Address</label>
                                  <input type="text" id="address" className="form-control mb-4" placeholder="1234 Main St" />
                                  <label htmlFor="address-2">Address 2 (optional)</label>
                                  <input type="text" id="address-2" className="form-control mb-4" placeholder="Apartment or suite" />
                                </MDBCol>
                              </MDBRow>
                              <MDBRow>
                                <MDBCol lg="4" md="12" className="mb-4">
                                  <label htmlFor="country">Country</label>
                                  <select className="custom-select d-block w-100" id="country" required>
                                    <option>Choose...</option>
                                    <option>United States</option>
                                  </select>
                                  <div className="invalid-feedback">
                                    Please select a valid country.
                                  </div>
                                </MDBCol>
                                <MDBCol lg="4" md="6" className="mb-4">
                                  <label htmlFor="state">State</label>
                                  <select className="custom-select d-block w-100" id="state" required>
                                    <option>Choose...</option>
                                    <option>California</option>
                                  </select>
                                  <div className="invalid-feedback">
                                    Please provide a valid state.
                                  </div>
                                </MDBCol>
                                <MDBCol lg="4" md="6" className="mb-4">
                                  <label htmlFor="zip">Zip</label>
                                  <input type="text" className="form-control" id="zip" required />
                                  <div className="invalid-feedback">
                                    Zip code required.
                                  </div>
                                </MDBCol>
                              </MDBRow>
                              <hr />
                              <div className="mb-1">
                                <input type="checkbox" className="form-check-input filled-in" id="chekboxRules" />
                                <label className="form-check-label" htmlFor="chekboxRules">I accept the terms and conditions</label>
                              </div>
                              <div className="mb-1">
                                <input type="checkbox" className="form-check-input filled-in" id="safeTheInfo" />
                                <label className="form-check-label" htmlFor="safeTheInfo">Save this information for next time</label>
                              </div>
                              <div className="mb-1">
                                <input type="checkbox" className="form-check-input filled-in" id="subscribeNewsletter" />
                                <label className="form-check-label" htmlFor="subscribeNewsletter">Subscribe to the newsletter</label>
                              </div>
                              <hr />
                              <MDBBtn color="primary" size="lg" block onClick={this.selectNextTab}>Next step</MDBBtn>
                            </form>
                          </MDBTabPane>
                          <MDBTabPane tabId="2">
                            <MDBRow>
                              <MDBCol md="5" className="mb-4">
                                <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="" className="img-fluid z-depth-1-half" />
                              </MDBCol>
                              <MDBCol md="7" className="mb-4">
                                <h5 className="mb-3 h5">Additional premium support</h5>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti,
                                  dolorem.</p>
                                <MDBSelect>
                                  <MDBSelectInput selected="Choose your option" />
                                  <MDBSelectOptions>
                                    <MDBSelectOption disabled>Choose a period of time</MDBSelectOption>
                                    <MDBSelectOption value="1">+6 months : 200$</MDBSelectOption>
                                    <MDBSelectOption value="2">+12 months: 400$</MDBSelectOption>
                                    <MDBSelectOption value="3">+18 months: 800$</MDBSelectOption>
                                    <MDBSelectOption value="3">+24 months: 1200$</MDBSelectOption>
                                  </MDBSelectOptions>
                                </MDBSelect>
                                <MDBBtn color="primary">Add premium support to the cart</MDBBtn>
                              </MDBCol>
                            </MDBRow>
                            <hr className="mb-5" />
                            <MDBRow>
                              <MDBCol md="5" className="mb-4">
                                <img src="https://mdbootstrap.com/img/Photos/Others/images/44.jpg" alt="" className="img-fluid z-depth-1-half" />
                              </MDBCol>
                              <MDBCol md="7" className="mb-4">
                                <h5 className="mb-3 h5">MDB Membership</h5>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti,
                                  dolorem.</p>
                                <MDBSelect>
                                  <MDBSelectInput selected="Choose your option" />
                                  <MDBSelectOptions>
                                    <MDBSelectOption disabled>Choose a period of time</MDBSelectOption>
                                    <MDBSelectOption value="1">+6 months : 200$</MDBSelectOption>
                                    <MDBSelectOption value="2">+12 months: 400$</MDBSelectOption>
                                    <MDBSelectOption value="3">+18 months: 800$</MDBSelectOption>
                                    <MDBSelectOption value="3">+24 months: 1200$</MDBSelectOption>
                                  </MDBSelectOptions>
                                </MDBSelect>
                                <MDBBtn color="primary">Add MDB Membership to the cart</MDBBtn>
                              </MDBCol>
                            </MDBRow>
                            <hr className="mb-4" />
                            <MDBBtn color="primary" size="lg" block onClick={this.selectNextTab}>Next step</MDBBtn>
                          </MDBTabPane>
                          <MDBTabPane tabId="3">
                            <div className="d-block my-3">
                              <div className="mb-2">
                                <input name="group2" type="radio" className="form-check-input with-gap" id="radioWithGap4" required />
                                <label className="form-check-label" htmlFor="radioWithGap4">Credit card</label>
                              </div>
                              <div className="mb-2">
                                <input iname="group2" type="radio" className="form-check-input with-gap" id="radioWithGap5"
                                  required />
                                <label className="form-check-label" htmlFor="radioWithGap5">Debit card</label>
                              </div>
                              <div className="mb-2">
                                <input name="group2" type="radio" className="form-check-input with-gap" id="radioWithGap6" required />
                                <label className="form-check-label" htmlFor="radioWithGap6">Paypal</label>
                              </div>
                              <MDBRow>
                                <MDBCol md="6" className="mb-3">
                                  <label htmlFor="cc-name123">Name on card</label>
                                  <input type="text" className="form-control" id="cc-name123" required />
                                  <small className="text-muted">Full name as displayed on card</small>
                                  <div className="invalid-feedback">
                                    Name on card is required
                                  </div>
                                </MDBCol>
                                <MDBCol md="6" className="mb-3">
                                  <label htmlFor="cc-number123">Credit card number</label>
                                  <input type="text" className="form-control" id="cc-number123" required />
                                  <div className="invalid-feedback">
                                    Credit card number is required
                                  </div>
                                </MDBCol>
                              </MDBRow>
                              <MDBRow>
                                <MDBCol md="3" className="mb-3">
                                  <label htmlFor="cc-name123">Expiration</label>
                                  <input type="text" className="form-control" id="cc-name123" required />
                                  <div className="invalid-feedback">
                                    Name on card is required
                                  </div>
                                </MDBCol>
                                <MDBCol md="3" className="mb-3">
                                  <label htmlFor="cc-cvv123">CVV</label>
                                  <input type="text" className="form-control" id="cc-cvv123" required />
                                  <div className="invalid-feedback">
                                    Security code required
                                  </div>
                                </MDBCol>
                              </MDBRow>
                              <hr className="mb-4" />
                              <MDBBtn color="primary" size="lg" block>Place order</MDBBtn>
                            </div>
                          </MDBTabPane>
                        </MDBTabContent>
                      </MDBCol>
                      <MDBCol lg="4" className="mb-4">
                        <MDBBtn color="primary" size="lg" block>
                          Place order
                        </MDBBtn>
                        <MDBCard>
                          <MDBCardBody>
                            <h4 className="mb-4 mt-1 h5 text-center font-weight-bold">Summary</h4>
                            <hr />
                            <MDBRow>
                              <MDBCol sm="8">
                                MDBootstrap UI KIT (jQuery version) - License 6-10 poeple + unlimited projects
                              </MDBCol>
                              <MDBCol sm="4">
                                $ 2000
                              </MDBCol>
                            </MDBRow>
                            <hr />
                            <MDBRow>
                              <MDBCol sm="8">
                                Premium support - 2 years
                              </MDBCol>
                              <MDBCol sm="4">
                                $ 200
                              </MDBCol>
                            </MDBRow>
                            <hr />
                            <MDBRow>
                              <MDBCol sm="8">
                                MDB Membership - 2 years
                              </MDBCol>
                              <MDBCol sm="4">
                                $ 100
                              </MDBCol>
                            </MDBRow>
                            <hr />
                            <MDBRow>
                              <MDBCol sm="8">
                                <strong>Total</strong>
                              </MDBCol>
                              <MDBCol sm="4">
                                <strong>$ 2300</strong>
                              </MDBCol>
                            </MDBRow>
                          </MDBCardBody>
                        </MDBCard>
                      </MDBCol>
                    </MDBRow>
                  </MDBCardBody>
                </MDBCard>
              </MDBRow>
            </MDBContainer>
            );
          }
        }

        export default eCommercePage;