first dist, demo, bootstrap upgrade

buttons docs fulfilled

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}

.browserslistrc

@@ -0,0 +1,11 @@
+>= 1%
+last 1 major version
+not dead
+Chrome >= 60
+Firefox >= 60
+Edge >= 15.15063
+Explorer 11
+iOS >= 10
+Safari >= 10
+Android >= 6
+not ExplorerMobile <= 11

.dependabot/config.yml

@@ -0,0 +1,11 @@
+# https://dependabot.com/docs/config-file/
+version: 1
+update_configs:
+  - package_manager: "javascript"
+    directory: "/"
+    update_schedule: "weekly"
+    default_reviewers:
+      - "codecalm"
+    default_labels:
+      - "dependencies"
+    version_requirement_updates: "increase_versions"

.editorconfig

@@ -1,22 +1,23 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs.
-# editorconfig.org
-
-root = true
-
 [*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=true
+indent_style=space
+indent_size=2
 
-# We recommend you to keep these unchanged.
-charset = utf-8
-end_of_line = lf
-indent_size = 4
-indent_style = tab
-insert_final_newline = true
-trim_trailing_whitespace = true
+[*.svg]
+indent_style=tab
+tab_width=3
 
-[package.json]
-indent_style = space
-indent_size = 2
+[*.html]
+indent_style=tab
+indent_size=3
+insert_final_newline=false
 
 [*.md]
-trim_trailing_whitespace = false
+indent_style=tab
+tab_width=3
+
+[*.js.map]
+indent_style=tab
+indent_size=3

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "rules": {
+    "semi": ["error", "always"],
+    "quotes": ["error", "single"],
+    "no-var": ["error"]
+  },
+  "parserOptions": {
+    "ecmaVersion": 6
+  }
+}

.gitattributes

@@ -0,0 +1,15 @@
+# Enforce Unix newlines
+*.css   text eol=lf
+*.html  text eol=lf
+*.js    text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+*.rb    text eol=lf
+*.scss  text eol=lf
+*.svg   text eol=lf
+*.txt   text eol=lf
+*.xml   text eol=lf
+*.yml   text eol=lf
+
+# Don't diff or textually merge source maps
+*.map   binary

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+github: codecalm
+open_collective: tabler

.github/no-response.yml

@@ -0,0 +1,10 @@
+# Configuration for probot-no-response - https://github.com/probot/no-response
+
+daysUntilClose: 28
+
+closeComment: >
+  This issue has been automatically closed because there has been no response
+  to our request for more information from the original author. With only the
+  information that is currently in the issue, we don't have enough information
+  to take action. Please reach out if you have or find the answers we need so
+  that we can investigate further.

.gitignore

@@ -1,18 +1,21 @@
+node_modules/
+/package-lock.json
 .idea/
-_site/
-/Gemfile.lock
-/node_modules/
-/.sass-cache/
-/.jekyll-metadata
-/.asset-cache/
+/db.json
+.jekyll-metadata
+.jekyll-cache
+tmp/
+/yarn.lock
 .DS_Store
-package-lock.json
-/_test/
-src/assets/css/dashboard.css
-src/assets/css/dashboard.min.css
-src/assets/plugins/**/plugin.css
-src/assets/plugins/**/plugin.min.css
-generated-site
-deploy-site
-/commits.sh
-/assets/css/
+/Gemfile.lock
+/_site/
+/.cache/
+
+.vscode/
+
+/_gh_pages/
+/site/docs/**/dist/
+/site/static/**/dist/
+/resources/
+/svg-tmp/
+/components/

.stylelintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "stylelint-config-twbs-bootstrap/scss"
+  ],
+  "rules": {
+    "selector-no-qualifying-type": null
+  }
+}

CODE_OF_CONDUCT.md

@@ -1,46 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at codecalm@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -1,92 +0,0 @@
-# Contributing
-
-When contributing to this repository, please first discuss the change you wish to make via issue,
-email, or any other method with the owners of this repository before making a change. 
-
-Please note we have a code of conduct, please follow it in all your interactions with the project.
-
-## Pull Request Process
-
-1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
-   build.
-2. Update the README.md with details of changes to the interface, this includes new environment 
-   variables, exposed ports, useful file locations and container parameters.
-3. Increase the version numbers in any examples files and the README.md to the new version that this
-   Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
-4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
-   do not have permission to do that, you may request the second reviewer to merge it for you.
-
-## Code of Conduct
-
-### Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of experience,
-nationality, personal appearance, race, religion, or sexual identity and
-orientation.
-
-### Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-### Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-### Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-### Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team. All complaints will be reviewed and 
-investigated and will result in a response that is deemed necessary and appropriate 
-to the circumstances. The project team is obligated to maintain confidentiality 
-with regard to the reporter of an incident. Further details of specific 
-enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-### Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/

Gemfile

@@ -1,7 +1,13 @@
-source 'https://rubygems.org' do
-  gem 'jekyll-tidy'
+source "https://rubygems.org"
+
+gem "jekyll"
+
+group :jekyll_plugins do
+  gem "jekyll-random"
+  gem "jekyll-tidy"
+  gem "jekyll-timeago"
   gem 'jekyll-redirect-from'
-  gem 'jekyll-toc'
-  gem 'jekyll-random'
-  gem 'public_suffix', '3.0.0'
+  gem 'jekyll-include-cache'
 end
+
+gem 'wdm', '>= 0.1.1' if Gem.win_platform?

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Paweł Kuna
+Copyright (c) 2018-2019 The Tabler Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

PULL_REQUEST_TEMPLATE.md

@@ -1,10 +0,0 @@
-## Description
-<!--- Describe your changes in detail -->
-
-## Screenshots (if appropriate):
-
-## Types of changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to change)

README.md

@@ -1,85 +1,68 @@
-<p align="center">
-  <a href="https://tabler.github.io/">
-    <img src="https://tabler.github.io/assets/images/logo-default.svg" alt="Tabler" width="72" height="72">
-  </a>
-</p>
+# Tabler
 
-<h3 align="center">Tabler - Admin panel made simple</h3>
+Premium and Open Source dashboard template with responsive and high-quality UI.
 
-<p align="center">
-Premium and Open Source dashboard template with responsive and high quality UI. For Free!
-</p>
+👉 [Become a sponsor to Tabler](https://github.com/sponsors/codecalm) 🚀
 
-<p align="center">
-	<strong>
-	  <a href="https://tabler.github.io/demo/">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a>
-	</strong>
-</p>
+<br><br><br>
 
-<p align="center">
-    <a href="https://www.npmjs.com/package/tabler-ui"><img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a>
-    <a href="https://david-dm.org/tabler/tabler?type=dev"><img src="https://img.shields.io/david/dev/tabler/tabler.svg" alt="devDependency Status"></a>
-</p>
+[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
+ [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
 
 
+<strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://goo.gl/zJP2dT">Join us on Slack</a></strong>
 
-![Tabler preview](https://tabler.github.io/assets/images/dashboard.png)
+![Tabler preview](https://raw.githubusercontent.com/tabler/tabler/dev/static/img/tabler-preview.png)
 
-----------
+## Status
 
-## About Tabler
+<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
 
-We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+## Features
 
-After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
-They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
+We created this admin panel for everyone who wants to create any templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
 
-To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.
+* **Responsive:** With support for mobile, tablet and desktop it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
+* **Cross Browser:** Our theme works perfectly with Latest Chrome, Firefox+, Latest Safari, Opera, Edge and mobile browsers. We work hard to continuously support them.
+* **HTML5 & CSS3:** We only use modern web technologies like HTML5 and CSS3. Our theme includes some subtle CSS3 animations so you will get anyone’s attention.
+* **Clean Code:** We strictly followed Bootstrap’s guidelines to make your integration as easy as possible. All code is handwritten and W3C valid.
+* **Demo pages**: Tabler features over 20 individual pages featuring various components, giving you the freedom to choose and combine. All components can take variation in color and styling that can easily be modified using Sass. The sky is the limit!
+* **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
 
-## Documentation
+## Setup environment
 
-For full documentation, visit [tabler.github.io/tabler/docs](https://tabler.github.io/tabler/docs/index.html).
+To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow these steps:
 
-## Getting Started
-
-### [Download ZIP](https://github.com/tabler/tabler/archive/dev.zip) or Git Clone
-
-```
-git clone https://github.com/tabler/tabler.git
-```
-
-### Setup environment
-
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
-
-1. [Download and install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
+1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
 2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/), install [Bundler](https://bundler.io/) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
-   
-   **Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems.
-  
+3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/), recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
+4. [Install Bundler](https://bundler.io) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
+
+**Windows users**:
+1. [Install Git](https://git-scm.com/download/win) in `C:\\Program Files\\git\\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change default shell.
+2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/), recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
+3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
+
 When completed, you'll be able to run the various commands provided from the command line.
 
-### Build Tabler
+## Build locally
 
-1. From the root `/tabler` directory, run `npm run serve` in the command line.
-2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
-3. Any change in `/src` directory will build application and refresh the page.
+1. From the root `/tabler` directory, run `npm run start` in the command line.
+2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
+3. Any change in `/pages` directory will build application and refresh the page.
 
-**Warning!** all changes made in `_site/` folder would be overwritten on application build.
+**Note**:
+Run `npm run build` for reforms a one off build application without refresh.
+Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
+
+## Feature requests
+
+https://tabler.canny.io/feature-requests
 
 ## Bugs and feature requests
 
 Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
 
-## Browser Support
-
-![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)
---- | --- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
-
 ## Creators
 
 **Paweł Kuna**
@@ -88,6 +71,33 @@ Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
 - <https://github.com/codecalm>
 - <https://codecalm.net>
 
+## Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+<a href="https://github.com/tabler/tabler/graphs/contributors"><img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false"></a>
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/tabler#backer)]
+
+<a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/backers.svg?width=890"></a>
+
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/tabler#sponsor)]
+
+<a href="https://opencollective.com/tabler/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/tabler/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/sponsor/9/avatar.svg"></a>
+
 ## Copyright and license
 
 Code and documentation copyright 2018 the [Tabler Authors](https://github.com/tabler/tabler/graphs/contributors) and [codecalm.net](https://codecalm.net). Code released under the [MIT License](https://github.com/tabler/tabler/blob/master/LICENSE).

_config.yml

@@ -1,45 +1,28 @@
-title: Tabler
-description: tabler.github.io - a responsive, flat and full featured admin template
+source: pages
+destination: tmp
 
-source: src
+version: 1.0-alpha
+title: Tabler
+description: Premium and Open Source dashboard template with responsive and high quality UI.
+github_url: https://github.com/tabler/tabler
+
+debug: true
 
 plugins:
-  - jekyll-tidy
-  - jekyll-toc
-  - jekyll-random
+- jekyll-random
+- jekyll-tidy
+- jekyll-timeago
+- jekyll-redirect-from
+- jekyll-include-cache
 
 exclude:
-  - regenerate-images.sh
-  - .editorconfig
-  - buddy.yml
-  - package.json
-  - gulpfile.js
-  - start.sh
-  - Gemfile
-  - Gemfile.lock
-  - .git
-  - .idea
-  - .gitignore
-  - node_modules/
-  - .DS_Store
-  - .sass-cache/
-  - .asset-cache/
-  - assets/scss/*
-  - assets/plugins/**/*.scss
-  - push-to-repo.sh
-  - commits.sh
-
-collections:
-  docs:
-    output: true
-
-defaults:
-  - scope:
-      path: ""
-      type: docs
-    values:
-      layout: docs
+- .jekyll-cache
 
+keep_files:
+- css/ui-kit.css
+- css/dark.css
+- css/rtl.css
+#- js/ui-kit.js
 
 markdown: kramdown
 highlighter: rouge
@@ -51,176 +34,170 @@ kramdown:
     span:
       line_numbers: false
 
-toc:
-  min_level: 2
-  max_level: 3
-
 jekyll_tidy:
   compress_html: false
   ignore_env: development
 
-base_color: '#467fcf'
-github_url: https://github.com/tabler/tabler
 
-author:
-   name: codecalm.net
-   url: https://codecalm.net
+collections:
+  docs:
+    output: true
+  changelog:
+    output: false
+  components:
+    output: true
+
+defaults:
+  -
+    scope:
+      type: pages
+    values:
+      layout: default
+      nav-position: top
+  -
+    scope:
+      type: docs
+    values:
+      layout: docs
+      nav-position: top
+  -
+    scope:
+      type: components
+    values:
+      layout: component
 
-docs-menu:
-  - title: Getting started
-    pages: [index]
-  - title: Components
-    pages: [alerts, avatars, buttons, colors, cards, charts, form-components, tags, typography]
 
 colors:
-  blue: 
-    hex: '#467fcf'
-    name: Blue
-  azure: 
+  blue:
+    hex: '#206bc4'
+    title: Blue
+  azure:
     hex: '#45aaf2'
-    name: Azure
-  indigo: 
+    title: Azure
+  indigo:
     hex: '#6574cd'
-    name: Indigo
-  purple: 
+    title: Indigo
+  purple:
     hex: '#a55eea'
-    name: Purple
-  pink: 
+    title: Purple
+  pink:
     hex: '#f66d9b'
-    name: Pink
-  red: 
-    hex: '#e74c3c'
-    name: Red
-  orange: 
+    title: Pink
+  red:
+    hex: '#fa4654'
+    title: Red
+  orange:
     hex: '#fd9644'
-    name: Orange
-  yellow: 
+    title: Orange
+  yellow:
     hex: '#f1c40f'
-    name: Yellow
-  lime: 
+    title: Yellow
+  lime:
     hex: '#7bd235'
-    name: Lime
-  green: 
+    title: Lime
+  green:
     hex: '#5eba00'
-    name: Green
-  teal: 
+    title: Green
+  teal:
     hex: '#2bcbba'
-    name: Teal
-  cyan: 
+    title: Teal
+  cyan:
     hex: '#17a2b8'
-    name: Cyan
-  gray: 
+    title: Cyan
+  gray:
     hex: '#868e96'
-    name: Gray
-  gray-dark: 
-    hex: '#343a40'
-    name: Dark gray
+    title: Gray
 
-theme-colors:
-  primary: 
-    hex: '#467fcf'
-    name: Primary
-  secondary: 
-    hex: '#868e96'
-    name: Secondary
-  success: 
-    hex: '#38c172'
-    name: Success
-  info: 
-    hex: '#17a2b8'
-    name: Info
-  warning: 
-    hex: '#f8b700'
-    name: Warning
-  danger: 
-    hex: '#f90049'
-    name: Danger
-#  light:
-#    hex: '#f8f9fa'
-#    name: Light
-#  dark:
-#    hex: '#343a40'
-#    name: Dark
+variants:
+  - name: success
+    icon: check
+  - name: info
+    icon: info
+  - name: warning
+    icon: alert-triangle
+  - name: danger
+    icon: x-octagon
 
-color_variants:
-  - name: 'Darkest'
-    suffix: -darkest
-  - name: 'Darker'
-    suffix: -darker
-  - name: 'Dark'
-    suffix: -dark
-  - name: 'Default'
-    suffix: ''
-  - name: 'Light'
-    suffix: -light
-  - name: 'Lighter'
-    suffix: -lighter
-  - name: 'Lightest'
-    suffix: -lightest
+button-variants:
+  primary:
+    class: primary
+    title: Primary
+  secondary:
+    class: secondary
+    title: Secondary
+  success:
+    class: success
+    title: Success
+  warning:
+    class: warning
+    title: Warning
+  danger:
+    class: danger
+    title: Danger
+  info:
+    class: info
+    title: Info
+  light:
+    class: light
+    title: Light
+  dark:
+    class: dark
+    title: Dark
+  link:
+    class: link
+    title: Link
 
-social-buttons:
+button-states:
+  - class:
+    title: Normal
+  - class: active
+    title: Active state
+  - class: disabled
+    title: Disabled
+
+socials:
   facebook:
-    icon: fa fa-facebook
-    name: Facebook
+    icon: brand/facebook
+    title: Facebook
   twitter:
-    icon: fa fa-twitter
-    name: Twitter
+    icon: brand/twitter
+    title: Twitter
   google:
-    icon: fa fa-google
-    name: Google
+    icon: brand/google
+    title: Google
   youtube:
-    icon: fa fa-youtube
-    name: Youtube
+    icon: brand/youtube
+    title: Youtube
   vimeo:
-    icon: fa fa-vimeo
-    name: Vimeo
+    icon: brand/vimeo
+    title: Vimeo
   dribbble:
-    icon: fa fa-dribbble
-    name: Dribble
+    icon: brand/dribbble
+    title: Dribbble
   github:
-    icon: fa fa-github
-    name: Github
+    icon: brand/github
+    title: Github
   instagram:
-    icon: fa fa-instagram
-    name: Instagram
+    icon: brand/instagram
+    title: Instagram
   pinterest:
-    icon: fa fa-pinterest
-    name: Pinterest
+    icon: brand/pinterest
+    title: Pinterest
   vk:
-    icon: fa fa-vk
-    name: VKontakte
+    icon: brand/vk
+    title: VK
   rss:
-    icon: fa fa-rss
-    name: RSS
+    icon: brand/rss
+    title: RSS
   flickr:
-    icon: fa fa-flickr
-    name: Flickr
+    icon: brand/flickr
+    title: Flickr
   bitbucket:
-    icon: fa fa-bitbucket
-    name: Bitbucket
+    icon: brand/bitbucket
+    title: Bitbucker
+  tabler:
+    icon: brand/tabler
+    title: Tabler
 
-google-maps-key: AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4
-google-maps-url: https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk
-
-theme-plugins:
-  charts-c3:
-    name: c3.js Charts
-    files: [css, js]
-  maps-google:
-    name: Google Maps
-    files: [css, js]
-  input-mask:
-    name: Input Mask
-    files: [js]
-#  iconfonts:
-#    name: Iconfonts
-#    files: [css]
-#  prismjs:
-#    name: Code Highlight
-#    files: [css, js]
-#  fullcalendar:
-#    name: FullCalendar
-#    files: [css, js]
-#  weather:
-#    name: Weather
-#    files: [css]
+months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

build/banner.js

@@ -0,0 +1,21 @@
+/*
+ * Tabler (v0.9.0): banner.js
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+
+'use strict';
+
+const pkg = require('../package.json'),
+  year = new Date().getFullYear();
+
+function getBanner(pluginFilename) {
+  return `/*!
+  * Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
+  * Copyright 2018-${year} ${pkg.author}
+  * Licensed under ${pkg.license} (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */`;
+}
+
+module.exports = getBanner;

build/browsersync.js

@@ -0,0 +1,36 @@
+/*
+ * Tabler (v0.9.0): browsersync.js
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+
+const bs = require('browser-sync').create();
+
+bs.init({
+  watch: true,
+  server: {
+    routes: {
+      '/': 'tmp',
+      '/dist': 'dist',
+      '/dist/fonts': 'fonts',
+      '/libs': 'static/libs',
+      '/img': 'static/img',
+      '/node_modules': 'node_modules',
+    },
+  },
+  files: ['tmp/**/*', 'dist/css/*.css', 'dist/js/*.js'],
+  watchOptions: {
+    ignoreInitial: true,
+  },
+  notify: false,
+  open: false,
+  snippetOptions: {
+    rule: {
+      match: /<\/head>/i,
+      fn: function (snippet, match) {
+        return snippet + match;
+      }
+    }
+  }
+});

build/capture-components.sh

@@ -0,0 +1,12 @@
+rm -rf ../static/img/components/*
+
+for file in ../pages/_components/*.html
+do
+  file="$(basename -- $file)"
+  file="${file%.html}"
+  url="http://localhost:3001/components/$file.html"
+  echo $url
+
+  capture-website $url --element="#component-wrapper" --scale-factor=2 > ../static/img/components/$file.png
+  convert ../static/img/components/$file.png -gravity Center -crop 1648x824-0-0! -background "#F5F7FB" -flatten +repage -resize 1280x640 ../static/img/components/$file.png
+done

build/copy-libs.js

@@ -0,0 +1,11 @@
+const libs = require('../pages/_data/libs'),
+  path = require('path'),
+  { exec } = require('child_process');
+
+const all_libs = libs.js.concat(libs.css);
+
+all_libs.forEach(function (lib) {
+  let dirname = path.dirname(lib).replace('@', '');
+  let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${lib} dist/libs/${lib.replace('@', '')}`;
+  exec(cmd)
+});

build/postcss.config.js

@@ -0,0 +1,24 @@
+/*
+ * Tabler (v0.9.0): postcss.config.js
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+
+'use strict';
+
+module.exports = ctx => ({
+  map: ctx.file.dirname.includes('examples') ?
+    false :
+    {
+      inline: false,
+      annotation: true,
+      sourcesContent: true
+    },
+  plugins: {
+    autoprefixer: {
+      cascade: false,
+      grid: "autoplace"
+    }
+  }
+});

build/rollup.config.js

@@ -0,0 +1,51 @@
+/*
+ * Tabler (v0.9.0): rollup.config.js
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+
+'use strict';
+
+const BUNDLE  = process.env.BUNDLE === 'true';
+
+import path from 'path';
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import minify from 'rollup-plugin-babel-minify';
+import commonjs from 'rollup-plugin-commonjs';
+
+const fileDest = 'tabler',
+  banner = require('./banner');
+
+let plugins = [
+  resolve(),
+  commonjs()
+];
+
+if (BUNDLE) {
+  plugins = plugins.concat([
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    minify({
+      comments: false
+    })
+  ]);
+}
+
+module.exports = {
+  context: "window",
+  input: {
+    tabler: path.resolve(__dirname, '../js/tabler.js'),
+    'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
+  },
+  output: {
+    banner,
+    // name: 'tabler',
+    dir: path.resolve(__dirname, `../dist/js/`),
+    entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
+    format: 'cjs'
+  },
+  plugins,
+};

build/scss-compile.js

@@ -0,0 +1,46 @@
+/*
+ * Tabler (v0.9.0): scss-compile.js
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+
+const path = require('path'),
+  glob = require("glob"),
+  fs = require("fs"),
+  sass = require("node-sass"),
+  packageImporter = require('node-sass-package-importer');
+
+glob("scss/tabler*.scss", {}, function (er, files) {
+  files.forEach(function(file){
+    var basename = path.basename(file, '.scss');
+    
+    sass.render(
+      {
+        file: file,
+        outFile: `dist/css/${basename}.css`,
+        sourceMap: true,
+        sourceMapContents: true,
+        precision: 6,
+        importer: packageImporter()
+      },
+      (error, result) => {
+        if (!error) {
+          fs.writeFile(`dist/css/${basename}.css`, result.css, error => {
+            if (error) {
+              console.log(error);
+            }
+          });
+
+          fs.writeFile(`dist/css/${basename}.css.map`, result.map, error => {
+            if (error) {
+              console.log(error);
+            }
+          });
+        } else {
+          throw error;
+        }
+      }
+    );
+  });
+});

build/unused-files.js

@@ -0,0 +1,27 @@
+const glob = require("glob"),
+  fs = require("fs");
+
+let foundFiles = [];
+
+glob.sync("pages/**/*.{html,md}").forEach(function (file) {
+  let fileContent = fs.readFileSync(file);
+
+  fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, function(f, c, filename){
+    filename = 'pages/_includes/' + filename;
+
+    if(!foundFiles.includes(filename)) {
+      foundFiles.push(filename);
+    }
+  });
+});
+
+let includeFiles = glob.sync("pages/_includes/**/*.html");
+
+includeFiles.forEach(function(file){
+  if(! foundFiles.includes(file)) {
+    console.log('file', file);
+  }
+});
+
+// console.log('foundFiles', foundFiles);
+// console.log('includeFiles', includeFiles);

demo/404.html

@@ -0,0 +1,128 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased  border-top-2 border-primary">
+    <div class="empty">
+      <div class="empty-icon">
+        <div class="display-4">404</div>
+      </div>
+      <p class="empty-title h3">Oops&hellip; You just found an error page</p>
+      <p class="empty-subtitle text-muted">
+        We are sorry but the page you are looking for was not found
+      </p>
+      <div class="empty-action">
+        <a href="#" class="btn btn-primary">
+          Search again
+        </a>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function(event) {
+         window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
+            chart: {
+               type: 'area',
+               height: 40.0,
+            sparkline: {
+               enabled: true
+            },
+            },
+            fill: {
+               opacity: .16
+            },
+            series: [{
+               name: 'Profits',
+               data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
+            }],
+            xaxis: {
+               type: 'datetime',
+            },
+            labels: [...Array(30).keys()].map(n => `2019-09-${n+1}`),
+            colors: [
+               tabler.colors["blue"]
+            ],
+         })).render();
+      });
+    </script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/all.html

