<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Tabs Basics</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3> Foundation CSS Tabs Basics </h3>
</center>
<ul class="tabs"
data-tabs id="tabs-basic">
<li class="tabs-title is-active">
<a href="#tabBasic1"
aria-selected="true">
GFG Tab 1
</a>
</li>
<li class="tabs-title">
<a href="#tabBasic2"> GFG Tab 2 </a>
</li>
</ul>
<div class="tabs-content"
data-tabs-content="tabs-basic">
<div class="tabs-panel is-active"
id="tabBasic1">
<div>
<p style="color:green">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</p>
</div>
</div>
<div class="tabs-panel"
id="tabBasic2">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<button class="button secondary"
type="button"
data-toggle="dropdownBasic">
Click Dropdown
</button>
<div class="dropdown-pane"
id="dropdownBasic"
data-dropdown
data-auto-focus="true">
<strong>
GeeksforGeeks:
</strong>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>