This is bdthemes shortcodes ultimate (joomla) Tabs example. you can get facility in this shortcode item> Style, Active Tab, Vertical(yes/no), Class, Content.just simply use this shortcode and get Tabs style.
Note: you can use this shortcode article and custom module. for your help we give a example bellow >
Default Tabs Style
[tabs style="default" active="1" vertical="no"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
Carbon Tabs Style
[tabs style="carbon" active="1" vertical="no"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
Sharp Tabs Style
[tabs style="sharp" active="1" vertical="no"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
Grid Tabs Style
[tabs style="grid" active="1" vertical="yes"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
Wood Tabs Style
[tabs style="wood" active="1"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
Fabric Tabs Style
[tabs style="fabric" active="1" vertical="yes"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
Modern Dark Tabs Style
[tabs style="modern-dark" active="1" vertical="no"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
[tabs style="modern-violet" vertical="yes"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
Flat Blue Tabs Style
[tabs style="flat-blue" active="1" vertical="yes"][tab title="Title 1"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]
Icon With Tabs
[tabs style="default" active="1"][tab title="Title 1" icon="icon: hand-o-right"]Content 1[/tab] [tab title="Title 2" icon="icon: home"]Content 2[/tab] [tab title="Title 3" icon="icon: phone"]Content 3[/tab] [/tabs]
Tabs Template Style
[tabs style="default" active="1" class="template-style"][tab title="Title 1" icon="icon: hand-o-right"]Content 1[/tab] [tab title="Title 2"]Content 2[/tab] [tab title="Title 3"]Content 3[/tab][/tabs]