@@ -0,0 +1,588 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Index - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href="." class="navbar-brand text-reset mr-md-3">
+            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="./index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="./buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Index
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row row justify-content-center mt-3 mt-lg-5">
+            <div class="col-lg-6 col-xl-5">
+              <div class="card">
+                <div class="card-header">
+                  <h2 class="card-title">
+                    All pages
+                  </h2>
+                </div>
+                <div class="card-body">
+                  <ul>
+                    <li>
+                      <a href="/components/index.html">
+                        redirect.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/tmp.html">
+                        tmp.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layouts.html">
+                        layouts.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/redirects.json">
+                        redirects.json
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/blank.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Blank page
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/blog.html">
+                        Blog
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/buttons.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Buttons
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/calendar.html">
+                        Calendar
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/cards.html">
+                        Cards
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/carousel.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Carousel
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/changelog.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Changelog
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/charts.html">
+                        Charts
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/crypto-currencies.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Crypto currencies
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-header-dark.html">
+                        Dark header
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-dark-mode.html">
+                        Dark mode
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/docs.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Documentation
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/dropdowns.html">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/email.html">
+                        Email
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/empty.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Empty page
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/flags.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Flags
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-navbar-folded.html">
+                        Folded sidebar
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/forgot-password.html">
+                        Forgot password
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/form-elements.html">
+                        Form elements
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/gallery.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Gallery
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/charts-heatmap.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Heatmap Charts
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/homepage.html">
+                        Homepage
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/icons.html">
+                        Icons
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/all.html">
+                        Index
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/invoice.html">
+                        Invoice
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-test.html">
+                        Layout test
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/login.html">
+                        Login
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/lookup.html">
+                        Lookup company
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/maintenance.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Maintenance mode
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/maps.html">
+                        Maps
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-navbar-top.html">
+                        Navbar top
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/404.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Page 404
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/pagination.html">
+                        Pagination
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/pricing.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/profile.html">
+                        Profile
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/rtl.html">
+                        RTL mode
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/register.html">
+                        Register
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/ribbons.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Ribbons
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-navbar-left.html">
+                        Sidebar left
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-navbar-right.html">
+                        Sidebar right
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-navbar-dark.html">
+                        Sidebar white
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/snippets.html">
+                        Snippets
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/social.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Social elements
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-header-sticky.html">
+                        Sticky header
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/store.html">
+                        Store
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/components.html">
+                        Table UI components
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/tabs.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Tabs
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/typography.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Typography
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/users.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        Users list
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/blank.html

@@ -0,0 +1,295 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href="." class="navbar-brand text-reset mr-md-3">
+            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="./index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="./buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <div class="empty">
+            <div class="empty-icon">
+              <img src="./img/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
+            </div>
+            <p class="empty-title h3">No results found</p>
+            <p class="empty-subtitle text-muted">
+              Try adjusting your search or filter to find what you're looking for.
+            </p>
+            <div class="empty-action">
+              <a href="#" class="btn btn-primary">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                Add your first client
+              </a>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/blog.html

@@ -0,0 +1,537 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href="." class="navbar-brand text-reset mr-md-3">
+            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="./index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="./buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Blog
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row row-deck">
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <a href="#">
+                  <img class="card-img-top" src="./img/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
+                </a>
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
+                  <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/002m.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Dunn Slane</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <a href="#">
+                  <img class="card-img-top" src="./img/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
+                </a>
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
+                  <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/003m.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Emmy Levet</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <a href="#">
+                  <img class="card-img-top" src="./img/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
+                </a>
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
+                  <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/000f.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Maryjo Lebarree</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
+                  <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/004f.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Perren Keemar</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
+                  <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md" style="background-image: url(./img/avatars/007m.jpg)"></span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Sunny Airey</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-xl-4">
+              <div class="card d-flex flex-column">
+                <div class="card-body d-flex flex-column">
+                  <h3 class="card-title"><a href="#">I hope I didn't brain my damage.</a></h3>
+                  <div class="text-muted">I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneline...</div>
+                  <div class="d-flex align-items-center pt-5 mt-auto">
+                    <span class="avatar avatar-md">SA</span>
+                    <div class="ml-3">
+                      <a href="./profile.html" class="text-body">Geoffry Flaunders</a>
+                      <small class="d-block text-muted">3 days ago</small>
+                    </div>
+                    <div class="ml-auto">
+                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="card d-flex flex-column">
+                <div class="row row-0 flex-fill">
+                  <div class="col-md-3">
+                    <a href="#">
+                      <img src="./img/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                    </a>
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
+                      <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
+                      <div class="d-flex align-items-center pt-5 mt-auto">
+                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/002m.jpg)"></span>
+                        <div class="ml-3">
+                          <a href="./profile.html" class="text-body">Dunn Slane</a>
+                          <small class="d-block text-muted">3 days ago</small>
+                        </div>
+                        <div class="ml-auto">
+                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="card d-flex flex-column">
+                <div class="row row-0 flex-fill">
+                  <div class="col-md-3">
+                    <a href="#">
+                      <img src="./img/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                    </a>
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
+                      <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
+                      <div class="d-flex align-items-center pt-5 mt-auto">
+                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/003m.jpg)"></span>
+                        <div class="ml-3">
+                          <a href="./profile.html" class="text-body">Emmy Levet</a>
+                          <small class="d-block text-muted">3 days ago</small>
+                        </div>
+                        <div class="ml-auto">
+                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="card d-flex flex-column">
+                <div class="row row-0 flex-fill">
+                  <div class="col-md-3">
+                    <a href="#">
+                      <img src="./img/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                    </a>
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
+                      <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
+                      <div class="d-flex align-items-center pt-5 mt-auto">
+                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/004f.jpg)"></span>
+                        <div class="ml-3">
+                          <a href="./profile.html" class="text-body">Perren Keemar</a>
+                          <small class="d-block text-muted">3 days ago</small>
+                        </div>
+                        <div class="ml-auto">
+                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="card d-flex flex-column">
+                <div class="row row-0 flex-fill">
+                  <div class="col-md-3">
+                    <a href="#">
+                      <img src="./img/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                    </a>
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
+                      <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
+                      <div class="d-flex align-items-center pt-5 mt-auto">
+                        <span class="avatar avatar-md" style="background-image: url(./img/avatars/007m.jpg)"></span>
+                        <div class="ml-3">
+                          <a href="./profile.html" class="text-body">Sunny Airey</a>
+                          <small class="d-block text-muted">3 days ago</small>
+                        </div>
+                        <div class="ml-auto">
+                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/calendar.html

@@ -0,0 +1,379 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href="." class="navbar-brand text-reset mr-md-3">
+            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="./index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="./buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item active">
+              <a class="nav-link" href="./calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Calendar
+                </h2>
+              </div>
+              <!-- Page title actions -->
+              <div class="col-auto ml-auto">
+                <div class="d-flex">
+                  <a href="#" class="btn btn-primary">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                    Add event
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body">
+              <div id="calendar-main" class="card-calendar"></div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+            var calendarEl = document.getElementById('calendar-main'),
+               today = new Date(),
+               y = today.getFullYear(),
+               m = today.getMonth(),
+               d = today.getDate();
+            window.FullCalendar && (new FullCalendar.Calendar(calendarEl, {
+      	   plugins: [ 'interaction', 'dayGrid' ],
+               themeSystem: 'standard',
+      	   header: {
+      		   left: 'title',
+      		   center: '',
+      		   right: 'prev,next'
+      	   },
+      	   selectable: true,
+      	   selectHelper: true,
+      	   nowIndicator: true,
+      	   views: {
+      		   dayGridMonth: { buttonText: 'month' },
+      		   timeGridWeek: { buttonText: 'week' },
+      		   timeGridDay: { buttonText: 'day' }
+      	   },
+      	   defaultView: 'dayGridMonth',
+      	   timeFormat: 'H(:mm)',
+      	   events: [
+      	   	{
+                     title: 'All Day Event',
+                     start: new Date(y, m, 1),
+      			   className: 'bg-blue-lt'
+                  },
+                  {
+                     id: 999,
+                     title: 'Repeating Event',
+                     start: new Date(y, m, 7, 6, 0),
+                     allDay: false,
+                     className: 'bg-blue-lt'
+                  },
+                  {
+                     id: 999,
+                     title: 'Repeating Event',
+                     start: new Date(y, m, 14, 6, 0),
+                     allDay: false,
+                     className: 'bg-lime-lt'
+                  },
+                  {
+                     title: 'Meeting',
+                     start: new Date(y, m, 4, 10, 30),
+                     allDay: false,
+                     className: 'bg-green-lt'
+                  },
+                  {
+                     title: 'Lunch',
+                     start: new Date(y, m, 5, 12, 0),
+                     end: new Date(y, m, 5, 14, 0),
+                     allDay: false,
+                     className: 'bg-red-lt'
+                  },
+                  {
+                     title: 'LBD Launch',
+                     start: new Date(y, m, 19, 12, 0),
+                     allDay: true,
+                     className: 'bg-azure-lt'
+                  },
+                  {
+                     title: 'Birthday Party',
+                     start: new Date(y, m, 16, 19, 0),
+                     end: new Date(y, m, 16, 22, 30),
+                     allDay: false,
+      		      className: 'bg-orange-lt'
+                  }
+               ]
+         })).render();
+      });
+    </script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/cards.html

@@ -0,0 +1,699 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href="." class="navbar-brand text-reset mr-md-3">
+            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="./index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="./buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Cards
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6 col-xl-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>This is some text within a card body.</p>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card with bottom image</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <img src="./img/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
+           alt="Card bottom image">
+              </div>
+              <div class="card card-active">
+                <div class="card-body">
+                  <p>This is a card with active state.</p>
+                </div>
+              </div>
+              <div class="card card-inactive">
+                <div class="card-body">
+                  <p>This is some text inactive state.</p>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <!-- Card footer -->
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto">
+                      <a href="#">More information</a>
+                    </div>
+                    <div class="col-auto ml-auto">
+                      <label class="form-check form-switch m-0">
+                        <input class="form-check-input position-static" type="checkbox" checked>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <!-- Card footer -->
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto ml-auto">
+                      <div class="avatar-list avatar-list-stacked">
+                        <span class="avatar avatar-sm" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                        <span class="avatar avatar-sm">JL</span>
+                        <span class="avatar avatar-sm" style="background-image: url(./img/avatars/002m.jpg)"></span>
+                        <span class="avatar avatar-sm" style="background-image: url(./img/avatars/003m.jpg)"></span>
+                        <span class="avatar avatar-sm" style="background-image: url(./img/avatars/000f.jpg)"></span>
+                        <span class="avatar avatar-sm">+3</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-header">
+                  <ul class="nav nav-tabs card-header-tabs">
+                    <li class="nav-item">
+                      <a class="nav-link active" href="#">
+                        Active
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                        Link
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                        Disabled
+                      </a>
+                    </li>
+                    <li class="nav-item ml-auto">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-header">
+                  <ul class="nav nav-pills card-header-pills">
+                    <li class="nav-item">
+                      <a class="nav-link active" href="#">
+                        Active
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                        Link
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                        Disabled
+                      </a>
+                    </li>
+                    <li class="nav-item ml-auto">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card with progress bar</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <div class="progress progress-sm card-progress">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="sr-only">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="empty">
+                  <div class="empty-icon">
+                    <img src="./img/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
+                  </div>
+                  <p class="empty-title h3">No results found</p>
+                  <p class="empty-subtitle text-muted">
+                    Try adjusting your search or filter to find what you're looking for.
+                  </p>
+                  <div class="empty-action">
+                    <a href="#" class="btn btn-primary">
+                      Search again
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <!-- Cards with tabs component -->
+              <div class="card-tabs">
+                <!-- Cards navigation -->
+                <ul class="nav nav-tabs">
+                  <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
+                  <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
+                  <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
+                  <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
+                </ul>
+                <div class="tab-content">
+                  <!-- Content of card #1 -->
+                  <div id="tab-top-1" class="card tab-pane active show">
+                    <div class="card-body">
+                      <div class="card-title">Content of tab #1</div>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                      </p>
+                    </div>
+                  </div>
+                  <!-- Content of card #2 -->
+                  <div id="tab-top-2" class="card tab-pane">
+                    <div class="card-body">
+                      <div class="card-title">Content of tab #2</div>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                      </p>
+                    </div>
+                  </div>
+                  <!-- Content of card #3 -->
+                  <div id="tab-top-3" class="card tab-pane">
+                    <div class="card-body">
+                      <div class="card-title">Content of tab #3</div>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                      </p>
+                    </div>
+                  </div>
+                  <!-- Content of card #4 -->
+                  <div id="tab-top-4" class="card tab-pane">
+                    <div class="card-body">
+                      <div class="card-title">Content of tab #4</div>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- Cards with tabs component -->
+              <div class="card-tabs">
+                <div class="tab-content">
+                  <!-- Content of card #1 -->
+                  <div id="tab-bottom-1" class="card tab-pane active show">
+                    <div class="card-body">
+                      <div class="card-title">Content of tab #1</div>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                      </p>
+                    </div>
+                  </div>
+                  <!-- Content of card #2 -->
+                  <div id="tab-bottom-2" class="card tab-pane">
+                    <div class="card-body">
+                      <div class="card-title">Content of tab #2</div>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                      </p>
+                    </div>
+                  </div>
+                  <!-- Content of card #3 -->
+                  <div id="tab-bottom-3" class="card tab-pane">
+                    <div class="card-body">
+                      <div class="card-title">Content of tab #3</div>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                      </p>
+                    </div>
+                  </div>
+                  <!-- Content of card #4 -->
+                  <div id="tab-bottom-4" class="card tab-pane">
+                    <div class="card-body">
+                      <div class="card-title">Content of tab #4</div>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <!-- Cards navigation -->
+                <ul class="nav nav-tabs nav-tabs-bottom">
+                  <li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
+                  <li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
+                  <li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
+                  <li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
+                </ul>
+              </div>
+            </div>
+            <div class="col-md-6 col-xl-8">
+              <div class="card">
+                <div class="row row-0">
+                  <div class="col-md-3">
+                    <img src="./img/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title">Card with left side image</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="row row-0">
+                  <div class="col-md-3 order-md-last">
+                    <img src="./img/photos/de6d0fd1feebb6a2.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                  </div>
+                  <div class="col">
+                    <div class="card-body">
+                      <h3 class="card-title">Card with right side image</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-group">
+                <a href="#" class="card card-inactive text-center">
+                  <div class="card-body">
+                    <p>This is first card</p>
+                  </div>
+                </a>
+                <a href="#" class="card card-active text-center">
+                  <div class="card-body">
+                    <p>This is second card</p>
+                  </div>
+                </a>
+                <a href="#" class="card text-center">
+                  <div class="card-body">
+                    <p>This is third card</p>
+                  </div>
+                </a>
+              </div>
+              <div class="row">
+                <div class="col-xl-6">
+                  <div class="card">
+                    <img src="./img/photos/9f36332564ca271d.jpg" class="card-img-top" alt="Card top image">
+                    <div class="card-body">
+                      <h3 class="card-title">Card with top image</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                  <div class="card">
+                    <div class="card-body">
+                      <h3 class="card-title">Card with button link</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                      <div class="card-text">
+                        <a href="#" class="btn btn-primary">Go somewhere</a>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="card">
+                    <div class="card-status-top bg-danger"></div>
+                    <div class="card-body">
+                      <h3 class="card-title">Card with top status</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                  <div class="card">
+                    <div class="card-status-bottom bg-success"></div>
+                    <div class="card-body">
+                      <h3 class="card-title">Card with bottom status</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                  <div class="card">
+                    <div class="card-status-left bg-primary"></div>
+                    <div class="card-body">
+                      <h3 class="card-title">Card with side status</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                  <div class="card card-stacked">
+                    <div class="card-body">
+                      <h3 class="card-title">Stacked card</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-xl-6">
+                  <div class="card">
+                    <div class="card-body">
+                      <h3 class="card-title">Card title</h3>
+                      <div class="card-subtitle">Card subtitle</div>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                  <div class="card">
+                    <div class="card-header">
+                      <h3 class="card-title">Header title</h3>
+                    </div>
+                    <div class="card-body">
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                  </div>
+                  <div class="card">
+                    <div class="card-body">
+                      <h3 class="card-title">Card with footer</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                    <!-- Card footer -->
+                    <div class="card-footer">
+                      This is standard card footer
+                    </div>
+                  </div>
+                  <div class="card">
+                    <div class="card-body">
+                      <h3 class="card-title">Card with footer button</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                    <!-- Card footer -->
+                    <div class="card-footer">
+                      <a href="#" class="btn btn-primary">Go somewhere</a>
+                    </div>
+                  </div>
+                  <div class="card">
+                    <div class="card-body">
+                      <h3 class="card-title">Card with footer buttons</h3>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                        neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                    </div>
+                    <!-- Card footer -->
+                    <div class="card-footer">
+                      <div class="d-flex">
+                        <a href="#" class="btn btn-link">Cancel</a>
+                        <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/carousel.html

@@ -0,0 +1,452 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href="." class="navbar-brand text-reset mr-md-3">
+            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="./index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="./buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Carousel
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-default" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./img/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/3d2998219313cd37.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/8a26974ee6444acd.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with indicators</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-indicators" class="carousel slide" data-ride="carousel">
+                    <ol class="carousel-indicators">
+                      <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
+                      <li data-target="#carousel-indicators" data-slide-to="1" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="2" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="3" class=""></li>
+                      <li data-target="#carousel-indicators" data-slide-to="4" class=""></li>
+                    </ol>
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./img/photos/8c13ad59f739558c.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/8fdeb4785d2b82ef.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/9f36332564ca271d.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/35b88fc04a518c1b.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/36e273986ed577b8.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with controls</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-controls" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./img/photos/75b555b99d5b38c4.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/546fd146c83f428c.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/802a16cdf5ce3551.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/0986f97be719fb9a.jpg" data-holder-rendered="true">
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/1194d63fe36a8670.jpg" data-holder-rendered="true">
+                      </div>
+                    </div>
+                    <a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carousel-controls" role="button" data-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Next</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Carousel with captions</h3>
+                </div>
+                <div class="card-body">
+                  <div id="carousel-captions" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <img class="d-block w-100" alt="" src="./img/photos/1366fdc9b9b277e4.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/5358d787242861c4.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/5614ec7eb9034d04.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/56614e12b2a7bd68.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                      <div class="carousel-item">
+                        <img class="d-block w-100" alt="" src="./img/photos/77586f6ffa9fbc5e.jpg" data-holder-rendered="true">
+                        <div class="carousel-item-background d-none d-md-block"></div>
+                        <div class="carousel-caption d-none d-md-block">
+                          <h3>Slide label</h3>
+                          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                        </div>
+                      </div>
+                    </div>
+                    <a class="carousel-control-prev" href="#carousel-captions" role="button" data-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carousel-captions" role="button" data-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Next</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/changelog.html

@@ -0,0 +1,303 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Changelog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href="." class="navbar-brand text-reset mr-md-3">
+            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="./index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="./buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Changelog
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body markdown p-5">
+              <div class="mb-4">
+                <div class="mb-2">
+                  <span class="badge bg-blue-lt">1.0.0</span> —
+                  <span class="text-muted">December 15, 2019</span>
+                </div>
+                <div>
+                  <p>Coming soon</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/charts-heatmap.html

