<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
<
script
src
=
</
script
>
<
script
src
=
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
h2
style
=
"color: green;"
>
GeeksforGeeks
</
h2
>
<
h3
>Foundation CSS Vertical Tabs</
h3
>
<
div
class
=
"grid-x"
>
<
ul
class
=
"vertical tabs"
data-tabs
id
=
"vertical-tabs"
>
<
li
class
=
"tabs-title is-active"
>
<
a
href
=
"#tab1"
aria-selected
=
"true"
>First Tab</
a
>
</
li
>
<
li
class
=
"tabs-title"
>
<
a
href
=
"#tab2"
>Second Tab</
a
>
</
li
>
<
li
class
=
"tabs-title"
>
<
a
href
=
"#tab3"
>Third Tab</
a
>
</
li
>
<
li
class
=
"tabs-title"
>
<
a
href
=
"#tab4"
>Fourth Tab</
a
>
</
li
>
<
li
class
=
"tabs-title"
>
<
a
href
=
"#tab5"
>Fifth Tab</
a
>
</
li
>
</
ul
>
<
div
>
<
div
class
=
"tabs-content vertical"
data-tabs-content
=
"vertical-tabs"
>
<
div
class
=
"tabs-panel is-active"
id
=
"tab1"
>
<
p
>Tab 1 content</
p
>
<
p
>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</
p
>
</
div
>
<
div
class
=
"tabs-panel"
id
=
"tab2"
>
<
p
>Tab 2 Image</
p
>
<
strong
>GeeksforGeeks Image</
strong
>
<
img
src
=
alt
=
"GFG"
>
</
div
>
<
div
class
=
"tabs-panel"
id
=
"tab3"
>
<
p
>Tab 3 content</
p
>
<
p
>
With the idea of imparting programming
knowledge, Mr. Sandeep Jain, an IIT Roorkee
alumnus started a dream, GeeksforGeeks.
</
p
>
</
div
>
<
div
class
=
"tabs-panel"
id
=
"tab4"
>
<
p
>Tab 4 Image</
p
>
<
strong
>GFG Image</
strong
>
<
img
src
=
</
div
>
<
div
class
=
"tabs-panel"
id
=
"tab5"
>
<
p
>Tab 5 content</
p
>
<
p
>
With every tick of time, we are adding
arrows in our quiver. From articles on various
computer science subjects for practice
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
$(document).ready(function () {
$(document).foundation();
})
</
script
>
</
body
>
</
html
>