Tabs does not look like in the documentation

The result look like this

https://drive.google.com/open?id=1mJY9T8VRTkIKCUnc8qk9oY49c7wposVg

maybe I forgot an enclosing element?

package.json

{
"name": "quickstart-angular5",
"version": "5.1.2",
"license": "custom",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"aot:build": "ng build --prod --sm=false --aot=true --output-path=dist",
"pre-commit": "ng lint"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/animations": "5.0.0 - 5.2.1",
"@angular/common": "5.0.0 - 5.2.1",
"@angular/compiler": "5.0.0 - 5.2.1",
"@angular/core": "5.0.0 - 5.2.1",
"@angular/forms": "5.0.0 - 5.2.1",
"@angular/http": "5.0.0 - 5.2.1",
"@angular/platform-browser": "5.0.0 - 5.2.1",
"@angular/platform-browser-dynamic": "5.0.0 - 5.2.1",
"@angular/router": "5.0.0 - 5.2.1",
"angular2-uuid": "^1.1.1",
"chart.js": "2.5.x",
"classlist.js": "1.1.x",
"core-js": "2.4.x",
"del": "3.0.x",
"easy-pie-chart": "2.1.x",
"font-awesome": "4.7.x",
"gulp": "^3.9.1",
"gulp-rename": "1.2.x",
"gulp-run": "1.7.x",
"hammerjs": "2.0.x",
"ng-html-util": "1.0.x",
"ngm-cli": "0.5.x",
"rxjs": "^5.5.2",
"screenfull": "3.3.x",
"smoothscroll-polyfill": "0.3.x",
"web-animations-js": "2.3.x",
"zone.js": "0.8.x"
},
"devDependencies": {
"@angular/cli": "1.5.0 - 1.6.5",
"@angular/compiler-cli": "5.0.0 - 5.2.1",
"@angular/language-service": "5.0.0 - 5.2.1",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.85",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.5.0",
"webpack": "3.x"
}
}

component.html:

<!-- Nav tabs -->
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-3 indigo'" [contentClass]="''">
<!--Panel 1-->
<mdb-tabheading="<i class='fa fa-user'></i> Profile">
<divclass="row">
<divclass="col-12">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
</div>
</mdb-tab>
<!--Panel 2-->
<mdb-tabheading="<i class='fa fa-heart'></i> Follow">
<divclass="row">
<divclass="col-12">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
</div>
</mdb-tab>
<!--Panel 3-->
<mdb-tabheading="<i class='fa fa-envelope'></i> Mail">
<divclass="row">
<divclass="col-12">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
</div>
</mdb-tab>
</mdb-tabset>