@@ -0,0 +1,523 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Heatmap Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href="." class="navbar-brand text-reset mr-md-3">
+            <img src="./img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="./img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(./img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="./index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="./buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="./c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="./docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Heatmap Charts
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Basic Heatmap - Single Series</h4>
+                  <div id="heatmap-basic" class="chart"></div>
+                </div>
+              </div>
+              <script>
+                var generateData = function() {
+                	var data = [],
+                		min = 0,
+                		max = 100,
+                		count = 15;
+                	for (var n = 0; n < count; n++) {
+                		data.push({
+                			x: (n + 1).toString(),
+                			y: Math.floor(Math.random() * (max - min + 1)) + min
+                		});
+                	}
+                	return data;
+                };
+                var options = {
+                	chart: {
+                		height: 400,
+                		type: "heatmap"
+                	},
+                	dataLabels: {
+                		enabled: false
+                	},
+                	colors: [tabler.colors.blue, ],
+                	series: [
+                		{ name: "Jan", data: generateData() },
+                		{ name: "Feb", data: generateData() },
+                		{ name: "Mar", data: generateData() },
+                		{ name: "Apr", data: generateData() },
+                		{ name: "May", data: generateData() },
+                		{ name: "Jun", data: generateData() },
+                		{ name: "Jul", data: generateData() },
+                		{ name: "Aug", data: generateData() },
+                		{ name: "Sep", data: generateData() },
+                		{ name: "Oct", data: generateData() },
+                		{ name: "Nov", data: generateData() },
+                		{ name: "Dec", data: generateData() },
+                	],
+                	xaxis: {
+                		type: "category"
+                	}
+                };
+                (new ApexCharts(document.querySelector("#heatmap-basic"),options)).render();
+              </script>
+            </div>
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Heatmap - Multiple series</h4>
+                  <div id="heatmap-multiple" class="chart"></div>
+                </div>
+              </div>
+              <script>
+                var generateData = function() {
+                	var data = [],
+                		min = 0,
+                		max = 100,
+                		count = 15;
+                	for (var n = 0; n < count; n++) {
+                		data.push({
+                			x: (n + 1).toString(),
+                			y: Math.floor(Math.random() * (max - min + 1)) + min
+                		});
+                	}
+                	return data;
+                };
+                var options = {
+                	chart: {
+                		height: 400,
+                		type: "heatmap"
+                	},
+                	dataLabels: {
+                		enabled: false
+                	},
+                	colors: [tabler.colors.blue, tabler.colors.azure, tabler.colors.indigo, tabler.colors.purple, tabler.colors.pink, tabler.colors.red, tabler.colors.orange, tabler.colors.yellow, tabler.colors.lime, tabler.colors.green, tabler.colors.teal, tabler.colors.cyan, ],
+                	series: [
+                		{ name: "Jan", data: generateData() },
+                		{ name: "Feb", data: generateData() },
+                		{ name: "Mar", data: generateData() },
+                		{ name: "Apr", data: generateData() },
+                		{ name: "May", data: generateData() },
+                		{ name: "Jun", data: generateData() },
+                		{ name: "Jul", data: generateData() },
+                		{ name: "Aug", data: generateData() },
+                		{ name: "Sep", data: generateData() },
+                		{ name: "Oct", data: generateData() },
+                		{ name: "Nov", data: generateData() },
+                		{ name: "Dec", data: generateData() },
+                	],
+                	xaxis: {
+                		type: "category"
+                	}
+                };
+                (new ApexCharts(document.querySelector("#heatmap-multiple"),options)).render();
+              </script>
+            </div>
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Heatmap - Labels included</h4>
+                  <div id="heatmap-labels" class="chart"></div>
+                </div>
+              </div>
+              <script>
+                var generateData = function() {
+                	var data = [],
+                		min = 0,
+                		max = 100,
+                		count = 15;
+                	for (var n = 0; n < count; n++) {
+                		data.push({
+                			x: (n + 1).toString(),
+                			y: Math.floor(Math.random() * (max - min + 1)) + min
+                		});
+                	}
+                	return data;
+                };
+                var options = {
+                	chart: {
+                		height: 400,
+                		type: "heatmap"
+                	},
+                	dataLabels: {
+                		enabled: true
+                	},
+                	colors: [tabler.colors.blue, ],
+                	series: [
+                		{ name: "Jan", data: generateData() },
+                		{ name: "Feb", data: generateData() },
+                		{ name: "Mar", data: generateData() },
+                		{ name: "Apr", data: generateData() },
+                		{ name: "May", data: generateData() },
+                		{ name: "Jun", data: generateData() },
+                		{ name: "Jul", data: generateData() },
+                		{ name: "Aug", data: generateData() },
+                		{ name: "Sep", data: generateData() },
+                		{ name: "Oct", data: generateData() },
+                		{ name: "Nov", data: generateData() },
+                		{ name: "Dec", data: generateData() },
+                	],
+                	xaxis: {
+                		type: "category"
+                	}
+                };
+                (new ApexCharts(document.querySelector("#heatmap-labels"),options)).render();
+              </script>
+            </div>
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Heatmap - Color range</h4>
+                  <div id="heatmap-colors" class="chart"></div>
+                </div>
+              </div>
+              <script>
+                var generateData = function() {
+                	var data = [],
+                		min = 0,
+                		max = 100,
+                		count = 15;
+                	for (var n = 0; n < count; n++) {
+                		data.push({
+                			x: (n + 1).toString(),
+                			y: Math.floor(Math.random() * (max - min + 1)) + min
+                		});
+                	}
+                	return data;
+                };
+                var options = {
+                	chart: {
+                		height: 400,
+                		type: "heatmap"
+                	},
+                	dataLabels: {
+                		enabled: false
+                	},
+                	plotOptions: {
+                		heatmap: {
+                			enableShades: true,
+                			colorScale: {
+                				ranges: [{
+                					from: 0,
+                					to: 20,
+                					name: "Low",
+                					color: tabler.colors.green
+                				}, {
+                					from: 21,
+                					to: 50,
+                					name: "Medium",
+                					color: tabler.colors.blue
+                				}, {
+                					from: 51,
+                					to: 75,
+                					name: "High",
+                					color: tabler.colors.yellow
+                				}, {
+                					from: 76,
+                					to: 100,
+                					name: "Extreme",
+                					color: tabler.colors.red
+                				}]
+                			}
+                		}
+                	},
+                	series: [
+                		{ name: "Jan", data: generateData() },
+                		{ name: "Feb", data: generateData() },
+                		{ name: "Mar", data: generateData() },
+                		{ name: "Apr", data: generateData() },
+                		{ name: "May", data: generateData() },
+                		{ name: "Jun", data: generateData() },
+                		{ name: "Jul", data: generateData() },
+                		{ name: "Aug", data: generateData() },
+                		{ name: "Sep", data: generateData() },
+                		{ name: "Oct", data: generateData() },
+                		{ name: "Nov", data: generateData() },
+                		{ name: "Dec", data: generateData() },
+                	],
+                	xaxis: {
+                		type: "category"
+                	}
+                };
+                (new ApexCharts(document.querySelector("#heatmap-colors"),options)).render();
+              </script>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/components.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <meta charset="utf-8">
+  <title>Redirecting&hellip;</title>
+  <link rel="canonical" href="./components/card-buttons.html">
+  <meta http-equiv="refresh" content="0; url=./components/card-buttons.html">
+  <meta name="robots" content="noindex">
+  <noscript><a href="./components/card-buttons.html">Click here if you are not redirected.</a></noscript>
+  <script>
+    location="./components/card-buttons.html";
+  </script>
+</html>

demo/components/card-buttons.html

@@ -0,0 +1,395 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Card with footer buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action active">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Card with footer buttons</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <div class="card">
+                          <div class="card-body">
+                            <h3 class="card-title">Card with footer buttons</h3>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                              neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                          </div>
+                          <!-- Card footer -->
+                          <div class="card-footer">
+                            <div class="d-flex">
+                              <a href="#" class="btn btn-link">Cancel</a>
+                              <a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with footer buttons<span class="nt">&lt;/h3&gt;</span>
+      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+         neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="c">&lt;!-- Card footer --&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
+         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary ml-auto"</span><span class="nt">&gt;</span>Go somewhere<span class="nt">&lt;/a&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Card with footer buttons","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n      
+                          <div class=\"card-body\">\n         
+                            <h3 class=\"card-title\">Card with footer buttons</h3>
+                            \n         
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                            \n      </div>
+                          \n      <!-- Card footer -->\n      
+                          <div class=\"card-footer\">\n         
+                            <div class=\"d-flex\">\n            <a href=\"#\" class=\"btn btn-link\">Cancel</a>\n            <a href=\"#\" class=\"btn btn-primary ml-auto\">Go somewhere</a>\n         </div>
+                            \n      </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/card-comments.html

@@ -0,0 +1,605 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Comments card - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action active">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Comments card</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <div class="card">
+                          <div class="card-header">
+                            <div class="card-title">Comments</div>
+                          </div>
+                          <div class="card-body">
+                            <div class="d-flex mb-5">
+                              <div class="mr-4">
+                                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)">
+                                  <span class="badge bg-green"></span>
+                                </span>
+                              </div>
+                              <div class="flex-fill">
+                                <div class="d-flex mt-n1">
+                                  <h5 class="m-0">
+                                    Paweł Kuna
+                                  </h5>
+                                  <div class="ml-auto small text-muted">1 week ago</div>
+                                </div>
+                                <p class="mb-2">
+                                  This is PERFECT
+                                </p>
+                                <div class="small">
+                                  <span class="text-success mr-1">+47</span>
+                                  <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
+                                  </a>
+                                  <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                                  </a>
+                                  <span class="mr-1">·</span>
+                                  <a href="#" class="mr-1 text-muted">Reply</a>
+                                  <span class="mr-1">·</span>
+                                  <a href="#" class="text-muted">Edit</a>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="d-flex mb-5">
+                              <div class="mr-4">
+                                <span class="avatar">
+                                  <span class="badge bg-green"></span>
+                                  JL</span>
+                              </div>
+                              <div class="flex-fill">
+                                <div class="d-flex mt-n1">
+                                  <h5 class="m-0">
+                                    Jeffie Lewzey
+                                  </h5>
+                                  <div class="ml-auto small text-muted">1 week and 4 days ago</div>
+                                </div>
+                                <p class="mb-2">
+                                  She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
+                                </p>
+                                <div class="small">
+                                  <span class="text-success mr-1">+45</span>
+                                  <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
+                                  </a>
+                                  <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                                  </a>
+                                  <span class="mr-1">·</span>
+                                  <a href="#" class="mr-1 text-muted">Reply</a>
+                                  <span class="mr-1">·</span>
+                                  <a href="#" class="text-muted">Edit</a>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="d-flex">
+                              <div class="mr-4">
+                                <span class="avatar" style="background-image: url(../img/avatars/002m.jpg)">
+                                  <span class="badge bg-green"></span>
+                                </span>
+                              </div>
+                              <div class="flex-fill">
+                                <div class="d-flex mt-n1">
+                                  <h5 class="m-0">
+                                    Mallory Hulme
+                                  </h5>
+                                  <div class="ml-auto small text-muted">2 days ago</div>
+                                </div>
+                                <p class="mb-2">
+                                  Did anyone go camping in Oshkosh Wisconsin last month?
+                                </p>
+                                <div class="small">
+                                  <span class="text-success mr-1">+32</span>
+                                  <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
+                                  </a>
+                                  <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                                  </a>
+                                  <span class="mr-1">·</span>
+                                  <a href="#" class="mr-1 text-muted">Reply</a>
+                                  <span class="mr-1">·</span>
+                                  <a href="#" class="text-muted">Edit</a>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Comments<span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-5"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
+                  Paweł Kuna
+               <span class="nt">&lt;/h5&gt;</span>
+               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>1 week ago<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
+               This is PERFECT
+            <span class="nt">&lt;/p&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+47<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+               <span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
+                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+               <span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
+            <span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-5"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
+               JL<span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
+                  Jeffie Lewzey
+               <span class="nt">&lt;/h5&gt;</span>
+               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>1 week and 4 days ago<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
+               She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
+            <span class="nt">&lt;/p&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+45<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+               <span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
+                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+               <span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
+            <span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-4"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/002m.jpg)"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex-fill"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mt-n1"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"m-0"</span><span class="nt">&gt;</span>
+                  Mallory Hulme
+               <span class="nt">&lt;/h5&gt;</span>
+               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto small text-muted"</span><span class="nt">&gt;</span>2 days ago<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-2"</span><span class="nt">&gt;</span>
+               Did anyone go camping in Oshkosh Wisconsin last month?
+            <span class="nt">&lt;/p&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-success mr-1"</span><span class="nt">&gt;</span>+32<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Up"</span><span class="nt">&gt;&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"18 15 12 9 6 15"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+               <span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Vote Down"</span><span class="nt">&gt;</span>
+                  <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"6 9 12 15 18 9"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+               <span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"mr-1 text-muted"</span><span class="nt">&gt;</span>Reply<span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-1"</span><span class="nt">&gt;</span>·<span class="nt">&lt;/span&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
+            <span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Comments card","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n   
+                          <div class=\"card-header\">\n      
+                            <div class=\"card-title\">Comments</div>
+                            \n   </div>
+                          \n   
+                          <div class=\"card-body\">\n\n      \n      
+                            <div class=\"d-flex mb-5\">\n         
+                              <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../img/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
+                              \n         
+                              <div class=\"flex-fill\">\n            
+                                <div class=\"d-flex mt-n1\">\n               
+                                  <h5 class=\"m-0\">\n                  Paweł Kuna\n               </h5>
+                                  \n               
+                                  <div class=\"ml-auto small text-muted\">1 week ago</div>
+                                  \n            </div>
+                                \n            
+                                <p class=\"mb-2\">\n               This is PERFECT\n            </p>
+                                \n            
+                                <div class=\"small\">\n               <span class=\"text-success mr-1\">+47</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
+                                \n         </div>
+                              \n      </div>
+                            \n      \n      
+                            <div class=\"d-flex mb-5\">\n         
+                              <div class=\"mr-4\">\n            <span class=\"avatar\">\n  <span class=\"badge bg-green\"></span>\nJL</span>\n\n         </div>
+                              \n         
+                              <div class=\"flex-fill\">\n            
+                                <div class=\"d-flex mt-n1\">\n               
+                                  <h5 class=\"m-0\">\n                  Jeffie Lewzey\n               </h5>
+                                  \n               
+                                  <div class=\"ml-auto small text-muted\">1 week and 4 days ago</div>
+                                  \n            </div>
+                                \n            
+                                <p class=\"mb-2\">\n               She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD\n            </p>
+                                \n            
+                                <div class=\"small\">\n               <span class=\"text-success mr-1\">+45</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
+                                \n         </div>
+                              \n      </div>
+                            \n      \n      
+                            <div class=\"d-flex\">\n         
+                              <div class=\"mr-4\">\n            <span class=\"avatar\" style=\"background-image: url(../img/avatars/002m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n         </div>
+                              \n         
+                              <div class=\"flex-fill\">\n            
+                                <div class=\"d-flex mt-n1\">\n               
+                                  <h5 class=\"m-0\">\n                  Mallory Hulme\n               </h5>
+                                  \n               
+                                  <div class=\"ml-auto small text-muted\">2 days ago</div>
+                                  \n            </div>
+                                \n            
+                                <p class=\"mb-2\">\n               Did anyone go camping in Oshkosh Wisconsin last month?\n            </p>
+                                \n            
+                                <div class=\"small\">\n               <span class=\"text-success mr-1\">+32</span>\n               <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Up\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n</a>\n               <a href=\"#\" class=\"mr-1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Vote Down\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n\n               </a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"mr-1 text-muted\">Reply</a>\n               <span class=\"mr-1\">·</span>\n               <a href=\"#\" class=\"text-muted\">Edit</a>\n            </div>
+                                \n         </div>
+                              \n      </div>
+                            \n      \n\n   </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/card-ribbon.html

@@ -0,0 +1,379 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Card with ribbon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action active">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Card with ribbon</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 274px">
+                        <div class="card">
+                          <div class="card-body">
+                            <h3 class="card-title">Card with ribbon</h3>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
+                          </div>
+                          <div class="ribbon ribbon-bookmark bg-orange">-10%</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with ribbon<span class="nt">&lt;/h3&gt;</span>
+      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.<span class="nt">&lt;/p&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ribbon ribbon-bookmark bg-orange"</span><span class="nt">&gt;</span>-10%<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Card with ribbon","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
+                        <div class=\"card\">\n\t
+                          <div class=\"card-body\">\n      \n      
+                            <h3 class=\"card-title\">Card with ribbon</h3>
+                            \n      
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
+                            \n      \n\t</div>
+                          \n\n\t
+                          <div class=\"ribbon ribbon-bookmark bg-orange\">-10%</div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/card-tabs-bottom.html

@@ -0,0 +1,497 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Card with bottom tabs - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action active">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Card with bottom tabs</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <!-- Cards with tabs component -->
+                        <div class="card-tabs">
+                          <div class="tab-content">
+                            <!-- Content of card #1 -->
+                            <div id="tab-bottom-1" class="card tab-pane active show">
+                              <div class="card-body">
+                                <div class="card-title">Content of tab #1</div>
+                                <p>
+                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                                </p>
+                              </div>
+                            </div>
+                            <!-- Content of card #2 -->
+                            <div id="tab-bottom-2" class="card tab-pane">
+                              <div class="card-body">
+                                <div class="card-title">Content of tab #2</div>
+                                <p>
+                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                                </p>
+                              </div>
+                            </div>
+                            <!-- Content of card #3 -->
+                            <div id="tab-bottom-3" class="card tab-pane">
+                              <div class="card-body">
+                                <div class="card-title">Content of tab #3</div>
+                                <p>
+                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                                </p>
+                              </div>
+                            </div>
+                            <!-- Content of card #4 -->
+                            <div id="tab-bottom-4" class="card tab-pane">
+                              <div class="card-body">
+                                <div class="card-title">Content of tab #4</div>
+                                <p>
+                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                          <!-- Cards navigation -->
+                          <ul class="nav nav-tabs nav-tabs-bottom">
+                            <li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
+                            <li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
+                            <li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
+                            <li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Cards with tabs component --&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
+      <span class="c">&lt;!-- Content of card #1 --&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-1"</span> <span class="na">class=</span><span class="s">"card tab-pane active show"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #1<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;p&gt;</span>
+               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+            <span class="nt">&lt;/p&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="c">&lt;!-- Content of card #2 --&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-2"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #2<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;p&gt;</span>
+               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+            <span class="nt">&lt;/p&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="c">&lt;!-- Content of card #3 --&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-3"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #3<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;p&gt;</span>
+               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+            <span class="nt">&lt;/p&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="c">&lt;!-- Content of card #4 --&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-bottom-4"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #4<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;p&gt;</span>
+               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+            <span class="nt">&lt;/p&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="c">&lt;!-- Cards navigation --&gt;</span>
+   <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-tabs-bottom"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+      <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-bottom-4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+   <span class="nt">&lt;/ul&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Card with bottom tabs","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n\n\n\n\n\n<!-- Cards with tabs component -->\n
+                        <div class=\"card-tabs\">\n   \n      \n
+                          <div class=\"tab-content\">\n   \n   <!-- Content of card #1 -->\n   
+                            <div id=\"tab-bottom-1\" class=\"card tab-pane active show\">\n      
+                              <div class=\"card-body\">\n         
+                                <div class=\"card-title\">Content of tab #1</div>
+                                \n         
+                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
+                                \n      </div>
+                              \n   </div>
+                            \n   \n   <!-- Content of card #2 -->\n   
+                            <div id=\"tab-bottom-2\" class=\"card tab-pane\">\n      
+                              <div class=\"card-body\">\n         
+                                <div class=\"card-title\">Content of tab #2</div>
+                                \n         
+                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
+                                \n      </div>
+                              \n   </div>
+                            \n   \n   <!-- Content of card #3 -->\n   
+                            <div id=\"tab-bottom-3\" class=\"card tab-pane\">\n      
+                              <div class=\"card-body\">\n         
+                                <div class=\"card-title\">Content of tab #3</div>
+                                \n         
+                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
+                                \n      </div>
+                              \n   </div>
+                            \n   \n   <!-- Content of card #4 -->\n   
+                            <div id=\"tab-bottom-4\" class=\"card tab-pane\">\n      
+                              <div class=\"card-body\">\n         
+                                <div class=\"card-title\">Content of tab #4</div>
+                                \n         
+                                <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.\n         </p>
+                                \n      </div>
+                              \n   </div>
+                            \n   \n</div>
+                          \n\n      \n<!-- Cards navigation -->\n
+                          <ul class=\"nav nav-tabs nav-tabs-bottom\">\n   \n   
+                            <li class=\"nav-item\"><a href=\"#tab-bottom-1\" class=\"nav-link active\" data-toggle=\"tab\">Tab 1</a></li>
+                            \n   \n   
+                            <li class=\"nav-item\"><a href=\"#tab-bottom-2\" class=\"nav-link\" data-toggle=\"tab\">Tab 2</a></li>
+                            \n   \n   
+                            <li class=\"nav-item\"><a href=\"#tab-bottom-3\" class=\"nav-link\" data-toggle=\"tab\">Tab 3</a></li>
+                            \n   \n   
+                            <li class=\"nav-item\"><a href=\"#tab-bottom-4\" class=\"nav-link\" data-toggle=\"tab\">Tab 4</a></li>
+                            \n   \n</ul>
+                          \n\n   \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/card-with-image.html

@@ -0,0 +1,397 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Card with side image - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action active">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Card with side image</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <div class="card">
+                          <div class="row row-0">
+                            <div class="col-md-3">
+                              <img src="../img/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                            </div>
+                            <div class="col">
+                              <div class="card-body">
+                                <h3 class="card-title">Card with side image</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                                  neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-0"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/2854fd67ddbd6217.jpg"</span> <span class="na">class=</span><span class="s">"w-100 h-100 object-cover"</span> <span class="na">alt=</span><span class="s">"Card side image"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with side image<span class="nt">&lt;/h3&gt;</span>
+            <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+               neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Card with side image","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n   
+                          <div class=\"row row-0\">\n      
+                            <div class=\"col-md-3\">\n         <img src=\"../img/photos/2854fd67ddbd6217.jpg\" class=\"w-100 h-100 object-cover\" alt=\"Card side image\">\n      </div>
+                            \n      
+                            <div class=\"col\">\n         
+                              <div class=\"card-body\">\n            \n            
+                                <h3 class=\"card-title\">Card with side image</h3>
+                                \n            \n            
+                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n               neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                                \n         </div>
+                              \n      </div>
+                            \n   </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/empty.html

@@ -0,0 +1,398 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Empty state - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action active">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Empty state</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div >
+                        <div class="empty">
+                          <div class="empty-icon">
+                            <img src="../img/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
+                          </div>
+                          <p class="empty-title h3">No results found</p>
+                          <p class="empty-subtitle text-muted">
+                            Try adjusting your search or filter to find what you're looking for.
+                          </p>
+                          <div class="empty-action">
+                            <a href="#" class="btn btn-primary">
+                              Search again
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/illustrations/undraw_quitting_time_dm8t.svg"</span> <span class="na">class=</span><span class="s">"h-8 mb-4"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title h3"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
+   <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
+      Try adjusting your search or filter to find what you're looking for.
+   <span class="nt">&lt;/p&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-action"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
+         Search again
+      <span class="nt">&lt;/a&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Empty state","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
+                        <div class=\"empty\">\n   
+                          <div class=\"empty-icon\">\n      \n      \n      <img src=\"../img/illustrations/undraw_quitting_time_dm8t.svg\" class=\"h-8 mb-4\" alt=\"\">\n      \n   </div>
+                          \n\n   
+                          <p class=\"empty-title h3\">No results found</p>
+                          \n   
+                          <p class=\"empty-subtitle text-muted\">\n      Try adjusting your search or filter to find what youre looking for.\n   </p>
+                          \n   
+                          <div class=\"empty-action\">\n      \n      <a href=\"#\" class=\"btn btn-primary\">\nSearch again\n</a>\n\n   </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \nre looking for.\n   </p>
+                    \n   
+                    <div class=\"empty-action\">\n      \n      <a href=\"#\" class=\"btn btn-primary\">\nSearch again\n</a>\n\n   </div>
+                    \n</div>
+                  \n\n\n</div>
+                \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                <button type="submit" class="btn btn-primary mt-4 btn-block">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  Edit in CodePen
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+</div>
+</div>
+<script>
+  window.tabler_colors = {
+  'blue': '#206bc4',
+  'azure': '#45aaf2',
+  'indigo': '#6574cd',
+  'purple': '#a55eea',
+  'pink': '#f66d9b',
+  'red': '#fa4654',
+  'orange': '#fd9644',
+  'yellow': '#f1c40f',
+  'lime': '#7bd235',
+  'green': '#5eba00',
+  'teal': '#2bcbba',
+  'cyan': '#17a2b8',
+  'gray': '#868e96',
+  };
+</script>
+<!-- Libs JS -->
+<script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+<script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+<script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+<script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+<script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+<script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+<script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+<script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+<script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+<script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+<script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+<script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+<script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+<script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+<script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+<!-- Tabler Core -->
+<script src="../dist/js/tabler.min.js?1576401968"></script>
+<!-- Tabler Plugins -->
+<script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+<script>
+  document.body.style.display = 'block';
+</script>
+</body>
+</html>

