var tabs = new List<TabItem>()
{
new (){ Title = "Home", Active = true, Target = "home"},
new (){ Title = "Profile",Target = "profile"},
new (){ Title = "Links", Target = "links"},
};
<metro-tabs asp-items="@tabs" data-cls-tabs="w-100" >
<metro-tab title="Games" target="games" display-order="10101" />
</metro-tabs>
<metro-tabs asp-items="@tabs" data-cls-tabs="mt-2" alignment="Center" ></metro-tabs>
<metro-tabs asp-items="@tabs" data-cls-tabs="mt-2" alignment="End" ></metro-tabs>
<metro-tabs asp-items="@tabs" data-cls-tabs="w-100 mt-2" bottom="true" ></metro-tabs>
<div class="row">
<div id="home">Home</div>
<div id="profile">Profile</div>
<div id="links">Links</div>
<div id="games">Games</div>
</div>
<metro-tabs asp-items="@tabs" vertical="true" ></metro-tabs>
<metro-tabs asp-items="@tabs" data-cls-tabs="ml-2 h-100" vertical="true" alignment="Center" ></metro-tabs>
<metro-tabs asp-items="@tabs" data-cls-tabs="ml-2 h-100" vertical="true" alignment="End" ></metro-tabs>
<metro-tabs asp-items="@tabs" data-cls-tabs="ml-2 h-100" vertical="true" right="true" ></metro-tabs>