<div class="display-grid grid-template-columns-3 gap-8 m-5 ">
	<div class="grid-column-1 bg-color-primary p-20px br-5px text-align-center fs-sm ">1</div>
	<div class="grid-column-1 bg-color-primary p-20px br-5px text-align-center fs-sm">2</div>
	<div class="grid-column-1 bg-color-primary p-20px br-5px text-align-center fs-sm">3</div>
	<div class="grid-column-2 bg-color-primary p-20px br-5px text-align-center fs-sm">4</div>
	<div class="grid-column-1 bg-color-primary p-20px br-5px text-align-center fs-sm">5</div>
	<div class="grid-column-1 bg-color-primary p-20px br-5px text-align-center fs-sm">6</div>
	<div class="grid-column-2 bg-color-primary p-20px br-5px text-align-center fs-sm">7</div>
	<div class="grid-column-1 bg-color-primary p-20px br-5px text-align-center fs-sm">8</div>
	<div class="grid-column-1 bg-color-primary p-20px br-5px text-align-center fs-sm">9</div>
	<div class="grid-column-1 bg-color-primary p-20px br-5px text-align-center fs-sm">10</div>
</div>

<div class="navigation-tabs-container" id="example2">
	<ul class="navigation-tab-menu">
		<li class="navigation-tab-menu-item show" data-id="1">Tab #1</li>
		<li class="navigation-tab-menu-item" data-id="2">Tab #2</li>
		<li class="navigation-tab-menu-item" data-id="3">Tab #3</li>
		<!-- ... -->
	</ul>
	<ul class="navigation-tab-content">
		<li class="navigation-tab-content-item show" data-id="1">
			tab1
		</li>
		<li class="navigation-tab-content-item" data-id="2">
			tab2
		</li>
		<li class="navigation-tab-content-item" data-id="3">
			tab3
		</li>
		<!-- ... -->
	</ul>
</div>
<div class="button-wrapper m-5">
	<span class="border-style-solid border-1px pt-10px pb-10px pl-20px pr-20px br-5px fs-sm cursor-pointer offcanvasBtn" data-target="#offcanvas-top">Top Offcanvas</span>
</div>

<div class="offcanvas-container" id="offcanvas-top" data-position="top" data-size="full">
	<div class="offcanvas-wrapper">
		<i class="offcanvas-close"></i>
		<div class="title">foo</div>
		<div class="description">
			bar
		</div>
	</div>
</div>
var navigationtabs = new NavigationTabs({
	element: "#example2",
	direction: "top",
	activeTab: 1
});
var topOffcanvas = new Offcanvas();

External CSS

  1. https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha9/dist/css/madosel.min.css
  2. https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha9/dist/css/madosel-component.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/madosel@1.0.0-alpha9/dist/js/madosel-component.min.js