demo/components/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <meta charset="utf-8">
+  <title>Redirecting&hellip;</title>
+  <link rel="canonical" href="../components.html">
+  <meta http-equiv="refresh" content="0; url=../components.html">
+  <meta name="robots" content="noindex">
+  <noscript><a href="../components.html">Click here if you are not redirected.</a></noscript>
+  <script>
+    location="../components.html";
+  </script>
+</html>

demo/components/input-colors.html

@@ -0,0 +1,509 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Color input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action active">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Color input</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div >
+                        <div class="mb-3">
+                          <label class="form-label">Color Input</label>
+                          <div class="row row-xs">
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="blue" class="colorinput-input" />
+                                <span class="colorinput-color bg-blue"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="azure" class="colorinput-input"  checked/>
+                                <span class="colorinput-color bg-azure"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="indigo" class="colorinput-input" />
+                                <span class="colorinput-color bg-indigo"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="purple" class="colorinput-input" />
+                                <span class="colorinput-color bg-purple"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="pink" class="colorinput-input" />
+                                <span class="colorinput-color bg-pink"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="red" class="colorinput-input" />
+                                <span class="colorinput-color bg-red"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="orange" class="colorinput-input" />
+                                <span class="colorinput-color bg-orange"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
+                                <span class="colorinput-color bg-yellow"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="lime" class="colorinput-input" />
+                                <span class="colorinput-color bg-lime"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="green" class="colorinput-input" />
+                                <span class="colorinput-color bg-green"></span>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-xs"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"blue"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-blue"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"green"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Color input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"mb-3\">\n\t<label class=\"form-label\">Color Input</label>\n\t
+                          <div class=\"row row-xs\">\n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"blue\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-blue\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"azure\" class=\"colorinput-input\"  checked/>\n\t\t\t\t<span class=\"colorinput-color bg-azure\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"indigo\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-indigo\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"purple\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-purple\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"pink\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-pink\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"red\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-red\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"orange\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-orange\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"yellow\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-yellow\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"lime\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-lime\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-auto\">\n\t\t\t<label class=\"colorinput\">\n\t\t\t\t<input name=\"color\" type=\"checkbox\" value=\"green\" class=\"colorinput-input\" />\n\t\t\t\t<span class=\"colorinput-color bg-green\"></span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t</div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/input-image.html

@@ -0,0 +1,477 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Image input - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action active">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Image input</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 572px">
+                        <div class="mb-3">
+                          <label class="form-label">Image Check</label>
+                          <div class="row row-xs">
+                            <div class="col-6 col-sm-4">
+                              <label class="imagecheck mb-2">
+                                <input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
+                                <span class="imagecheck-figure">
+                                  <img src="../img/photos/77586f6ffa9fbc5e.jpg" alt="" class="imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="imagecheck mb-2">
+                                <input name="imagecheck" type="checkbox" value="2" class="imagecheck-input"  checked/>
+                                <span class="imagecheck-figure">
+                                  <img src="../img/photos/552683cc4e5f0e11.jpg" alt="" class="imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="imagecheck mb-2">
+                                <input name="imagecheck" type="checkbox" value="3" class="imagecheck-input" />
+                                <span class="imagecheck-figure">
+                                  <img src="../img/photos/3664593f945f0d8d.jpg" alt="" class="imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="imagecheck mb-2">
+                                <input name="imagecheck" type="checkbox" value="4" class="imagecheck-input"  checked/>
+                                <span class="imagecheck-figure">
+                                  <img src="../img/photos/529078594c496ec5.jpg" alt="" class="imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="imagecheck mb-2">
+                                <input name="imagecheck" type="checkbox" value="5" class="imagecheck-input" />
+                                <span class="imagecheck-figure">
+                                  <img src="../img/photos/a74c41b6fb7fdf34.jpg" alt="" class="imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-6 col-sm-4">
+                              <label class="imagecheck mb-2">
+                                <input name="imagecheck" type="checkbox" value="6" class="imagecheck-input" />
+                                <span class="imagecheck-figure">
+                                  <img src="../img/photos/a159fb2bff29fda4.jpg" alt="" class="imagecheck-image">
+                                </span>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-xs"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/77586f6ffa9fbc5e.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/552683cc4e5f0e11.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/3664593f945f0d8d.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/529078594c496ec5.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/a74c41b6fb7fdf34.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-2"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"6"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"imagecheck-figure"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"./img/photos/a159fb2bff29fda4.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"imagecheck-image"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/label&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Image input","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n
+                        <div class=\"mb-3\">\n\t<label class=\"form-label\">Image Check</label>\n\t
+                          <div class=\"row row-xs\">\n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"1\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/77586f6ffa9fbc5e.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"2\" class=\"imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/552683cc4e5f0e11.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"3\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/3664593f945f0d8d.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"4\" class=\"imagecheck-input\"  checked/>\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/529078594c496ec5.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"5\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/a74c41b6fb7fdf34.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t\t
+                            <div class=\"col-6 col-sm-4\">\n\t\t\t<label class=\"imagecheck mb-2\">\n\t\t\t\t<input name=\"imagecheck\" type=\"checkbox\" value=\"6\" class=\"imagecheck-input\" />\n\t\t\t\t<span class=\"imagecheck-figure\">\n\t\t\t\t\t<img src=\"../img/photos/a159fb2bff29fda4.jpg\" alt=\"\" class=\"imagecheck-image\">\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>
+                            \n\t\t\n\t</div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/progress.html

@@ -0,0 +1,483 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Progress bar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action active">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Progress bar</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 274px">
+                        <div>
+                          <div class="d-flex mb-1 align-items-center leading-none">
+                            <div class="text-h5 font-weight-bolder m-0">Label</div>
+                            <span class="ml-auto text-h6">45%</span>
+                          </div>
+                          <div class="progress progress-sm">
+                            <div class="progress-bar bg-blue" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">45% Complete</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <div class="d-flex mb-1 align-items-center leading-none">
+                            <div class="text-h5 font-weight-bolder m-0">Label</div>
+                            <span class="ml-auto text-h6">32%</span>
+                          </div>
+                          <div class="progress progress-sm">
+                            <div class="progress-bar bg-red" style="width: 32%" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">32% Complete</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <div class="d-flex mb-1 align-items-center leading-none">
+                            <div class="text-h5 font-weight-bolder m-0">Label</div>
+                            <span class="ml-auto text-h6">90%</span>
+                          </div>
+                          <div class="progress progress-sm">
+                            <div class="progress-bar bg-yellow" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">90% Complete</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <div class="d-flex mb-1 align-items-center leading-none">
+                            <div class="text-h5 font-weight-bolder m-0">Label</div>
+                            <span class="ml-auto text-h6">51%</span>
+                          </div>
+                          <div class="progress progress-sm">
+                            <div class="progress-bar bg-green" style="width: 51%" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
+                              <span class="sr-only">51% Complete</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>45%<span class="nt">&lt;/span&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-blue"</span> <span class="na">style=</span><span class="s">"width: 45%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"45"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>45% Complete<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>32%<span class="nt">&lt;/span&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-red"</span> <span class="na">style=</span><span class="s">"width: 32%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"32"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>32% Complete<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>90%<span class="nt">&lt;/span&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-yellow"</span> <span class="na">style=</span><span class="s">"width: 90%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"90"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>90% Complete<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-1 align-items-center leading-none"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-h5 font-weight-bolder m-0"</span><span class="nt">&gt;</span>Label<span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ml-auto text-h6"</span><span class="nt">&gt;</span>51%<span class="nt">&lt;/span&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-green"</span> <span class="na">style=</span><span class="s">"width: 51%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"51"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>51% Complete<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Progress bar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  \n\n\n
+                        <div>\n   
+                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
+                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
+                            \n      \n      <span class=\"ml-auto text-h6\">45%</span>\n   </div>
+                          \n   \n\n
+                          <div class=\"progress progress-sm\">\n   \n      
+                            <div class=\"progress-bar bg-blue\" style=\"width: 45%\" role=\"progressbar\" aria-valuenow=\"45\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">45% Complete</span>\n         \n      </div>
+                            \n   \n</div>
+                          \n\n</div>
+                        \n\n\n\n\n
+                        <div>\n   
+                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
+                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
+                            \n      \n      <span class=\"ml-auto text-h6\">32%</span>\n   </div>
+                          \n   \n\n
+                          <div class=\"progress progress-sm\">\n   \n      
+                            <div class=\"progress-bar bg-red\" style=\"width: 32%\" role=\"progressbar\" aria-valuenow=\"32\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">32% Complete</span>\n         \n      </div>
+                            \n   \n</div>
+                          \n\n</div>
+                        \n\n\n\n\n
+                        <div>\n   
+                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
+                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
+                            \n      \n      <span class=\"ml-auto text-h6\">90%</span>\n   </div>
+                          \n   \n\n
+                          <div class=\"progress progress-sm\">\n   \n      
+                            <div class=\"progress-bar bg-yellow\" style=\"width: 90%\" role=\"progressbar\" aria-valuenow=\"90\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">90% Complete</span>\n         \n      </div>
+                            \n   \n</div>
+                          \n\n</div>
+                        \n\n\n\n\n
+                        <div>\n   
+                          <div class=\"d-flex mb-1 align-items-center leading-none\">\n      
+                            <div class=\"text-h5 font-weight-bolder m-0\">Label</div>
+                            \n      \n      <span class=\"ml-auto text-h6\">51%</span>\n   </div>
+                          \n   \n\n
+                          <div class=\"progress progress-sm\">\n   \n      
+                            <div class=\"progress-bar bg-green\" style=\"width: 51%\" role=\"progressbar\" aria-valuenow=\"51\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">51% Complete</span>\n         \n      </div>
+                            \n   \n</div>
+                          \n\n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/simple-avatar.html

@@ -0,0 +1,361 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Simple avatar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action active">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Simple avatar</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div >
+                        <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)">
+                          <span class="badge bg-green"></span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;/span&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Simple avatar","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  <span class=\"avatar\" style=\"background-image: url(../img/avatars/000m.jpg)\">\n  <span class=\"badge bg-green\"></span>\n</span>\n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/simple-card.html

@@ -0,0 +1,373 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Simple box - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action active">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Simple box</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 274px">
+                        <div class="card">
+                          <div class="card-body">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                              neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+         neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Simple box","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n      
+                          <div class=\"card-body\">\n         
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima\n            neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                            \n      </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/widget-revenue.html

@@ -0,0 +1,433 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Revenue chart - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action active">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Revenue chart</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div >
+                        <div class="card">
+                          <div class="card-body">
+                            <div class="d-flex">
+                              <div>Revenue</div>
+                              <div class="ml-auto">
+                                <div class="dropdown">
+                                  <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    Last 7 days
+                                  </a>
+                                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item active" href="#">Last 7 days</a>
+                                    <a class="dropdown-item" href="#">Last 30 days</a>
+                                    <a class="dropdown-item" href="#">Last 3 months</a>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="d-flex align-items-baseline">
+                              <div class="h1 mb-0 mr-2">$4,300</div>
+                              <div class="mr-auto">
+                                <span class="text-green d-inline-flex align-items-center leading-none">
+                                  8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div id="chart-revenue-bg" class="chart-sm"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div&gt;</span>Revenue<span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-toggle text-muted"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
+                  Last 7 days
+               <span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">&gt;</span>
+                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 7 days<span class="nt">&lt;/a&gt;</span>
+                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 30 days<span class="nt">&lt;/a&gt;</span>
+                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 3 months<span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-baseline"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"h1 mb-0 mr-2"</span><span class="nt">&gt;</span>$4,300<span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center leading-none"</span><span class="nt">&gt;</span>
+               8% <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon ml-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"23 6 13.5 15.5 8.5 10.5 1 18"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"17 6 23 6 23 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"chart-revenue-bg"</span> <span class="na">class=</span><span class="s">"chart-sm"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Revenue chart","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n   
+                          <div class=\"card-body\">\n      
+                            <div class=\"d-flex\">\n         
+                              <div>Revenue</div>
+                              \n         
+                              <div class=\"ml-auto\">\n            
+                                <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
+                                  <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownMenuButton\">\n      <a class=\"dropdown-item active\" href=\"#\">Last 7 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 30 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 3 months</a>\n   </div>
+                                  \n</div>
+                                \n\n         </div>
+                              \n      </div>
+                            \n      
+                            <div class=\"d-flex align-items-baseline\">\n         
+                              <div class=\"h1 mb-0 mr-2\">$4,300</div>
+                              \n         
+                              <div class=\"mr-auto\">\n            \n\n\n<span class=\"text-green d-inline-flex align-items-center leading-none\">\n   8% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n\n         </div>
+                              \n      </div>
+                            \n   </div>
+                          \n   \n\n\n\n\n\n\n\n
+                          <div id=\"chart-revenue-bg\" class=\"chart-sm\"></div>
+                          \n\n\n\n\n   \n\n\n\n\n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/components/widget-sales.html

@@ -0,0 +1,447 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Sales widget - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta name="twitter:site" content="@tabler_ui">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <meta property="og:image" content="https://preview-dev.tabler.io/img/components/card-buttons.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta property="og:site_name" content="Tabler">
+    <meta property="og:type" content="object">
+    <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+    <meta property="og:url" content="https://preview-dev.tabler.io/components/card-buttons.html">
+    <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Tabler components
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-3">
+              <div class="list-group list-group-transparent mb-0">
+                <a href="/components/card-tabs-bottom.html" class="list-group-item list-group-item-action">Card with bottom tabs</a>
+                <a href="/components/card-buttons.html" class="list-group-item list-group-item-action">Card with footer buttons</a>
+                <a href="/components/card-ribbon.html" class="list-group-item list-group-item-action">Card with ribbon</a>
+                <a href="/components/card-with-image.html" class="list-group-item list-group-item-action">Card with side image</a>
+                <a href="/components/input-colors.html" class="list-group-item list-group-item-action">Color input</a>
+                <a href="/components/card-comments.html" class="list-group-item list-group-item-action">Comments card</a>
+                <a href="/components/empty.html" class="list-group-item list-group-item-action">Empty state</a>
+                <a href="/components/input-image.html" class="list-group-item list-group-item-action">Image input</a>
+                <a href="/components/progress.html" class="list-group-item list-group-item-action">Progress bar</a>
+                <a href="/components/widget-revenue.html" class="list-group-item list-group-item-action">Revenue chart</a>
+                <a href="/components/widget-sales.html" class="list-group-item list-group-item-action active">Sales widget</a>
+                <a href="/components/simple-avatar.html" class="list-group-item list-group-item-action">Simple avatar</a>
+                <a href="/components/simple-card.html" class="list-group-item list-group-item-action">Simple box</a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-6">
+                  <div class="card-title">Sales widget</div>
+                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+                  <div class="border border-bottom-0 bg-light p-1 rounded-top">
+                    <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                      <div class="flex-fill" style="max-width: 274px">
+                        <div class="card">
+                          <div class="card-body">
+                            <div class="d-flex">
+                              <div>Sales</div>
+                              <div class="ml-auto">
+                                <div class="dropdown">
+                                  <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    Last 7 days
+                                  </a>
+                                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item active" href="#">Last 7 days</a>
+                                    <a class="dropdown-item" href="#">Last 30 days</a>
+                                    <a class="dropdown-item" href="#">Last 3 months</a>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="h1 mb-3">75%</div>
+                            <div class="d-flex mb-2">
+                              <div>Conversion rate</div>
+                              <div class="ml-auto">
+                                <span class="text-green d-inline-flex align-items-center leading-none">
+                                  7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                                </span>
+                              </div>
+                            </div>
+                            <div class="progress progress-sm">
+                              <div class="progress-bar bg-blue" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+                                <span class="sr-only">75% Complete</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
+                    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div&gt;</span>Sales<span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
+               <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-toggle text-muted"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
+                  Last 7 days
+               <span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">&gt;</span>
+                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 7 days<span class="nt">&lt;/a&gt;</span>
+                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 30 days<span class="nt">&lt;/a&gt;</span>
+                  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Last 3 months<span class="nt">&lt;/a&gt;</span>
+               <span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"h1 mb-3"</span><span class="nt">&gt;</span>75%<span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex mb-2"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div&gt;</span>Conversion rate<span class="nt">&lt;/div&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green d-inline-flex align-items-center leading-none"</span><span class="nt">&gt;</span>
+               7% <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon ml-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"23 6 13.5 15.5 8.5 10.5 1 18"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"17 6 23 6 23 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
+         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-blue"</span> <span class="na">style=</span><span class="s">"width: 75%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>75% Complete<span class="nt">&lt;/span&gt;</span>
+         <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                  </div>
+                  <div class="row">
+                    <div class="col"><a href="#" class="btn btn-secondary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                        Copy code
+                      </a>
+                    </div>
+                    <div class="col">
+                      <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                        <input type="hidden" name="data" value='{"title":"Sales widget","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"\n<div class=\"tabler-demo\">\n  
+                        <div class=\"card\">\n   
+                          <div class=\"card-body\">\n      
+                            <div class=\"d-flex\">\n         
+                              <div>Sales</div>
+                              \n         
+                              <div class=\"ml-auto\">\n            
+                                <div class=\"dropdown\">\n   <a class=\"dropdown-toggle text-muted\" href=\"#\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n      Last 7 days\n   </a>\n   
+                                  <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"dropdownMenuButton\">\n      <a class=\"dropdown-item active\" href=\"#\">Last 7 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 30 days</a>\n      <a class=\"dropdown-item\" href=\"#\">Last 3 months</a>\n   </div>
+                                  \n</div>
+                                \n\n         </div>
+                              \n      </div>
+                            \n      
+                            <div class=\"h1 mb-3\">75%</div>
+                            \n      
+                            <div class=\"d-flex mb-2\">\n         
+                              <div>Conversion rate</div>
+                              \n         
+                              <div class=\"ml-auto\">\n\n\n<span class=\"text-green d-inline-flex align-items-center leading-none\">\n   7% <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon ml-1\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"></polyline><polyline points=\"17 6 23 6 23 12\"></polyline></svg>\n\n</span>\n</div>
+                              \n      </div>
+                            \n      \n\n
+                            <div class=\"progress progress-sm\">\n   \n      
+                              <div class=\"progress-bar bg-blue\" style=\"width: 75%\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n         \n            <span class=\"sr-only\">75% Complete</span>\n         \n      </div>
+                              \n   \n</div>
+                            \n\n   </div>
+                          \n</div>
+                        \n\n\n</div>
+                      \n","css":"\n.tabler-demo {\n   padding: 3rem;\n   -webkit-font-smoothing: antialiased;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   min-height: 100vh;\n   width: 100%;\n}\n", "editors":"100"}'>
+                      <button type="submit" class="btn btn-primary mt-4 btn-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        Edit in CodePen
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>
+    window.tabler_colors = {
+    'blue': '#206bc4',
+    'azure': '#45aaf2',
+    'indigo': '#6574cd',
+    'purple': '#a55eea',
+    'pink': '#f66d9b',
+    'red': '#fa4654',
+    'orange': '#fd9644',
+    'yellow': '#f1c40f',
+    'lime': '#7bd235',
+    'green': '#5eba00',
+    'teal': '#2bcbba',
+    'cyan': '#17a2b8',
+    'gray': '#868e96',
+    };
+  </script>
+  <!-- Libs JS -->
+  <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+  <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+  <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+  <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+  <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+  <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+  <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+  <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+  <!-- Tabler Core -->
+  <script src="../dist/js/tabler.min.js?1576401968"></script>
+  <!-- Tabler Plugins -->
+  <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+  <script>
+    document.body.style.display = 'block';
+  </script>
+</body>
+</html>

demo/dist/css/tabler-charts.css

@@ -0,0 +1,22 @@
+/*!
+ * Tabler Charts (v0.9.0)
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+.chart {
+  display: block;
+  min-height: 10rem; }
+  .chart text {
+    font-family: inherit; }
+
+.chart-sm {
+  height: 2.5rem; }
+
+.chart-square {
+  height: 5.75rem; }
+
+.chart-placeholder {
+  background-image: linear-gradient(135deg, #dce3e9 25%, transparent 25%, transparent 50%, #dce3e9 50%, #dce3e9 75%, transparent 75%, transparent 100%);
+  background-size: 14.14px 14.14px; }
+/*# sourceMappingURL=tabler-charts.css.map */

demo/dist/css/tabler-charts.min.css

@@ -0,0 +1,7 @@
+/*!
+ * Tabler Charts (v0.9.0)
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */.chart{display:block;min-height:10rem}.chart text{font-family:inherit}.chart-sm{height:2.5rem}.chart-square{height:5.75rem}.chart-placeholder{background-image:linear-gradient(135deg,#dce3e9 25%,transparent 25%,transparent 50%,#dce3e9 50%,#dce3e9 75%,transparent 75%,transparent 100%);background-size:14.14px 14.14px}
+/*# sourceMappingURL=tabler-charts.min.css.map */

demo/dist/css/tabler-flags.css

@@ -0,0 +1,798 @@
+/*!
+ * Tabler Flags (v0.9.0)
+ * Copyright 2018-2019 The Tabler Authors
+ * Copyright 2018-2019 codecalm
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+ */
+.flag {
+  position: relative;
+  display: inline-block;
+  width: 1.33333em;
+  height: 1em;
+  vertical-align: -3px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  border: 1px solid #dce3e9;
+  border-radius: 3px; }
+
+.flag-ad {
+  background-image: url("/img/flags/ad.svg"); }
+
+.flag-ae {
+  background-image: url("/img/flags/ae.svg"); }
+
+.flag-af {
+  background-image: url("/img/flags/af.svg"); }
+
+.flag-ag {
+  background-image: url("/img/flags/ag.svg"); }
+
+.flag-ai {
+  background-image: url("/img/flags/ai.svg"); }
+
+.flag-al {
+  background-image: url("/img/flags/al.svg"); }
+
+.flag-am {
+  background-image: url("/img/flags/am.svg"); }
+
+.flag-ao {
+  background-image: url("/img/flags/ao.svg"); }
+
+.flag-aq {
+  background-image: url("/img/flags/aq.svg"); }
+
+.flag-ar {
+  background-image: url("/img/flags/ar.svg"); }
+
+.flag-as {
+  background-image: url("/img/flags/as.svg"); }
+
+.flag-at {
+  background-image: url("/img/flags/at.svg"); }
+
+.flag-au {
+  background-image: url("/img/flags/au.svg"); }
+
+.flag-aw {
+  background-image: url("/img/flags/aw.svg"); }
+
+.flag-ax {
+  background-image: url("/img/flags/ax.svg"); }
+
+.flag-az {
+  background-image: url("/img/flags/az.svg"); }
+
+.flag-ba {
+  background-image: url("/img/flags/ba.svg"); }
+
+.flag-bb {
+  background-image: url("/img/flags/bb.svg"); }
+
+.flag-bd {
+  background-image: url("/img/flags/bd.svg"); }
+
+.flag-be {
+  background-image: url("/img/flags/be.svg"); }
+
+.flag-bf {
+  background-image: url("/img/flags/bf.svg"); }
+
+.flag-bg {
+  background-image: url("/img/flags/bg.svg"); }
+
+.flag-bh {
+  background-image: url("/img/flags/bh.svg"); }
+
+.flag-bi {
+  background-image: url("/img/flags/bi.svg"); }
+
+.flag-bj {
+  background-image: url("/img/flags/bj.svg"); }
+
+.flag-bl {
+  background-image: url("/img/flags/bl.svg"); }
+
+.flag-bm {
+  background-image: url("/img/flags/bm.svg"); }
+
+.flag-bn {
+  background-image: url("/img/flags/bn.svg"); }
+
+.flag-bo {
+  background-image: url("/img/flags/bo.svg"); }
+
+.flag-bq {
+  background-image: url("/img/flags/bq.svg"); }
+
+.flag-br {
+  background-image: url("/img/flags/br.svg"); }
+
+.flag-bs {
+  background-image: url("/img/flags/bs.svg"); }
+
+.flag-bt {
+  background-image: url("/img/flags/bt.svg"); }
+
+.flag-bv {
+  background-image: url("/img/flags/bv.svg"); }
+
+.flag-bw {
+  background-image: url("/img/flags/bw.svg"); }
+
+.flag-by {
+  background-image: url("/img/flags/by.svg"); }
+
+.flag-bz {
+  background-image: url("/img/flags/bz.svg"); }
+
+.flag-ca {
+  background-image: url("/img/flags/ca.svg"); }
+
+.flag-cc {
+  background-image: url("/img/flags/cc.svg"); }
+
+.flag-cd {
+  background-image: url("/img/flags/cd.svg"); }
+
+.flag-cf {
+  background-image: url("/img/flags/cf.svg"); }
+
+.flag-cg {
+  background-image: url("/img/flags/cg.svg"); }
+
+.flag-ch {
+  background-image: url("/img/flags/ch.svg"); }
+
+.flag-ci {
+  background-image: url("/img/flags/ci.svg"); }
+
+.flag-ck {
+  background-image: url("/img/flags/ck.svg"); }
+
+.flag-cl {
+  background-image: url("/img/flags/cl.svg"); }
+
+.flag-cm {
+  background-image: url("/img/flags/cm.svg"); }
+
+.flag-cn {
+  background-image: url("/img/flags/cn.svg"); }
+
+.flag-co {
+  background-image: url("/img/flags/co.svg"); }
+
+.flag-cr {
+  background-image: url("/img/flags/cr.svg"); }
+
+.flag-cu {
+  background-image: url("/img/flags/cu.svg"); }
+
+.flag-cv {
+  background-image: url("/img/flags/cv.svg"); }
+
+.flag-cw {
+  background-image: url("/img/flags/cw.svg"); }
+
+.flag-cx {
+  background-image: url("/img/flags/cx.svg"); }
+
+.flag-cy {
+  background-image: url("/img/flags/cy.svg"); }
+
+.flag-cz {
+  background-image: url("/img/flags/cz.svg"); }
+
+.flag-de {
+  background-image: url("/img/flags/de.svg"); }
+
+.flag-dj {
+  background-image: url("/img/flags/dj.svg"); }
+
+.flag-dk {
+  background-image: url("/img/flags/dk.svg"); }
+
+.flag-dm {
+  background-image: url("/img/flags/dm.svg"); }
+
+.flag-do {
+  background-image: url("/img/flags/do.svg"); }
+
+.flag-dz {
+  background-image: url("/img/flags/dz.svg"); }
+
+.flag-ec {
+  background-image: url("/img/flags/ec.svg"); }
+
+.flag-ee {
+  background-image: url("/img/flags/ee.svg"); }
+
+.flag-eg {
+  background-image: url("/img/flags/eg.svg"); }
+
+.flag-eh {
+  background-image: url("/img/flags/eh.svg"); }
+
+.flag-er {
+  background-image: url("/img/flags/er.svg"); }
+
+.flag-es {
+  background-image: url("/img/flags/es.svg"); }
+
+.flag-et {
+  background-image: url("/img/flags/et.svg"); }
+
+.flag-fi {
+  background-image: url("/img/flags/fi.svg"); }
+
+.flag-fj {
+  background-image: url("/img/flags/fj.svg"); }
+
+.flag-fk {
+  background-image: url("/img/flags/fk.svg"); }
+
+.flag-fm {
+  background-image: url("/img/flags/fm.svg"); }
+
+.flag-fo {
+  background-image: url("/img/flags/fo.svg"); }
+
+.flag-fr {
+  background-image: url("/img/flags/fr.svg"); }
+
+.flag-ga {
+  background-image: url("/img/flags/ga.svg"); }
+
+.flag-gb {
+  background-image: url("/img/flags/gb.svg"); }
+
+.flag-gd {
+  background-image: url("/img/flags/gd.svg"); }
+
+.flag-ge {
+  background-image: url("/img/flags/ge.svg"); }
+
+.flag-gf {
+  background-image: url("/img/flags/gf.svg"); }
+
+.flag-gg {
+  background-image: url("/img/flags/gg.svg"); }
+
+.flag-gh {
+  background-image: url("/img/flags/gh.svg"); }
+
+.flag-gi {
+  background-image: url("/img/flags/gi.svg"); }
+
+.flag-gl {
+  background-image: url("/img/flags/gl.svg"); }
+
+.flag-gm {
+  background-image: url("/img/flags/gm.svg"); }
+
+.flag-gn {
+  background-image: url("/img/flags/gn.svg"); }
+
+.flag-gp {
+  background-image: url("/img/flags/gp.svg"); }
+
+.flag-gq {
+  background-image: url("/img/flags/gq.svg"); }
+
+.flag-gr {
+  background-image: url("/img/flags/gr.svg"); }
+
+.flag-gs {
+  background-image: url("/img/flags/gs.svg"); }
+
+.flag-gt {
+  background-image: url("/img/flags/gt.svg"); }
+
+.flag-gu {
+  background-image: url("/img/flags/gu.svg"); }
+
+.flag-gw {
+  background-image: url("/img/flags/gw.svg"); }
+
+.flag-gy {
+  background-image: url("/img/flags/gy.svg"); }
+
+.flag-hk {
+  background-image: url("/img/flags/hk.svg"); }
+
+.flag-hm {
+  background-image: url("/img/flags/hm.svg"); }
+
+.flag-hn {
+  background-image: url("/img/flags/hn.svg"); }
+
+.flag-hr {
+  background-image: url("/img/flags/hr.svg"); }
+
+.flag-ht {
+  background-image: url("/img/flags/ht.svg"); }
+
+.flag-hu {
+  background-image: url("/img/flags/hu.svg"); }
+
+.flag-id {
+  background-image: url("/img/flags/id.svg"); }
+
+.flag-ie {
+  background-image: url("/img/flags/ie.svg"); }
+
+.flag-il {
+  background-image: url("/img/flags/il.svg"); }
+
+.flag-im {
+  background-image: url("/img/flags/im.svg"); }
+
+.flag-in {
+  background-image: url("/img/flags/in.svg"); }
+
+.flag-io {
+  background-image: url("/img/flags/io.svg"); }
+
+.flag-iq {
+  background-image: url("/img/flags/iq.svg"); }
+
+.flag-ir {
+  background-image: url("/img/flags/ir.svg"); }
+
+.flag-is {
+  background-image: url("/img/flags/is.svg"); }
+
+.flag-it {
+  background-image: url("/img/flags/it.svg"); }
+
+.flag-je {
+  background-image: url("/img/flags/je.svg"); }
+
+.flag-jm {
+  background-image: url("/img/flags/jm.svg"); }
+
+.flag-jo {
+  background-image: url("/img/flags/jo.svg"); }
+
+.flag-jp {
+  background-image: url("/img/flags/jp.svg"); }
+
+.flag-ke {
+  background-image: url("/img/flags/ke.svg"); }
+
+.flag-kg {
+  background-image: url("/img/flags/kg.svg"); }
+
+.flag-kh {
+  background-image: url("/img/flags/kh.svg"); }
+
+.flag-ki {
+  background-image: url("/img/flags/ki.svg"); }
+
+.flag-km {
+  background-image: url("/img/flags/km.svg"); }
+
+.flag-kn {
+  background-image: url("/img/flags/kn.svg"); }
+
+.flag-kp {
+  background-image: url("/img/flags/kp.svg"); }
+
+.flag-kr {
+  background-image: url("/img/flags/kr.svg"); }
+
+.flag-kw {
+  background-image: url("/img/flags/kw.svg"); }
+
+.flag-ky {
+  background-image: url("/img/flags/ky.svg"); }
+
+.flag-kz {
+  background-image: url("/img/flags/kz.svg"); }
+
+.flag-la {
+  background-image: url("/img/flags/la.svg"); }
+
+.flag-lb {
+  background-image: url("/img/flags/lb.svg"); }
+
+.flag-lc {
+  background-image: url("/img/flags/lc.svg"); }
+
+.flag-li {
+  background-image: url("/img/flags/li.svg"); }
+
+.flag-lk {
+  background-image: url("/img/flags/lk.svg"); }
+
+.flag-lr {
+  background-image: url("/img/flags/lr.svg"); }
+
+.flag-ls {
+  background-image: url("/img/flags/ls.svg"); }
+
+.flag-lt {
+  background-image: url("/img/flags/lt.svg"); }
+
+.flag-lu {
+  background-image: url("/img/flags/lu.svg"); }
+
+.flag-lv {
+  background-image: url("/img/flags/lv.svg"); }
+
+.flag-ly {
+  background-image: url("/img/flags/ly.svg"); }
+
+.flag-ma {
+  background-image: url("/img/flags/ma.svg"); }
+
+.flag-mc {
+  background-image: url("/img/flags/mc.svg"); }
+
+.flag-md {
+  background-image: url("/img/flags/md.svg"); }
+
+.flag-me {
+  background-image: url("/img/flags/me.svg"); }
+
+.flag-mf {
+  background-image: url("/img/flags/mf.svg"); }
+
+.flag-mg {
+  background-image: url("/img/flags/mg.svg"); }
+
+.flag-mh {
+  background-image: url("/img/flags/mh.svg"); }
+
+.flag-mk {
+  background-image: url("/img/flags/mk.svg"); }
+
+.flag-ml {
+  background-image: url("/img/flags/ml.svg"); }
+
+.flag-mm {
+  background-image: url("/img/flags/mm.svg"); }
+
+.flag-mn {
+  background-image: url("/img/flags/mn.svg"); }
+
+.flag-mo {
+  background-image: url("/img/flags/mo.svg"); }
+
+.flag-mp {
+  background-image: url("/img/flags/mp.svg"); }
+
+.flag-mq {
+  background-image: url("/img/flags/mq.svg"); }
+
+.flag-mr {
+  background-image: url("/img/flags/mr.svg"); }
+
+.flag-ms {
+  background-image: url("/img/flags/ms.svg"); }
+
+.flag-mt {
+  background-image: url("/img/flags/mt.svg"); }
+
+.flag-mu {
+  background-image: url("/img/flags/mu.svg"); }
+
+.flag-mv {
+  background-image: url("/img/flags/mv.svg"); }
+
+.flag-mw {
+  background-image: url("/img/flags/mw.svg"); }
+
+.flag-mx {
+  background-image: url("/img/flags/mx.svg"); }
+
+.flag-my {
+  background-image: url("/img/flags/my.svg"); }
+
+.flag-mz {
+  background-image: url("/img/flags/mz.svg"); }
+
+.flag-na {
+  background-image: url("/img/flags/na.svg"); }
+
+.flag-nc {
+  background-image: url("/img/flags/nc.svg"); }
+
+.flag-ne {
+  background-image: url("/img/flags/ne.svg"); }
+
+.flag-nf {
+  background-image: url("/img/flags/nf.svg"); }
+
+.flag-ng {
+  background-image: url("/img/flags/ng.svg"); }
+
+.flag-ni {
+  background-image: url("/img/flags/ni.svg"); }
+
+.flag-nl {
+  background-image: url("/img/flags/nl.svg"); }
+
+.flag-no {
+  background-image: url("/img/flags/no.svg"); }
+
+.flag-np {
+  background-image: url("/img/flags/np.svg"); }
+
+.flag-nr {
+  background-image: url("/img/flags/nr.svg"); }
+
+.flag-nu {
+  background-image: url("/img/flags/nu.svg"); }
+
+.flag-nz {
+  background-image: url("/img/flags/nz.svg"); }
+
+.flag-om {
+  background-image: url("/img/flags/om.svg"); }
+
+.flag-pa {
+  background-image: url("/img/flags/pa.svg"); }
+
+.flag-pe {
+  background-image: url("/img/flags/pe.svg"); }
+
+.flag-pf {
+  background-image: url("/img/flags/pf.svg"); }
+
+.flag-pg {
+  background-image: url("/img/flags/pg.svg"); }
+
+.flag-ph {
+  background-image: url("/img/flags/ph.svg"); }
+
+.flag-pk {
+  background-image: url("/img/flags/pk.svg"); }
+
+.flag-pl {
+  background-image: url("/img/flags/pl.svg"); }
+
+.flag-pm {
+  background-image: url("/img/flags/pm.svg"); }
+
+.flag-pn {
+  background-image: url("/img/flags/pn.svg"); }
+
+.flag-pr {
+  background-image: url("/img/flags/pr.svg"); }
+
+.flag-ps {
+  background-image: url("/img/flags/ps.svg"); }
+
+.flag-pt {
+  background-image: url("/img/flags/pt.svg"); }
+
+.flag-pw {
+  background-image: url("/img/flags/pw.svg"); }
+
+.flag-py {
+  background-image: url("/img/flags/py.svg"); }
+
+.flag-qa {
+  background-image: url("/img/flags/qa.svg"); }
+
+.flag-re {
+  background-image: url("/img/flags/re.svg"); }
+
+.flag-ro {
+  background-image: url("/img/flags/ro.svg"); }
+
+.flag-rs {
+  background-image: url("/img/flags/rs.svg"); }
+
+.flag-ru {
+  background-image: url("/img/flags/ru.svg"); }
+
+.flag-rw {
+  background-image: url("/img/flags/rw.svg"); }
+
+.flag-sa {
+  background-image: url("/img/flags/sa.svg"); }
+
+.flag-sb {
+  background-image: url("/img/flags/sb.svg"); }
+
+.flag-sc {
+  background-image: url("/img/flags/sc.svg"); }
+
+.flag-sd {
+  background-image: url("/img/flags/sd.svg"); }
+
+.flag-se {
+  background-image: url("/img/flags/se.svg"); }
+
+.flag-sg {
+  background-image: url("/img/flags/sg.svg"); }
+
+.flag-sh {
+  background-image: url("/img/flags/sh.svg"); }
+
+.flag-si {
+  background-image: url("/img/flags/si.svg"); }
+
+.flag-sj {
+  background-image: url("/img/flags/sj.svg"); }
+
+.flag-sk {
+  background-image: url("/img/flags/sk.svg"); }
+
+.flag-sl {
+  background-image: url("/img/flags/sl.svg"); }
+
+.flag-sm {
+  background-image: url("/img/flags/sm.svg"); }
+
+.flag-sn {
+  background-image: url("/img/flags/sn.svg"); }
+
+.flag-so {
+  background-image: url("/img/flags/so.svg"); }
+
+.flag-sr {
+  background-image: url("/img/flags/sr.svg"); }
+
+.flag-ss {
+  background-image: url("/img/flags/ss.svg"); }
+
+.flag-st {
+  background-image: url("/img/flags/st.svg"); }
+
+.flag-sv {
+  background-image: url("/img/flags/sv.svg"); }
+
+.flag-sx {
+  background-image: url("/img/flags/sx.svg"); }
+
+.flag-sy {
+  background-image: url("/img/flags/sy.svg"); }
+
+.flag-sz {
+  background-image: url("/img/flags/sz.svg"); }
+
+.flag-tc {
+  background-image: url("/img/flags/tc.svg"); }
+
+.flag-td {
+  background-image: url("/img/flags/td.svg"); }
+
+.flag-tf {
+  background-image: url("/img/flags/tf.svg"); }
+
+.flag-tg {
+  background-image: url("/img/flags/tg.svg"); }
+
+.flag-th {
+  background-image: url("/img/flags/th.svg"); }
+
+.flag-tj {
+  background-image: url("/img/flags/tj.svg"); }
+
+.flag-tk {
+  background-image: url("/img/flags/tk.svg"); }
+
+.flag-tl {
+  background-image: url("/img/flags/tl.svg"); }
+
+.flag-tm {
+  background-image: url("/img/flags/tm.svg"); }
+
+.flag-tn {
+  background-image: url("/img/flags/tn.svg"); }
+
+.flag-to {
+  background-image: url("/img/flags/to.svg"); }
+
+.flag-tr {
+  background-image: url("/img/flags/tr.svg"); }
+
+.flag-tt {
+  background-image: url("/img/flags/tt.svg"); }
+
+.flag-tv {
+  background-image: url("/img/flags/tv.svg"); }
+
+.flag-tw {
+  background-image: url("/img/flags/tw.svg"); }
+
+.flag-tz {
+  background-image: url("/img/flags/tz.svg"); }
+
+.flag-ua {
+  background-image: url("/img/flags/ua.svg"); }
+
+.flag-ug {
+  background-image: url("/img/flags/ug.svg"); }
+
+.flag-um {
+  background-image: url("/img/flags/um.svg"); }
+
+.flag-us {
+  background-image: url("/img/flags/us.svg"); }
+
+.flag-uy {
+  background-image: url("/img/flags/uy.svg"); }
+
+.flag-uz {
+  background-image: url("/img/flags/uz.svg"); }
+
+.flag-va {
+  background-image: url("/img/flags/va.svg"); }
+
+.flag-vc {
+  background-image: url("/img/flags/vc.svg"); }
+
+.flag-ve {
+  background-image: url("/img/flags/ve.svg"); }
+
+.flag-vg {
+  background-image: url("/img/flags/vg.svg"); }
+
+.flag-vi {
+  background-image: url("/img/flags/vi.svg"); }
+
+.flag-vn {
+  background-image: url("/img/flags/vn.svg"); }
+
+.flag-vu {
+  background-image: url("/img/flags/vu.svg"); }
+
+.flag-wf {
+  background-image: url("/img/flags/wf.svg"); }
+
+.flag-ws {
+  background-image: url("/img/flags/ws.svg"); }
+
+.flag-ye {
+  background-image: url("/img/flags/ye.svg"); }
+
+.flag-yt {
+  background-image: url("/img/flags/yt.svg"); }
+
+.flag-za {
+  background-image: url("/img/flags/za.svg"); }
+
+.flag-zm {
+  background-image: url("/img/flags/zm.svg"); }
+
+.flag-zw {
+  background-image: url("/img/flags/zw.svg"); }
+
+.flag-es-ct {
+  background-image: url("/img/flags/es-ct.svg"); }
+
+.flag-eu {
+  background-image: url("/img/flags/eu.svg"); }
+
+.flag-gb-eng {
+  background-image: url("/img/flags/gb-eng.svg"); }
+
+.flag-gb-nir {
+  background-image: url("/img/flags/gb-nir.svg"); }
+
+.flag-gb-sct {
+  background-image: url("/img/flags/gb-sct.svg"); }
+
+.flag-gb-wls {
+  background-image: url("/img/flags/gb-wls.svg"); }
+
+.flag-un {
+  background-image: url("/img/flags/un.svg"); }
+
+.flag-size-md {
+  width: 2.66666rem;
+  height: 2rem; }
+
+.flag-size-lg {
+  width: 3.99999rem;
+  height: 3rem; }
+
+.flag-size-xl {
+  width: 5.33332rem;
+  height: 4rem; }
+/*# sourceMappingURL=tabler-flags.css.map */

demo/dist/js/tabler-charts.js

@@ -0,0 +1,182 @@
+/*!
+  * Tabler v0.9.0 (https://tabler.io)
+  * Copyright 2018-2019 codecalm
+  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */
+'use strict';
+
+(function ($) {
+  $(document).ready(function () {
+    $().peity &&
+    $('[data-spark]').each(function () {
+      const $this = $(this),
+        data = $this.attr('data-spark'),
+        color = $this.attr('data-spark-color') || 'blue',
+        type = $this.attr('data-spark-type') || 'line';
+
+      const $div = $('<div/>').html(data);
+      $this.append($div);
+
+      let strokeColor = tabler.colors[color],
+        fillColor = tabler.colors[color];
+
+      if (type === 'donut' || type === 'pie') {
+        fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
+      } else if (type === 'bar') {
+        fillColor = [fillColor];
+      } else if (type === 'line') {
+        fillColor = tabler.hexToRgbA(fillColor, 0.1);
+      }
+
+      $div.peity(type, {
+        width: $this.width(),
+        height: $this.height(),
+        // max: 100,
+        // min: 0,
+        stroke: strokeColor,
+        strokeWidth: 2,
+        fill: fillColor,
+        padding: 0.2,
+        innerRadius: type === 'donut' ? 17 : 0,
+      });
+    });
+  });
+})(jQuery);
+
+/*
+charts default configuration
+ */
+if (window.Apex) {
+  const borderColor = 'rgba(0, 0, 0, 0.09)';
+  const mutedColor = '#888e9a';
+
+  window.Apex = {
+    chart: {
+      fontFamily: 'inherit',
+      foreColor: 'currentColor',
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+      animations: {
+        enabled: false,
+      },
+    },
+
+    grid: {
+      show: false,
+      position: 'back',
+      borderColor: borderColor,
+      padding: {
+        right: 0,
+        left: 0,
+        bottom: 0,
+        top: 0,
+      },
+    },
+
+    dataLabels: {
+      enabled: false,
+      dropShadow: {
+        enabled: false,
+      },
+    },
+
+    plotOptions: {
+      pie: {
+        customScale: 1,
+        expandOnClick: false,
+        dataLabels: {
+          minAngleToShowLabel: 10,
+        },
+        donut: {
+          size: '80%'
+        }
+      },
+    },
+
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+      lineCap: "round",
+    },
+
+    fill: {
+      type: 'solid',
+      opacity: 1,
+    },
+
+    markers: {
+      size: 0,
+      strokeWidth: 1,
+      radius: 2,
+      hover: {
+        size: 4,
+      },
+    },
+
+    legend: {
+      show: true,
+      fontSize: '14px',
+      markers: {
+        width: 8,
+        height: 8,
+      },
+      itemMargin: {
+        horizontal: 0,
+        vertical: 8,
+      },
+    },
+
+    title: {
+      margin: 0,
+      floating: true,
+      offsetX: 10,
+      style: {
+        fontSize: '18px',
+      },
+    },
+
+    subtitle: {
+      margin: 0,
+    },
+
+    tooltip: {
+      fillSeriesColor: false,
+    },
+
+    xaxis: {
+      labels: {
+        style: {
+          colors: mutedColor,
+          fontSize: '12px',
+        },
+        datetimeFormatter: {
+          year: 'yyyy',
+          month: 'MMM \'yy',
+          day: 'd MMM',
+          hour: 'HH:mm'
+        }
+      },
+      tooltip: {
+        enabled: false,
+      },
+      axisBorder: {
+        color: borderColor,
+        height: 0,
+      },
+      axisTicks: {
+        show: true,
+        height: 4,
+        color: borderColor,
+      },
+    },
+
+    yaxis: {
+      show: false,
+    },
+  };
+}
+//# sourceMappingURL=tabler-charts.js.map

demo/dist/js/tabler-charts.min.js

@@ -0,0 +1,6 @@
+/*!
+  * Tabler v0.9.0 (https://tabler.io)
+  * Copyright 2018-2019 codecalm
+  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */'use strict';if(function(a){a(document).ready(function(){a().peity&&a("[data-spark]").each(function(){var b=a(this),c=b.attr("data-spark"),d=b.attr("data-spark-color")||"blue",e=b.attr("data-spark-type")||"line",f=a("<div/>").html(c);b.append(f);var g=tabler.colors[d],h=tabler.colors[d];"donut"===e||"pie"===e?h=[h,tabler.hexToRgbA(h,.1)]:"bar"===e?h=[h]:"line"===e&&(h=tabler.hexToRgbA(h,.1)),f.peity(e,{width:b.width(),height:b.height(),stroke:g,strokeWidth:2,fill:h,padding:.2,innerRadius:"donut"===e?17:0})})})}(jQuery),window.Apex){var borderColor="rgba(0, 0, 0, 0.09)",mutedColor="#888e9a";window.Apex={chart:{fontFamily:"inherit",foreColor:"currentColor",toolbar:{show:!1},zoom:{enabled:!1},animations:{enabled:!1}},grid:{show:!1,position:"back",borderColor:borderColor,padding:{right:0,left:0,bottom:0,top:0}},dataLabels:{enabled:!1,dropShadow:{enabled:!1}},plotOptions:{pie:{customScale:1,expandOnClick:!1,dataLabels:{minAngleToShowLabel:10},donut:{size:"80%"}}},stroke:{width:2,curve:"smooth",lineCap:"round"},fill:{type:"solid",opacity:1},markers:{size:0,strokeWidth:1,radius:2,hover:{size:4}},legend:{show:!0,fontSize:"14px",markers:{width:8,height:8},itemMargin:{horizontal:0,vertical:8}},title:{margin:0,floating:!0,offsetX:10,style:{fontSize:"18px"}},subtitle:{margin:0},tooltip:{fillSeriesColor:!1},xaxis:{labels:{style:{colors:mutedColor,fontSize:"12px"},datetimeFormatter:{year:"yyyy",month:"MMM 'yy",day:"d MMM",hour:"HH:mm"}},tooltip:{enabled:!1},axisBorder:{color:borderColor,height:0},axisTicks:{show:!0,height:4,color:borderColor}},yaxis:{show:!1}}}
+//# sourceMappingURL=tabler-charts.min.js.map

demo/dist/js/tabler.js

@@ -0,0 +1,174 @@
+/*!
+  * Tabler v0.9.0 (https://tabler.io)
+  * Copyright 2018-2019 codecalm
+  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */
+'use strict';
+
+const tabler = {
+  colorVariation: function(color, variation) {
+    const colorValue = this.colors[color];
+
+    if (colorValue) {
+      switch (variation) {
+        case 'light':
+          return this.mixColors(colorValue, '#ffffff', 70);
+        case 'lighten':
+          return this.mixColors(colorValue, '#ffffff', 30);
+        case 'lightest':
+          return this.mixColors(colorValue, '#ffffff', 10);
+        case 'dark':
+          return this.mixColors(colorValue, '#000000', 80);
+        case 'darken':
+          return this.mixColors(colorValue, '#000000', 40);
+        case 'darkest':
+          return this.mixColors(colorValue, '#000000', 20);
+      }
+
+      return colorValue;
+    }
+
+    throw new Error('Wrong color: ' + color);
+  },
+
+  hexToRgbA: function(hex, opacity) {
+    let c;
+
+    opacity = opacity || 1;
+
+    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+      c = hex.substring(1).split('');
+      if (c.length === 3) {
+        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+      }
+      c = '0x' + c.join('');
+      return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+    }
+    throw new Error('Bad Hex');
+  },
+
+  mixColors: function(color_1, color_2, weight) {
+    color_1 = color_1.substr(1);
+    color_2 = color_2.substr(1);
+
+    function d2h(d) {
+      return d.toString(16);
+    }
+
+    function h2d(h) {
+      return parseInt(h, 16);
+    }
+
+    weight = typeof weight !== 'undefined' ? weight : 50;
+
+    let color = '#';
+
+    for (let i = 0; i <= 5; i += 2) {
+      let v1 = h2d(color_1.substr(i, 2)),
+        v2 = h2d(color_2.substr(i, 2));
+
+      let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
+
+      while (val.length < 2) {
+        val = '0' + val;
+      }
+
+      color += val;
+    }
+
+    return color;
+  },
+
+  colors: (window.tabler_colors || []),
+
+  toggleFullscreen: function(elem) {
+    elem = elem || document.documentElement;
+    if (
+      !document.fullscreenElement &&
+      !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement &&
+      !document.msFullscreenElement
+    ) {
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+  },
+};
+
+$(document).ready(function() {
+  const $body = $('body');
+
+  $body.on('click', '[data-toggle="menubar"]', function(e) {
+    $body.toggleClass('aside-visible');
+
+    e.preventDefault();
+    return false;
+  });
+
+  // $('[data-toggle="tooltip"]').tooltip();
+  // $('[data-toggle="popover"]').popover();
+
+  /*
+  Autosize plugin
+   */
+  if (window.autosize) {
+    (function() {
+      const elements = document.querySelectorAll('[data-toggle="autosize"]');
+
+      if (elements.length) {
+        elements.forEach(function(element) {
+          autosize(element);
+        });
+      }
+    })();
+  }
+
+  /*
+  Imask plugin
+   */
+  if (window.IMask) {
+    (function() {
+      const $elem = $('[data-mask]');
+
+      if ($elem) {
+        $elem.each(function() {
+          IMask($(this).get(0), {
+            mask: $(this).attr('data-mask'),
+            lazy: $(this).attr('data-mask-visible') === 'true',
+          });
+        });
+      }
+    })();
+  }
+
+  /**
+   * Seelectize plugin
+   */
+  if (jQuery && jQuery().selectize) {
+    const $elem = $('[data-selectize]');
+
+    if ($elem) {
+      $elem.selectize();
+    }
+  }
+});
+
+window.tabler = tabler;
+//# sourceMappingURL=tabler.js.map

demo/dist/js/tabler.min.js

@@ -0,0 +1,6 @@
+/*!
+  * Tabler v0.9.0 (https://tabler.io)
+  * Copyright 2018-2019 codecalm
+  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */'use strict';var tabler={colorVariation:function(a,b){var c=this.colors[a];if(c)return"light"===b?this.mixColors(c,"#ffffff",70):"lighten"===b?this.mixColors(c,"#ffffff",30):"lightest"===b?this.mixColors(c,"#ffffff",10):"dark"===b?this.mixColors(c,"#000000",80):"darken"===b?this.mixColors(c,"#000000",40):"darkest"===b?this.mixColors(c,"#000000",20):c;throw new Error("Wrong color: "+a)},hexToRgbA:function(a,b){var d;if(b=b||1,/^#([A-Fa-f0-9]{3}){1,2}$/.test(a))return d=a.substring(1).split(""),3===d.length&&(d=[d[0],d[0],d[1],d[1],d[2],d[2]]),d="0x"+d.join(""),"rgba("+[255&d>>16,255&d>>8,255&d].join(",")+","+b+")";throw new Error("Bad Hex")},mixColors:function(a,b,c){var f=Math.floor;function d(a){return a.toString(16)}function e(a){return parseInt(a,16)}a=a.substr(1),b=b.substr(1),c="undefined"==typeof c?50:c;for(var g="#",h=0;5>=h;h+=2){for(var j=e(a.substr(h,2)),k=e(b.substr(h,2)),l=d(f(k+(j-k)*(c/100)));2>l.length;)l="0"+l;g+=l}return g},colors:window.tabler_colors||[],toggleFullscreen:function(a){a=a||document.documentElement,document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement?document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen():a.requestFullscreen?a.requestFullscreen():a.msRequestFullscreen?a.msRequestFullscreen():a.mozRequestFullScreen?a.mozRequestFullScreen():a.webkitRequestFullscreen&&a.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}};$(document).ready(function(){var a=$("body");if(a.on("click","[data-toggle=\"menubar\"]",function(b){return a.toggleClass("aside-visible"),b.preventDefault(),!1}),window.autosize&&function(){var a=document.querySelectorAll("[data-toggle=\"autosize\"]");a.length&&a.forEach(function(a){autosize(a)})}(),window.IMask&&function(){var a=$("[data-mask]");a&&a.each(function(){IMask($(this).get(0),{mask:$(this).attr("data-mask"),lazy:"true"===$(this).attr("data-mask-visible")})})}(),jQuery&&jQuery().selectize){var b=$("[data-selectize]");b&&b.selectize()}}),window.tabler=tabler;
+//# sourceMappingURL=tabler.min.js.map

demo/dist/libs/autosize/dist/autosize.min.js

@@ -0,0 +1,6 @@
+/*!
+	autosize 4.0.2
+	license: MIT
+	http://www.jacklmoore.com/autosize
+*/
+!function(e,t){if("function"==typeof define&&define.amd)define(["module","exports"],t);else if("undefined"!=typeof exports)t(module,exports);else{var n={exports:{}};t(n,n.exports),e.autosize=n.exports}}(this,function(e,t){"use strict";var n,o,p="function"==typeof Map?new Map:(n=[],o=[],{has:function(e){return-1<n.indexOf(e)},get:function(e){return o[n.indexOf(e)]},set:function(e,t){-1===n.indexOf(e)&&(n.push(e),o.push(t))},delete:function(e){var t=n.indexOf(e);-1<t&&(n.splice(t,1),o.splice(t,1))}}),c=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){c=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(r){if(r&&r.nodeName&&"TEXTAREA"===r.nodeName&&!p.has(r)){var e,n=null,o=null,i=null,d=function(){r.clientWidth!==o&&a()},l=function(t){window.removeEventListener("resize",d,!1),r.removeEventListener("input",a,!1),r.removeEventListener("keyup",a,!1),r.removeEventListener("autosize:destroy",l,!1),r.removeEventListener("autosize:update",a,!1),Object.keys(t).forEach(function(e){r.style[e]=t[e]}),p.delete(r)}.bind(r,{height:r.style.height,resize:r.style.resize,overflowY:r.style.overflowY,overflowX:r.style.overflowX,wordWrap:r.style.wordWrap});r.addEventListener("autosize:destroy",l,!1),"onpropertychange"in r&&"oninput"in r&&r.addEventListener("keyup",a,!1),window.addEventListener("resize",d,!1),r.addEventListener("input",a,!1),r.addEventListener("autosize:update",a,!1),r.style.overflowX="hidden",r.style.wordWrap="break-word",p.set(r,{destroy:l,update:a}),"vertical"===(e=window.getComputedStyle(r,null)).resize?r.style.resize="none":"both"===e.resize&&(r.style.resize="horizontal"),n="content-box"===e.boxSizing?-(parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)):parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth),isNaN(n)&&(n=0),a()}function s(e){var t=r.style.width;r.style.width="0px",r.offsetWidth,r.style.width=t,r.style.overflowY=e}function u(){if(0!==r.scrollHeight){var e=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(r),t=document.documentElement&&document.documentElement.scrollTop;r.style.height="",r.style.height=r.scrollHeight+n+"px",o=r.clientWidth,e.forEach(function(e){e.node.scrollTop=e.scrollTop}),t&&(document.documentElement.scrollTop=t)}}function a(){u();var e=Math.round(parseFloat(r.style.height)),t=window.getComputedStyle(r,null),n="content-box"===t.boxSizing?Math.round(parseFloat(t.height)):r.offsetHeight;if(n<e?"hidden"===t.overflowY&&(s("scroll"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight):"hidden"!==t.overflowY&&(s("hidden"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight),i!==n){i=n;var o=c("autosize:resized");try{r.dispatchEvent(o)}catch(e){}}}}function i(e){var t=p.get(e);t&&t.destroy()}function d(e){var t=p.get(e);t&&t.update()}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return r(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],d),e}),t.default=l,e.exports=t.default});

demo/dist/libs/fullcalendar/daygrid/main.min.css

@@ -0,0 +1 @@
+.fc-dayGridDay-view .fc-content-skeleton,.fc-dayGridWeek-view .fc-content-skeleton{padding-bottom:1em}.fc-dayGrid-view .fc-body .fc-row{min-height:4em}.fc-row.fc-rigid{overflow:hidden}.fc-row.fc-rigid .fc-content-skeleton{position:absolute;top:0;left:0;right:0}.fc-day-top.fc-other-month{opacity:.3}.fc-dayGrid-view .fc-day-number,.fc-dayGrid-view .fc-week-number{padding:2px}.fc-dayGrid-view th.fc-day-number,.fc-dayGrid-view th.fc-week-number{padding:0 2px}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number{float:right}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number{float:left}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number{float:left;border-radius:0 0 3px}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number{float:right;border-radius:0 0 0 3px}.fc-dayGrid-view .fc-day-top .fc-week-number{min-width:1.5em;text-align:center;background-color:#f2f2f2;color:grey}.fc-dayGrid-view td.fc-week-number{text-align:center}.fc-dayGrid-view td.fc-week-number>*{display:inline-block;min-width:1.25em}

demo/dist/libs/fullcalendar/list/main.min.css

@@ -0,0 +1 @@
+.fc-event-dot{display:inline-block;width:10px;height:10px;border-radius:5px}.fc-rtl .fc-list-view{direction:rtl}.fc-list-view{border-width:1px;border-style:solid}.fc .fc-list-table{table-layout:auto}.fc-list-table td{border-width:1px 0 0;padding:8px 14px}.fc-list-table tr:first-child td{border-top-width:0}.fc-list-heading{border-bottom-width:1px}.fc-list-heading td{font-weight:700}.fc-ltr .fc-list-heading-main{float:left}.fc-ltr .fc-list-heading-alt,.fc-rtl .fc-list-heading-main{float:right}.fc-rtl .fc-list-heading-alt{float:left}.fc-list-item.fc-has-url{cursor:pointer}.fc-list-item-marker,.fc-list-item-time{white-space:nowrap;width:1px}.fc-ltr .fc-list-item-marker{padding-right:0}.fc-rtl .fc-list-item-marker{padding-left:0}.fc-list-item-title a{text-decoration:none;color:inherit}.fc-list-item-title a[href]:hover{text-decoration:underline}.fc-list-empty-wrap2{position:absolute;top:0;left:0;right:0;bottom:0}.fc-list-empty-wrap1{width:100%;height:100%;display:table}.fc-list-empty{display:table-cell;vertical-align:middle;text-align:center}.fc-unthemed .fc-list-empty{background-color:#eee}

demo/dist/libs/fullcalendar/timegrid/main.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";.fc-timeGrid-view .fc-day-grid{position:relative;z-index:2}.fc-timeGrid-view .fc-day-grid .fc-row{min-height:3em}.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton{padding-bottom:1em}.fc .fc-axis{vertical-align:middle;padding:0 4px;white-space:nowrap}.fc-ltr .fc-axis{text-align:right}.fc-rtl .fc-axis{text-align:left}.fc-time-grid,.fc-time-grid-container{position:relative;z-index:1}.fc-time-grid{min-height:100%}.fc-time-grid table{border:0 hidden transparent}.fc-time-grid>.fc-bg{z-index:1}.fc-time-grid .fc-slats,.fc-time-grid>hr{position:relative;z-index:2}.fc-time-grid .fc-content-col{position:relative}.fc-time-grid .fc-content-skeleton{position:absolute;z-index:3;top:0;left:0;right:0}.fc-time-grid .fc-business-container{position:relative;z-index:1}.fc-time-grid .fc-bgevent-container{position:relative;z-index:2}.fc-time-grid .fc-highlight-container{z-index:3;position:relative}.fc-time-grid .fc-event-container{position:relative;z-index:4}.fc-time-grid .fc-now-indicator-line{z-index:5}.fc-time-grid .fc-mirror-container{position:relative;z-index:6}.fc-time-grid .fc-slats td{height:1.5em;border-bottom:0}.fc-time-grid .fc-slats .fc-minor td{border-top-style:dotted}.fc-time-grid .fc-highlight{position:absolute;left:0;right:0}.fc-ltr .fc-time-grid .fc-event-container{margin:0 2.5% 0 2px}.fc-rtl .fc-time-grid .fc-event-container{margin:0 2px 0 2.5%}.fc-time-grid .fc-bgevent,.fc-time-grid .fc-event{position:absolute;z-index:1}.fc-time-grid .fc-bgevent{left:0;right:0}.fc-time-grid-event{margin-bottom:1px}.fc-time-grid-event-inset{-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}.fc-time-grid-event.fc-not-start{border-top-width:0;padding-top:1px;border-top-left-radius:0;border-top-right-radius:0}.fc-time-grid-event.fc-not-end{border-bottom-width:0;padding-bottom:1px;border-bottom-left-radius:0;border-bottom-right-radius:0}.fc-time-grid-event .fc-content{overflow:hidden;max-height:100%}.fc-time-grid-event .fc-time,.fc-time-grid-event .fc-title{padding:0 1px}.fc-time-grid-event .fc-time{font-size:.85em;white-space:nowrap}.fc-time-grid-event.fc-short .fc-content{white-space:nowrap}.fc-time-grid-event.fc-short .fc-time,.fc-time-grid-event.fc-short .fc-title{display:inline-block;vertical-align:top}.fc-time-grid-event.fc-short .fc-time span{display:none}.fc-time-grid-event.fc-short .fc-time:before{content:attr(data-start)}.fc-time-grid-event.fc-short .fc-time:after{content:" - "}.fc-time-grid-event.fc-short .fc-title{font-size:.85em;padding:0}.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer{left:0;right:0;bottom:0;height:8px;overflow:hidden;line-height:8px;font-size:11px;font-family:monospace;text-align:center;cursor:s-resize}.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after{content:"="}.fc-time-grid-event.fc-selected .fc-resizer{border-radius:5px;border-width:1px;width:8px;height:8px;border-style:solid;border-color:inherit;background:#fff;left:50%;margin-left:-5px;bottom:-5px}.fc-time-grid .fc-now-indicator-line{border-top-width:1px;left:0;right:0}.fc-time-grid .fc-now-indicator-arrow{margin-top:-5px}.fc-ltr .fc-time-grid .fc-now-indicator-arrow{left:0;border-width:5px 0 5px 6px;border-top-color:transparent;border-bottom-color:transparent}.fc-rtl .fc-time-grid .fc-now-indicator-arrow{right:0;border-width:5px 6px 5px 0;border-top-color:transparent;border-bottom-color:transparent}

demo/dist/libs/jqvmap/dist/jqvmap.min.css

@@ -0,0 +1 @@
+.jqvmap-label,.jqvmap-pin{pointer-events:none}.jqvmap-label{position:absolute;display:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#292929;color:#fff;font-family:sans-serif,Verdana;font-size:smaller;padding:3px}.jqvmap-zoomin,.jqvmap-zoomout{position:absolute;left:10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#000;padding:3px;color:#fff;width:10px;height:10px;cursor:pointer;line-height:10px;text-align:center}.jqvmap-zoomin{top:10px}.jqvmap-zoomout{top:30px}.jqvmap-region{cursor:pointer}.jqvmap-ajax_response{width:100%;height:500px}

demo/dist/libs/peity/jquery.peity.min.js

@@ -0,0 +1,7 @@
+// Peity jQuery plugin version 3.3.0
+// (c) 2018 Ben Pickles
+//
+// http://benpickles.github.io/peity
+//
+// Released under MIT license.
+!function(t,i,e,n){var a=t.fn.peity=function(i,e){return l&&this.each(function(){var n=t(this),h=n.data("_peity");h?(i&&(h.type=i),t.extend(h.opts,e)):(h=new r(n,i,t.extend({},a.defaults[i],n.data("peity"),e)),n.change(function(){h.draw()}).data("_peity",h)),h.draw()}),this},r=function(t,i,e){this.$el=t,this.type=i,this.opts=e},h=r.prototype,s=h.svgElement=function(e,n){return t(i.createElementNS("http://www.w3.org/2000/svg",e)).attr(n)},l="createElementNS"in i&&s("svg",{})[0].createSVGRect;h.draw=function(){var t=this.opts;a.graphers[this.type].call(this,t),t.after&&t.after.call(this,t)},h.fill=function(){var i=this.opts.fill;return t.isFunction(i)?i:function(t,e){return i[e%i.length]}},h.prepare=function(t,i){return this.$svg||this.$el.hide().after(this.$svg=s("svg",{class:"peity"})),this.$svg.empty().data("_peity",this).attr({height:i,width:t})},h.values=function(){return t.map(this.$el.text().split(this.opts.delimiter),function(t){return parseFloat(t)})},a.defaults={},a.graphers={},a.register=function(t,i,e){this.defaults[t]=i,this.graphers[t]=e},a.register("pie",{fill:["#ff9900","#fff4dd","#ffc66e"],radius:8},function(i){if(!i.delimiter){var n=this.$el.text().match(/[^0-9\.]/);i.delimiter=n?n[0]:","}var a=t.map(this.values(),function(t){return t>0?t:0});if("/"==i.delimiter){var r=a[0],h=a[1];a=[r,e.max(0,h-r)]}for(var l=0,p=a.length,o=0;l<p;l++)o+=a[l];o||(p=2,o=1,a=[0,1]);var f=2*i.radius,c=this.prepare(i.width||f,i.height||f),u=c.width()/2,d=c.height()/2,g=e.min(u,d),v=i.innerRadius;"donut"!=this.type||v||(v=.5*g);var m=e.PI,y=this.fill(),w=this.scale=function(t,i){var n=t/o*m*2-m/2;return[i*e.cos(n)+u,i*e.sin(n)+d]},x=0;for(l=0;l<p;l++){var k,$=a[l],j=$/o;if(0!=j){if(1==j)if(v){var A=u-.01,E=d-g,F=d-v;k=s("path",{d:["M",u,E,"A",g,g,0,1,1,A,E,"L",A,F,"A",v,v,0,1,0,u,F].join(" "),"data-value":$})}else k=s("circle",{cx:u,cy:d,"data-value":$,r:g});else{var M=x+$,S=["M"].concat(w(x,g),"A",g,g,0,j>.5?1:0,1,w(M,g),"L");v?S=S.concat(w(M,v),"A",v,v,0,j>.5?1:0,0,w(x,v)):S.push(u,d),x+=$,k=s("path",{d:S.join(" "),"data-value":$})}k.attr("fill",y.call(this,$,l,a)),c.append(k)}}}),a.register("donut",t.extend(!0,{},a.defaults.pie),function(t){a.graphers.pie.call(this,t)}),a.register("line",{delimiter:",",fill:"#c6d9fd",height:16,min:0,stroke:"#4d89f9",strokeWidth:1,width:32},function(t){var i=this.values();1==i.length&&i.push(i[0]);for(var a=e.max.apply(e,t.max==n?i:i.concat(t.max)),r=e.min.apply(e,t.min==n?i:i.concat(t.min)),h=this.prepare(t.width,t.height),l=t.strokeWidth,p=h.width(),o=h.height()-l,f=a-r,c=this.x=function(t){return t*(p/(i.length-1))},u=this.y=function(t){var i=o;return f&&(i-=(t-r)/f*o),i+l/2},d=u(e.max(r,0)),g=[0,d],v=0;v<i.length;v++)g.push(c(v),u(i[v]));g.push(p,d),t.fill&&h.append(s("polygon",{fill:t.fill,points:g.join(" ")})),l&&h.append(s("polyline",{fill:"none",points:g.slice(2,g.length-2).join(" "),stroke:t.stroke,"stroke-width":l,"stroke-linecap":"square"}))}),a.register("bar",{delimiter:",",fill:["#4D89F9"],height:16,min:0,padding:.1,width:32},function(t){for(var i=this.values(),a=e.max.apply(e,t.max==n?i:i.concat(t.max)),r=e.min.apply(e,t.min==n?i:i.concat(t.min)),h=this.prepare(t.width,t.height),l=h.width(),p=h.height(),o=a-r,f=t.padding,c=this.fill(),u=this.x=function(t){return t*l/i.length},d=this.y=function(t){return p-(o?(t-r)/o*p:1)},g=0;g<i.length;g++){var v,m=u(g+f),y=u(g+1-f)-m,w=i[g],x=d(w),k=x,$=x;o?w<0?k=d(e.min(a,0)):$=d(e.max(r,0)):v=1,0==(v=$-k)&&(v=1,a>0&&o&&k--),h.append(s("rect",{"data-value":w,fill:c.call(this,w,g,i),x:m,y:k,width:y,height:v}))}})}(jQuery,document,Math);

demo/dist/libs/selectize/dist/css/selectize.css

@@ -0,0 +1,333 @@
+/**
+ * selectize.css (v0.12.6)
+ * Copyright (c) 2013–2015 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #fff;
+  box-shadow: inset 0 0 12px 4px #fff;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.selectize-dropdown-header {
+  position: relative;
+  padding: 5px 8px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 0 0;
+}
+.selectize-dropdown-header-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  color: #303030;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+}
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+.selectize-control.plugin-remove_button [data-value] .remove {
+  z-index: 1;
+  /* fixes ie bug (see #392) */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 17px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 2px 0 0 0;
+  border-left: 1px solid #d0d0d0;
+  -webkit-border-radius: 0 2px 2px 0;
+  -moz-border-radius: 0 2px 2px 0;
+  border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: #cacaca;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: #ffffff;
+}
+.selectize-control.plugin-remove_button .remove-single {
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 23px;
+}
+.selectize-control {
+  position: relative;
+}
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  color: #303030;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 18px;
+  -webkit-font-smoothing: inherit;
+}
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  background: #fff;
+  cursor: text;
+  display: inline-block;
+}
+.selectize-input {
+  border: 1px solid #d0d0d0;
+  padding: 8px 8px;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding: 6px 8px 3px;
+}
+.selectize-input.full {
+  background-color: #fff;
+}
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 0 0;
+}
+.selectize-input > * {
+  vertical-align: baseline;
+  display: -moz-inline-stack;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.selectize-control.multi .selectize-input > div {
+  cursor: pointer;
+  margin: 0 3px 3px 0;
+  padding: 2px 6px;
+  background: #f2f2f2;
+  color: #303030;
+  border: 0 solid #d0d0d0;
+}
+.selectize-control.multi .selectize-input > div.active {
+  background: #e8e8e8;
+  color: #303030;
+  border: 0 solid #cacaca;
+}
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #7d7d7d;
+  background: #ffffff;
+  border: 0 solid #ffffff;
+}
+.selectize-input > input {
+  display: inline-block !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  max-width: 100% !important;
+  margin: 0 2px 0 0 !important;
+  text-indent: 0 !important;
+  border: 0 none !important;
+  background: none !important;
+  line-height: inherit !important;
+  -webkit-user-select: auto !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.selectize-input > input::-ms-clear {
+  display: none;
+}
+.selectize-input > input:focus {
+  outline: none !important;
+}
+.selectize-input::after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.selectize-input.dropdown-active::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  background: #f0f0f0;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #fff;
+  margin: -1px 0 0 0;
+  border-top: 0 none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 0 0 3px 3px;
+  -moz-border-radius: 0 0 3px 3px;
+  border-radius: 0 0 3px 3px;
+}
+.selectize-dropdown [data-selectable] {
+  cursor: pointer;
+  overflow: hidden;
+}
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(125, 168, 208, 0.2);
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+.selectize-dropdown .option,
+.selectize-dropdown .optgroup-header {
+  padding: 5px 8px;
+}
+.selectize-dropdown .option,
+.selectize-dropdown [data-disabled],
+.selectize-dropdown [data-disabled] [data-selectable].option {
+  cursor: inherit;
+  opacity: 0.5;
+}
+.selectize-dropdown [data-selectable].option {
+  opacity: 1;
+}
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-dropdown .optgroup-header {
+  color: #303030;
+  background: #fff;
+  cursor: default;
+}
+.selectize-dropdown .active {
+  background-color: #f5fafd;
+  color: #495c68;
+}
+.selectize-dropdown .active.create {
+  color: #495c68;
+}
+.selectize-dropdown .create {
+  color: rgba(48, 48, 48, 0.5);
+}
+.selectize-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+  -webkit-overflow-scrolling: touch;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+.selectize-control.single .selectize-input:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #808080 transparent transparent transparent;
+}
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #808080 transparent;
+}
+.selectize-control.rtl.single .selectize-input:after {
+  left: 15px;
+  right: auto;
+}
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+.selectize-control .selectize-input.disabled {
+  opacity: 0.5;
+  background-color: #fafafa;
+}

demo/docs.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <meta charset="utf-8">
+  <title>Redirecting&hellip;</title>
+  <link rel="canonical" href="./docs/index.html">
+  <meta http-equiv="refresh" content="0; url=./docs/index.html">
+  <meta name="robots" content="noindex">
+  <noscript><a href="./docs/index.html">Click here if you are not redirected.</a></noscript>
+  <script>
+    location="./docs/index.html";
+  </script>
+</html>

demo/docs/alerts.html

@@ -0,0 +1,624 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Alerts - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="description" content="Bootstrap provides an easy way to create predefined alert messages."/>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item active">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row justify-content-center">
+            <div class="col-lg-3 order-lg-1 mb-4">
+              <a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                Browse source code
+              </a>
+              <div class="list-group list-group-transparent mb-0">
+                <a href="../docs/index.html"
+			   class="list-group-item list-group-item-action">
+                  Introduction
+                </a>
+                <a href="../docs/alerts.html"
+			   class="list-group-item list-group-item-action active">
+                  Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/autosize.html"
+			   class="list-group-item list-group-item-action">
+                  Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/avatars.html"
+			   class="list-group-item list-group-item-action">
+                  Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/badges.html"
+			   class="list-group-item list-group-item-action">
+                  Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/breadcrumb.html"
+			   class="list-group-item list-group-item-action">
+                  Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/buttons.html"
+			   class="list-group-item list-group-item-action">
+                  Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/cards.html"
+			   class="list-group-item list-group-item-action">
+                  Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/carousel.html"
+			   class="list-group-item list-group-item-action">
+                  Carousel
+                </a>
+                <a href="../docs/colors.html"
+			   class="list-group-item list-group-item-action">
+                  Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/cursors.html"
+			   class="list-group-item list-group-item-action">
+                  Cursors
+                </a>
+                <a href="../docs/charts.html"
+			   class="list-group-item list-group-item-action">
+                  Charts
+                </a>
+                <a href="../docs/divider.html"
+			   class="list-group-item list-group-item-action">
+                  Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/empty.html"
+			   class="list-group-item list-group-item-action">
+                  Empty states
+                </a>
+                <a href="../docs/flags.html"
+			   class="list-group-item list-group-item-action">
+                  Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/form-elements.html"
+			   class="list-group-item list-group-item-action">
+                  Form Elements
+                </a>
+                <a href="../docs/form-helpers.html"
+			   class="list-group-item list-group-item-action">
+                  Form helpers
+                </a>
+                <a href="../docs/input-mask.html"
+			   class="list-group-item list-group-item-action">
+                  Input mask
+                </a>
+                <a href="../docs/progress.html"
+			   class="list-group-item list-group-item-action">
+                  Progress
+                </a>
+                <a href="../docs/ribbons.html"
+			   class="list-group-item list-group-item-action">
+                  Ribbons
+                </a>
+                <a href="../docs/spinners.html"
+			   class="list-group-item list-group-item-action">
+                  Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/steps.html"
+			   class="list-group-item list-group-item-action">
+                  Steps
+                </a>
+                <a href="../docs/tables.html"
+			   class="list-group-item list-group-item-action">
+                  Tables
+                </a>
+                <a href="../docs/tabs.html"
+			   class="list-group-item list-group-item-action">
+                  Tabs
+                </a>
+                <a href="../docs/timelines.html"
+			   class="list-group-item list-group-item-action">
+                  Timelines
+                </a>
+                <a href="../docs/toasts.html"
+			   class="list-group-item list-group-item-action">
+                  Toasts
+                </a>
+                <a href="../docs/tooltips.html"
+			   class="list-group-item list-group-item-action">
+                  Tooltips
+                </a>
+                <a href="../docs/typography.html"
+			   class="list-group-item list-group-item-action">
+                  Typography
+                </a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-md-6 p-xl-7">
+                  <div class="markdown">
+                    <p class="mb-4 float-right">
+                      <a href="https://getbootstrap.com/docs/4.4/components/alerts/" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                        Bootstrap documentation
+                      </a>
+                    </p>
+                    <h2 class="h1 mt-0 mb-3">Alerts
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                    </h2>
+                    <p>Bootstrap provides an easy way to create predefined alert messages.</p>
+                    <h3 id="default-markup">Default markup</h3>
+                    <div class="example">
+                      <div class="alert alert-success" role="alert">
+                        This is a success alert — check it out!
+                      </div>
+                      <div class="alert alert-info" role="alert">
+                        This is a info alert — check it out!
+                      </div>
+                      <div class="alert alert-warning" role="alert">
+                        This is a warning alert — check it out!
+                      </div>
+                      <div class="alert alert-danger" role="alert">
+                        This is a danger alert — check it out!
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a success alert — check it out!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a info alert — check it out!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a warning alert — check it out!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a danger alert — check it out!
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                    </div>
+                    <h3 id="alert-links">Alert Links</h3>
+                    <p>Add the <code class="highlighter-rouge">alert-link</code> class to any links inside the alert box to create “matching colored links”:</p>
+                    <div class="example">
+                      <div class="alert alert-success" role="alert">
+                        This is a success alert — <a href="#" class="alert-link">check it out</a>!
+                      </div>
+                      <div class="alert alert-info" role="alert">
+                        This is a info alert — <a href="#" class="alert-link">check it out</a>!
+                      </div>
+                      <div class="alert alert-warning" role="alert">
+                        This is a warning alert — <a href="#" class="alert-link">check it out</a>!
+                      </div>
+                      <div class="alert alert-danger" role="alert">
+                        This is a danger alert — <a href="#" class="alert-link">check it out</a>!
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a success alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a info alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a warning alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a danger alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                    </div>
+                    <h3 id="dismissible-alerts">Dismissible Alerts</h3>
+                    <div class="example">
+                      <div class="alert alert-success alert-dismissible" role="alert">
+                        This is a success alert — check it out!
+                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                      </div>
+                      <div class="alert alert-info alert-dismissible" role="alert">
+                        This is a info alert — check it out!
+                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                      </div>
+                      <div class="alert alert-warning alert-dismissible" role="alert">
+                        This is a warning alert — check it out!
+                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                      </div>
+                      <div class="alert alert-danger alert-dismissible" role="alert">
+                        This is a danger alert — check it out!
+                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a success alert — check it out!
+   <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a info alert — check it out!
+   <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a warning alert — check it out!
+   <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   This is a danger alert — check it out!
+   <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                    </div>
+                    <h3 id="alerts-with-icons">Alerts with icons</h3>
+                    <div class="example">
+                      <div class="alert alert-success" role="alert">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        This is a success alert — check it out!
+                      </div>
+                      <div class="alert alert-info" role="alert">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
+                        This is a info alert — check it out!
+                      </div>
+                      <div class="alert alert-warning" role="alert">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                        This is a warning alert — check it out!
+                      </div>
+                      <div class="alert alert-danger" role="alert">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+                        This is a danger alert — check it out!
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon mr-1"</span><span class="nt">&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"20 6 9 17 4 12"</span><span class="nt">&gt;&lt;/polyline&gt;&lt;/svg&gt;</span>
+   This is a success alert — check it out!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon mr-1"</span><span class="nt">&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"10"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"16"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"12"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"8"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
+   This is a info alert — check it out!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon mr-1"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"</span><span class="nt">&gt;&lt;/path&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"9"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"13"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"17"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"17"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
+   This is a warning alert — check it out!
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon mr-1"</span><span class="nt">&gt;&lt;polygon</span> <span class="na">points=</span><span class="s">"7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"</span><span class="nt">&gt;&lt;/polygon&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"15"</span> <span class="na">y1=</span><span class="s">"9"</span> <span class="na">x2=</span><span class="s">"9"</span> <span class="na">y2=</span><span class="s">"15"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"9"</span> <span class="na">y1=</span><span class="s">"9"</span> <span class="na">x2=</span><span class="s">"15"</span> <span class="na">y2=</span><span class="s">"15"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
+   This is a danger alert — check it out!
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                    </div>
+                    <h3 id="alert-with-avatar">Alert with avatar</h3>
+                    <div class="example">
+                      <div class="alert alert-success alert-avatar" role="alert">
+                        <span class="avatar">JL</span>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                      </div>
+                      <div class="alert alert-info alert-avatar" role="alert">
+                        <span class="avatar">JL</span>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                      </div>
+                      <div class="alert alert-warning alert-avatar" role="alert">
+                        <span class="avatar">JL</span>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                      </div>
+                      <div class="alert alert-danger alert-avatar" role="alert">
+                        <span class="avatar">JL</span>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-avatar"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-avatar"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-avatar"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-avatar"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                    </div>
+                    <h3 id="alert-with-buttons">Alert with buttons</h3>
+                    <div class="example">
+                      <div class="alert alert-success alert-dismissible" role="alert">
+                        <h3>Some Title</h3>
+                        <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+                        <div class="btn-list">
+                          <a href="#" class="btn btn-success">Save changes</a>
+                          <a href="#" class="btn btn-secondary">Cancel</a>
+                        </div>
+                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;h3&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
+   <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
+   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
+      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
+   <span class="nt">&lt;/div&gt;</span>
+   <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/docs/autosize.html

@@ -0,0 +1,434 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Autosize - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="description" content="A small, stand-alone script to automatically adjust textarea height."/>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item active">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row justify-content-center">
+            <div class="col-lg-3 order-lg-1 mb-4">
+              <a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                Browse source code
+              </a>
+              <div class="list-group list-group-transparent mb-0">
+                <a href="../docs/index.html"
+			   class="list-group-item list-group-item-action">
+                  Introduction
+                </a>
+                <a href="../docs/alerts.html"
+			   class="list-group-item list-group-item-action">
+                  Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/autosize.html"
+			   class="list-group-item list-group-item-action active">
+                  Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/avatars.html"
+			   class="list-group-item list-group-item-action">
+                  Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/badges.html"
+			   class="list-group-item list-group-item-action">
+                  Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/breadcrumb.html"
+			   class="list-group-item list-group-item-action">
+                  Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/buttons.html"
+			   class="list-group-item list-group-item-action">
+                  Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/cards.html"
+			   class="list-group-item list-group-item-action">
+                  Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/carousel.html"
+			   class="list-group-item list-group-item-action">
+                  Carousel
+                </a>
+                <a href="../docs/colors.html"
+			   class="list-group-item list-group-item-action">
+                  Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/cursors.html"
+			   class="list-group-item list-group-item-action">
+                  Cursors
+                </a>
+                <a href="../docs/charts.html"
+			   class="list-group-item list-group-item-action">
+                  Charts
+                </a>
+                <a href="../docs/divider.html"
+			   class="list-group-item list-group-item-action">
+                  Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/empty.html"
+			   class="list-group-item list-group-item-action">
+                  Empty states
+                </a>
+                <a href="../docs/flags.html"
+			   class="list-group-item list-group-item-action">
+                  Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/form-elements.html"
+			   class="list-group-item list-group-item-action">
+                  Form Elements
+                </a>
+                <a href="../docs/form-helpers.html"
+			   class="list-group-item list-group-item-action">
+                  Form helpers
+                </a>
+                <a href="../docs/input-mask.html"
+			   class="list-group-item list-group-item-action">
+                  Input mask
+                </a>
+                <a href="../docs/progress.html"
+			   class="list-group-item list-group-item-action">
+                  Progress
+                </a>
+                <a href="../docs/ribbons.html"
+			   class="list-group-item list-group-item-action">
+                  Ribbons
+                </a>
+                <a href="../docs/spinners.html"
+			   class="list-group-item list-group-item-action">
+                  Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/steps.html"
+			   class="list-group-item list-group-item-action">
+                  Steps
+                </a>
+                <a href="../docs/tables.html"
+			   class="list-group-item list-group-item-action">
+                  Tables
+                </a>
+                <a href="../docs/tabs.html"
+			   class="list-group-item list-group-item-action">
+                  Tabs
+                </a>
+                <a href="../docs/timelines.html"
+			   class="list-group-item list-group-item-action">
+                  Timelines
+                </a>
+                <a href="../docs/toasts.html"
+			   class="list-group-item list-group-item-action">
+                  Toasts
+                </a>
+                <a href="../docs/tooltips.html"
+			   class="list-group-item list-group-item-action">
+                  Tooltips
+                </a>
+                <a href="../docs/typography.html"
+			   class="list-group-item list-group-item-action">
+                  Typography
+                </a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-md-6 p-xl-7">
+                  <div class="markdown">
+                    <h2 class="h1 mt-0 mb-3">Autosize
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                    </h2>
+                    <p>A small, stand-alone script to automatically adjust textarea height.</p>
+                    <h3 id="default-markup">Default markup</h3>
+                    <div class="example">
+                      <label class="form-label">Autosize example</label>
+                      <textarea class="form-control" data-toggle="autosize" placeholder="Typing something&hellip;"></textarea>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Autosize example<span class="nt">&lt;/label&gt;</span>
+<span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">data-toggle=</span><span class="s">"autosize"</span> <span class="na">placeholder=</span><span class="s">"Typing something&amp;hellip;"</span><span class="nt">&gt;&lt;/textarea&gt;</span></code></pre>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/docs/avatars.html

@@ -0,0 +1,626 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Avatars - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="description" content="Create and group avatars of various shapes and sizes with one component."/>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item active">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row justify-content-center">
+            <div class="col-lg-3 order-lg-1 mb-4">
+              <a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                Browse source code
+              </a>
+              <div class="list-group list-group-transparent mb-0">
+                <a href="../docs/index.html"
+			   class="list-group-item list-group-item-action">
+                  Introduction
+                </a>
+                <a href="../docs/alerts.html"
+			   class="list-group-item list-group-item-action">
+                  Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/autosize.html"
+			   class="list-group-item list-group-item-action">
+                  Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/avatars.html"
+			   class="list-group-item list-group-item-action active">
+                  Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/badges.html"
+			   class="list-group-item list-group-item-action">
+                  Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/breadcrumb.html"
+			   class="list-group-item list-group-item-action">
+                  Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/buttons.html"
+			   class="list-group-item list-group-item-action">
+                  Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/cards.html"
+			   class="list-group-item list-group-item-action">
+                  Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/carousel.html"
+			   class="list-group-item list-group-item-action">
+                  Carousel
+                </a>
+                <a href="../docs/colors.html"
+			   class="list-group-item list-group-item-action">
+                  Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/cursors.html"
+			   class="list-group-item list-group-item-action">
+                  Cursors
+                </a>
+                <a href="../docs/charts.html"
+			   class="list-group-item list-group-item-action">
+                  Charts
+                </a>
+                <a href="../docs/divider.html"
+			   class="list-group-item list-group-item-action">
+                  Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/empty.html"
+			   class="list-group-item list-group-item-action">
+                  Empty states
+                </a>
+                <a href="../docs/flags.html"
+			   class="list-group-item list-group-item-action">
+                  Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/form-elements.html"
+			   class="list-group-item list-group-item-action">
+                  Form Elements
+                </a>
+                <a href="../docs/form-helpers.html"
+			   class="list-group-item list-group-item-action">
+                  Form helpers
+                </a>
+                <a href="../docs/input-mask.html"
+			   class="list-group-item list-group-item-action">
+                  Input mask
+                </a>
+                <a href="../docs/progress.html"
+			   class="list-group-item list-group-item-action">
+                  Progress
+                </a>
+                <a href="../docs/ribbons.html"
+			   class="list-group-item list-group-item-action">
+                  Ribbons
+                </a>
+                <a href="../docs/spinners.html"
+			   class="list-group-item list-group-item-action">
+                  Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/steps.html"
+			   class="list-group-item list-group-item-action">
+                  Steps
+                </a>
+                <a href="../docs/tables.html"
+			   class="list-group-item list-group-item-action">
+                  Tables
+                </a>
+                <a href="../docs/tabs.html"
+			   class="list-group-item list-group-item-action">
+                  Tabs
+                </a>
+                <a href="../docs/timelines.html"
+			   class="list-group-item list-group-item-action">
+                  Timelines
+                </a>
+                <a href="../docs/toasts.html"
+			   class="list-group-item list-group-item-action">
+                  Toasts
+                </a>
+                <a href="../docs/tooltips.html"
+			   class="list-group-item list-group-item-action">
+                  Tooltips
+                </a>
+                <a href="../docs/typography.html"
+			   class="list-group-item list-group-item-action">
+                  Typography
+                </a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-md-6 p-xl-7">
+                  <div class="markdown">
+                    <h2 class="h1 mt-0 mb-3">Avatars
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                    </h2>
+                    <p>Create and group avatars of various shapes and sizes with one component.</p>
+                    <h3 id="default-markup">Default markup</h3>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                        <span class="avatar">JL</span>
+                        <span class="avatar" style="background-image: url(../img/avatars/002m.jpg)"></span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/002m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="avatar-image">Avatar image</h3>
+                    <p>Set an image as the background.</p>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                        <span class="avatar" style="background-image: url(../img/avatars/002m.jpg)"></span>
+                        <span class="avatar" style="background-image: url(../img/avatars/003m.jpg)"></span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/002m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/003m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="initials">Initials</h3>
+                    <p>You can easily use initials instead of images.</p>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar">AB</span>
+                        <span class="avatar">CD</span>
+                        <span class="avatar">EF</span>
+                        <span class="avatar">GH</span>
+                        <span class="avatar">IJ</span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>AB<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>CD<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>EF<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>GH<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>IJ<span class="nt">&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="avatar-icons">Avatar icons</h3>
+                    <p>You can also use icons in avatars.</p>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar">   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                        </span>
+                        <span class="avatar">   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        </span>
+                        <span class="avatar">   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+                        </span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>   <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon avatar-icon"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"</span><span class="nt">&gt;&lt;/path&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"7"</span> <span class="na">r=</span><span class="s">"4"</span><span class="nt">&gt;&lt;/circle&gt;&lt;/svg&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>   <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon avatar-icon"</span><span class="nt">&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"5"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"19"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"5"</span> <span class="na">y1=</span><span class="s">"12"</span> <span class="na">x2=</span><span class="s">"19"</span> <span class="na">y2=</span><span class="s">"12"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>   <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span> <span class="na">class=</span><span class="s">"icon avatar-icon"</span><span class="nt">&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"</span><span class="nt">&gt;&lt;/path&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"8.5"</span> <span class="na">cy=</span><span class="s">"7"</span> <span class="na">r=</span><span class="s">"4"</span><span class="nt">&gt;&lt;/circle&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"20"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"20"</span> <span class="na">y2=</span><span class="s">"14"</span><span class="nt">&gt;&lt;/line&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"23"</span> <span class="na">y1=</span><span class="s">"11"</span> <span class="na">x2=</span><span class="s">"17"</span> <span class="na">y2=</span><span class="s">"11"</span><span class="nt">&gt;&lt;/line&gt;&lt;/svg&gt;</span>
+<span class="nt">&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="avatar-initials-color">Avatar initials color</h3>
+                    <p>Customize the color of the avatars’ background. You can click <a href="./colors.html">here</a> to see the list of available colors.</p>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar bg-green-lt">AB</span>
+                        <span class="avatar bg-red-lt">CD</span>
+                        <span class="avatar bg-yellow-lt">EF</span>
+                        <span class="avatar bg-blue-lt">GH</span>
+                        <span class="avatar bg-purple-lt">IJ</span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-green-lt"</span><span class="nt">&gt;</span>AB<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-red-lt"</span><span class="nt">&gt;</span>CD<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-yellow-lt"</span><span class="nt">&gt;</span>EF<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-blue-lt"</span><span class="nt">&gt;</span>GH<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-purple-lt"</span><span class="nt">&gt;</span>IJ<span class="nt">&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="avatar-size">Avatar size</h3>
+                    <p>Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.</p>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar avatar-xl">HS</span>
+                        <span class="avatar avatar-lg" style="background-image: url(../img/avatars/003f.jpg)"></span>
+                        <span class="avatar avatar-md" style="background-image: url(../img/avatars/002f.jpg)"></span>
+                        <span class="avatar">EP</span>
+                        <span class="avatar avatar-sm" style="background-image: url(../img/avatars/001f.jpg)"></span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xl"</span><span class="nt">&gt;</span>HS<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-lg"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/003f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-md"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/002f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>EP<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/001f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="avatar-status">Avatar status</h3>
+                    <p>Add an online or offline status indicator to show user’s availability.</p>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar" style="background-image: url(../img/avatars/006m.jpg)"></span>
+                        <span class="avatar" style="background-image: url(../img/avatars/004f.jpg)">
+                          <span class="badge bg-danger"></span>
+                        </span>
+                        <span class="avatar" style="background-image: url(../img/avatars/007m.jpg)">
+                          <span class="badge bg-success"></span>
+                        </span>
+                        <span class="avatar">
+                          <span class="badge bg-warning"></span>
+                          SA</span>
+                        <span class="avatar" style="background-image: url(../img/avatars/009m.jpg)">
+                          <span class="badge bg-info"></span>
+                        </span>
+                        <span class="avatar" style="background-image: url(../img/avatars/010m.jpg)">
+                          <span class="badge bg-gray">5</span>
+                        </span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/006m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/004f.jpg)"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-danger"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/007m.jpg)"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-success"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-warning"</span><span class="nt">&gt;&lt;/span&gt;</span>
+   SA<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/009m.jpg)"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-info"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/010m.jpg)"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-gray"</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="avatar-shape">Avatar shape</h3>
+                    <p>Change the shape of an avatar with the default Bootstrap image classes.</p>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar" style="background-image: url(../img/avatars/005f.jpg)"></span>
+                        <span class="avatar rounded" style="background-image: url(../img/avatars/006f.jpg)"></span>
+                        <span class="avatar rounded-circle">AA</span>
+                        <span class="avatar rounded-0" style="background-image: url(../img/avatars/008f.jpg)"></span>
+                        <span class="avatar rounded-lg" style="background-image: url(../img/avatars/009f.jpg)"></span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/005f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/006f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded-circle"</span><span class="nt">&gt;</span>AA<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded-0"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/008f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded-lg"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/009f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="avatars-list">Avatars list</h3>
+                    <p>You can easily create a list of avatars.</p>
+                    <div class="example">
+                      <div class="avatar-list">
+                        <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                        <span class="avatar">JL</span>
+                        <span class="avatar" style="background-image: url(../img/avatars/002m.jpg)"></span>
+                        <span class="avatar" style="background-image: url(../img/avatars/003m.jpg)"></span>
+                        <span class="avatar" style="background-image: url(../img/avatars/000f.jpg)"></span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/002m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/003m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/000f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                    </div>
+                    <h3 id="stacked-list">Stacked list</h3>
+                    <p>Make the list stack when it reaches a certain length.</p>
+                    <div class="example">
+                      <div class="avatar-list avatar-list-stacked">
+                        <span class="avatar">EB</span>
+                        <span class="avatar" style="background-image: url(../img/avatars/016f.jpg)"></span>
+                        <span class="avatar" style="background-image: url(../img/avatars/015m.jpg)"></span>
+                        <span class="avatar" style="background-image: url(../img/avatars/017f.jpg)"></span>
+                        <span class="avatar" style="background-image: url(../img/avatars/018f.jpg)"></span>
+                        <span class="avatar" element="a">+8</span>
+                      </div>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list avatar-list-stacked"</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>EB<span class="nt">&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/016f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/015m.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/017f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(./img/avatars/018f.jpg)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+   <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">element=</span><span class="s">"a"</span><span class="nt">&gt;</span>+8<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>

demo/docs/badges.html

@@ -0,0 +1,590 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta http-equiv="Content-Language" content="en"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <title>Badges - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <meta name="description" content="A small count and labeling component."/>
+    <!-- Libs CSS -->
+    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/selectize/dist/css/selectize.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/core/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/libs/fullcalendar/list/main.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="../dist/css/tabler.min.css?1576401968" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="../dist/css/tabler-flags.min.css?1576401968" rel="stylesheet"/>
+    <link href="../dist/css/tabler-charts.min.css?1576401968" rel="stylesheet"/>
+    <style>
+      body { display: none; }
+    </style>
+  </head>
+  <body class="antialiased ">
+    <div class="layout">
+      <header class="layout-area-topnav navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <a class="layout-toggler" data-toggle="menubar">
+            <span class="layout-toggler-icon"></span>
+          </a>
+          <a href=".." class="navbar-brand text-reset mr-md-3">
+            <img src="../img/logo.svg" alt="Tabler" class="d-none d-md-block navbar-brand-logo">
+            <img src="../img/logo-small.svg" alt="Tabler" class="d-md-none navbar-brand-logo">
+          </a>
+          <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
+            <li class="nav-item dropdown mr-3">
+              <a class="nav-link text-reset px-2" data-toggle="dropdown">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                <span class="badge badge-pill badge-up bg-primary">4</span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
+                <div class="scrollable">
+                  <div class="list list-row">
+                  </div>
+                </div>
+                <div class="d-flex px-3 py-2 b-t">
+                  <div class="flex">
+                    <span>6 Notifications</span>
+                  </div>
+                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+                </div>
+              </div>
+            </li>
+            <li class="nav-item d-none d-lg-flex mr-3">
+              <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-success" target="_blank">Source code</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" data-toggle="dropdown"
+         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                <span class="avatar" style="background-image: url(../img/avatars/000m.jpg)"></span>
+                <span class="ml-2 d-none d-lg-block leading-none">
+                  Paweł Kuna
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                </span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                  Profile
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  Settings
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                  Inbox
+                  <span class="badge bg-primary ml-auto">6</span>
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                  Message
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                  Need help?
+                </a>
+                <a class="dropdown-item" href="#">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  Sign out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <div class="layout-area-menu navbar navbar-expand-lg navbar-light">
+        <div class="container">
+          <ul class="navbar-nav flex-wrap">
+            <li class="nav-item">
+              <a class="nav-link" href="../index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Dashboard
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../form-elements.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Form elements
+                </span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+         aria-expanded="false" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Base
+                </span>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="../buttons.html" >
+                  <span class="nav-text">
+                    Buttons
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../cards.html" >
+                  <span class="nav-text">
+                    Cards
+                  </span>
+                </a>
+                <a class="dropdown-item" href="../c.html" >
+                  <span class="nav-text">
+                    C
+                  </span>
+                </a>
+              </div>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../charts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Charts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../calendar.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Calendar
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../users.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                </span>
+                <span class="nav-text">
+                  Users
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../gallery.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Gallery
+                </span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="../layouts.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                </span>
+                <span class="nav-text">
+                  Layouts
+                </span>
+              </a>
+            </li>
+            <li class="nav-item active">
+              <a class="nav-link" href="../docs/index.html" >
+                <span class="nav-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                </span>
+                <span class="nav-text">
+                  Documentation
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+      <div class="layout-area-main">
+        <main class="container my-4 flex-fill">
+          <!-- Page title -->
+          <div class="page-title-box">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row justify-content-center">
+            <div class="col-lg-3 order-lg-1 mb-4">
+              <a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-4" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                Browse source code
+              </a>
+              <div class="list-group list-group-transparent mb-0">
+                <a href="../docs/index.html"
+			   class="list-group-item list-group-item-action">
+                  Introduction
+                </a>
+                <a href="../docs/alerts.html"
+			   class="list-group-item list-group-item-action">
+                  Alerts <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/autosize.html"
+			   class="list-group-item list-group-item-action">
+                  Autosize <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/avatars.html"
+			   class="list-group-item list-group-item-action">
+                  Avatars <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/badges.html"
+			   class="list-group-item list-group-item-action active">
+                  Badges <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/breadcrumb.html"
+			   class="list-group-item list-group-item-action">
+                  Breadcrumb <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/buttons.html"
+			   class="list-group-item list-group-item-action">
+                  Buttons <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/cards.html"
+			   class="list-group-item list-group-item-action">
+                  Cards <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/carousel.html"
+			   class="list-group-item list-group-item-action">
+                  Carousel
+                </a>
+                <a href="../docs/colors.html"
+			   class="list-group-item list-group-item-action">
+                  Colors <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/cursors.html"
+			   class="list-group-item list-group-item-action">
+                  Cursors
+                </a>
+                <a href="../docs/charts.html"
+			   class="list-group-item list-group-item-action">
+                  Charts
+                </a>
+                <a href="../docs/divider.html"
+			   class="list-group-item list-group-item-action">
+                  Divider <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/empty.html"
+			   class="list-group-item list-group-item-action">
+                  Empty states
+                </a>
+                <a href="../docs/flags.html"
+			   class="list-group-item list-group-item-action">
+                  Flags <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/form-elements.html"
+			   class="list-group-item list-group-item-action">
+                  Form Elements
+                </a>
+                <a href="../docs/form-helpers.html"
+			   class="list-group-item list-group-item-action">
+                  Form helpers
+                </a>
+                <a href="../docs/input-mask.html"
+			   class="list-group-item list-group-item-action">
+                  Input mask
+                </a>
+                <a href="../docs/progress.html"
+			   class="list-group-item list-group-item-action">
+                  Progress
+                </a>
+                <a href="../docs/ribbons.html"
+			   class="list-group-item list-group-item-action">
+                  Ribbons
+                </a>
+                <a href="../docs/spinners.html"
+			   class="list-group-item list-group-item-action">
+                  Spinners <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </a>
+                <a href="../docs/steps.html"
+			   class="list-group-item list-group-item-action">
+                  Steps
+                </a>
+                <a href="../docs/tables.html"
+			   class="list-group-item list-group-item-action">
+                  Tables
+                </a>
+                <a href="../docs/tabs.html"
+			   class="list-group-item list-group-item-action">
+                  Tabs
+                </a>
+                <a href="../docs/timelines.html"
+			   class="list-group-item list-group-item-action">
+                  Timelines
+                </a>
+                <a href="../docs/toasts.html"
+			   class="list-group-item list-group-item-action">
+                  Toasts
+                </a>
+                <a href="../docs/tooltips.html"
+			   class="list-group-item list-group-item-action">
+                  Tooltips
+                </a>
+                <a href="../docs/typography.html"
+			   class="list-group-item list-group-item-action">
+                  Typography
+                </a>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="card">
+                <div class="card-body p-md-6 p-xl-7">
+                  <div class="markdown">
+                    <p class="mb-4 float-right">
+                      <a href="https://getbootstrap.com/docs/4.4/components/badge/" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                        Bootstrap documentation
+                      </a>
+                    </p>
+                    <h2 class="h1 mt-0 mb-3">Badges
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                    </h2>
+                    <p>A small count and labeling component.</p>
+                    <h3 id="default-markup">Default markup</h3>
+                    <div class="example">
+                      <span class="badge bg-blue">blue</span>
+                      <span class="badge bg-azure">azure</span>
+                      <span class="badge bg-indigo">indigo</span>
+                      <span class="badge bg-purple">purple</span>
+                      <span class="badge bg-pink">pink</span>
+                      <span class="badge bg-red">red</span>
+                      <span class="badge bg-orange">orange</span>
+                      <span class="badge bg-yellow">yellow</span>
+                      <span class="badge bg-lime">lime</span>
+                      <span class="badge bg-green">green</span>
+                      <span class="badge bg-teal">teal</span>
+                      <span class="badge bg-cyan">cyan</span>
+                      <span class="badge bg-gray">gray</span>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-azure"</span><span class="nt">&gt;</span>azure<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-indigo"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-purple"</span><span class="nt">&gt;</span>purple<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-pink"</span><span class="nt">&gt;</span>pink<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red"</span><span class="nt">&gt;</span>red<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-orange"</span><span class="nt">&gt;</span>orange<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-yellow"</span><span class="nt">&gt;</span>yellow<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-lime"</span><span class="nt">&gt;</span>lime<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-gray"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="pill-badges">Pill badges</h3>
+                    <p>To make a pill bagde (with rounded corners) add <code class="highlighter-rouge">.bagde-pill</code> class.</p>
+                    <div class="example">
+                      <span class="badge badge-pill bg-blue">1</span>
+                      <span class="badge badge-pill bg-azure">2</span>
+                      <span class="badge badge-pill bg-indigo">3</span>
+                      <span class="badge badge-pill bg-purple">4</span>
+                      <span class="badge badge-pill bg-pink">5</span>
+                      <span class="badge badge-pill bg-red">6</span>
+                      <span class="badge badge-pill bg-orange">7</span>
+                      <span class="badge badge-pill bg-yellow">8</span>
+                      <span class="badge badge-pill bg-lime">9</span>
+                      <span class="badge badge-pill bg-green">10</span>
+                      <span class="badge badge-pill bg-teal">11</span>
+                      <span class="badge badge-pill bg-cyan">12</span>
+                      <span class="badge badge-pill bg-gray">13</span>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-blue"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-azure"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-indigo"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-purple"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-pink"</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-red"</span><span class="nt">&gt;</span>6<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-orange"</span><span class="nt">&gt;</span>7<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-yellow"</span><span class="nt">&gt;</span>8<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-lime"</span><span class="nt">&gt;</span>9<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-green"</span><span class="nt">&gt;</span>10<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-teal"</span><span class="nt">&gt;</span>11<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-cyan"</span><span class="nt">&gt;</span>12<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-gray"</span><span class="nt">&gt;</span>13<span class="nt">&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="soft-badges">Soft badges</h3>
+                    <p>Creates a soft variant of a corresponding contextual badge variation. You can click <a href="./colors.html">here</a> to see the list of available colors.</p>
+                    <div class="example">
+                      <span class="badge bg-blue-lt">blue</span>
+                      <span class="badge bg-azure-lt">azure</span>
+                      <span class="badge bg-indigo-lt">indigo</span>
+                      <span class="badge bg-purple-lt">purple</span>
+                      <span class="badge bg-pink-lt">pink</span>
+                      <span class="badge bg-red-lt">red</span>
+                      <span class="badge bg-orange-lt">orange</span>
+                      <span class="badge bg-yellow-lt">yellow</span>
+                      <span class="badge bg-lime-lt">lime</span>
+                      <span class="badge bg-green-lt">green</span>
+                      <span class="badge bg-teal-lt">teal</span>
+                      <span class="badge bg-cyan-lt">cyan</span>
+                      <span class="badge bg-gray-lt">gray</span>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue-lt"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-azure-lt"</span><span class="nt">&gt;</span>azure<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-indigo-lt"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-purple-lt"</span><span class="nt">&gt;</span>purple<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-pink-lt"</span><span class="nt">&gt;</span>pink<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red-lt"</span><span class="nt">&gt;</span>red<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-orange-lt"</span><span class="nt">&gt;</span>orange<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-yellow-lt"</span><span class="nt">&gt;</span>yellow<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-lime-lt"</span><span class="nt">&gt;</span>lime<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green-lt"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal-lt"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan-lt"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-gray-lt"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/span&gt;</span></code></pre>
+                    </div>
+                    <h3 id="links">Links</h3>
+                    <p>Make a badge work as a link by putting it into an <code class="highlighter-rouge">&lt;a&gt;</code> element.</p>
+                    <div class="example">
+                      <a href="#" class="badge bg-blue">blue</a>
+                      <a href="#" class="badge bg-azure">azure</a>
+                      <a href="#" class="badge bg-indigo">indigo</a>
+                      <a href="#" class="badge bg-purple">purple</a>
+                      <a href="#" class="badge bg-pink">pink</a>
+                      <a href="#" class="badge bg-red">red</a>
+                      <a href="#" class="badge bg-orange">orange</a>
+                      <a href="#" class="badge bg-yellow">yellow</a>
+                      <a href="#" class="badge bg-lime">lime</a>
+                      <a href="#" class="badge bg-green">green</a>
+                      <a href="#" class="badge bg-teal">teal</a>
+                      <a href="#" class="badge bg-cyan">cyan</a>
+                      <a href="#" class="badge bg-gray">gray</a>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-azure"</span><span class="nt">&gt;</span>azure<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-indigo"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-purple"</span><span class="nt">&gt;</span>purple<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-pink"</span><span class="nt">&gt;</span>pink<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-red"</span><span class="nt">&gt;</span>red<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-orange"</span><span class="nt">&gt;</span>orange<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-yellow"</span><span class="nt">&gt;</span>yellow<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-lime"</span><span class="nt">&gt;</span>lime<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-gray"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/a&gt;</span></code></pre>
+                    </div>
+                    <h3 id="empty-badges">Empty badges</h3>
+                    <p>If you don’t want your badge to contain any text you can do it by leaving the html element empty.</p>
+                    <div class="example">
+                      <a href="#" class="badge bg-blue"></a>
+                      <a href="#" class="badge bg-azure"></a>
+                      <a href="#" class="badge bg-indigo"></a>
+                      <a href="#" class="badge bg-purple"></a>
+                      <a href="#" class="badge bg-pink"></a>
+                      <a href="#" class="badge bg-red"></a>
+                      <a href="#" class="badge bg-orange"></a>
+                      <a href="#" class="badge bg-yellow"></a>
+                      <a href="#" class="badge bg-lime"></a>
+                      <a href="#" class="badge bg-green"></a>
+                      <a href="#" class="badge bg-teal"></a>
+                      <a href="#" class="badge bg-cyan"></a>
+                      <a href="#" class="badge bg-gray"></a>
+                    </div>
+                    <div class="highlight">
+                      <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-azure"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-indigo"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-purple"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-pink"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-red"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-orange"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-yellow"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-lime"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-cyan"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-gray"</span><span class="nt">&gt;&lt;/a&gt;</span></code></pre>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <script>
+      window.tabler_colors = {
+      'blue': '#206bc4',
+      'azure': '#45aaf2',
+      'indigo': '#6574cd',
+      'purple': '#a55eea',
+      'pink': '#f66d9b',
+      'red': '#fa4654',
+      'orange': '#fd9644',
+      'yellow': '#f1c40f',
+      'lime': '#7bd235',
+      'green': '#5eba00',
+      'teal': '#2bcbba',
+      'cyan': '#17a2b8',
+      'gray': '#868e96',
+      };
+    </script>
+    <!-- Libs JS -->
+    <script src="../dist/libs/jquery/dist/jquery.min.js?1576401968"></script>
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576401968"></script>
+    <script src="../dist/libs/autosize/dist/autosize.min.js?1576401968"></script>
+    <script src="../dist/libs/imask/dist/imask.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/standalone/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/apexcharts/dist/apexcharts.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/jquery.vmap.min.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1576401968"></script>
+    <script src="../dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1576401968"></script>
+    <script src="../dist/libs/peity/jquery.peity.min.js?1576401968"></script>
+    <script src="../dist/libs/selectize/dist/js/selectize.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/core/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/daygrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/interaction/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/timegrid/main.min.js?1576401968"></script>
+    <script src="../dist/libs/fullcalendar/list/main.min.js?1576401968"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js?1576401968"></script>
+    <!-- Tabler Plugins -->
+    <script src="../dist/js/tabler-charts.min.js?1576401968"></script>
+    <script>
+      document.body.style.display = 'block';
+    </script>
+  </body>
+</html>