<!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link href="https://fonts.googleapis.com/css?family=Assistant:400,700|Poppins:400,500,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<style>
/* Colours */
/* fonts */
body {
  font-family: "Assistant", sans-serif;
}

h1, h2, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
}

h2 {
  font-weight: 700;
}

h3 {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  text-transform: none;
}

p {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

/* Utilities */
.no-padding {
  padding: 0 !important;
}

/* width */
.container {
  width: 1080px;
}

/* Table Heading */
.pricing-top-heading th {
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
  width: 33%;
}

.pricing-bottom-heading th {
  padding: 0 2%;
  font-weight: 300;
}

.pricing-top-heading .free {
  background-color: #f26b42;
  border: 1px solid #f26b42;
}

.pricing-bottom-heading .free {
  background-color: #f28d6e;
  border: 1px solid #f28d6e;
}

.pricing-top-heading .basic {
  background-color: #58c5c7;
  border: 1px solid #58c5c7;
}

.pricing-bottom-heading .basic {
  background-color: #7fd1d2;
  border: 1px solid #7fd1d2;
}

.pricing-top-heading .pro {
  background-color: #a5c653;
  border: 1px solid #a5c653;
}

.pricing-bottom-heading .pro {
  background-color: #b9d17b;
  border: 1px solid #b9d17b;
}

.pricing-top-heading,
.pricing-bottom-heading {
  color: white;
  height: 90px;
}

table thead th {
  border: 0;
}

/* table */
table {
  width: 100%;
}

.collapsible-section-header {
  background-color: #e1e1e1;
}

.collapsible-section-header a {
  color: #363636;
  font-weight: 700;
  text-decoration: none;
}

.collapsible-section-header a:after {
  content: '\25bc';
  padding-left: 0.5em;
}

.collapsible-section-header a.collapsed:after {
  content: '\25ba';
  padding-left: 0.5em;
}

tbody td {
  background-color: #ededed;
  border: 1px solid #d1d1d1;
  padding: 1.25rem;
}
</style>

<div class="container">
<div class="row">
<table>
<tbody>
<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_one">Section 1</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_one" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 1</td>
<td>Basic 1</td>
<td>Pro 1</td>
</tr>
<tr>
<td>Free 2</td>
<td>Basic 2</td>
<td>Pro 2</td>
</tr>
<tr>
<td>Free 3</td>
<td>Basic 3</td>
<td>Pro 3</td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_two">Section 2</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_two" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 4</td>
<td>Basic 4</td>
<td>Pro 4</td>
</tr>
<tr>
<td>Free 5</td>
<td>Basic 5</td>
<td>Pro 5</td>
</tr>
<tr>
<td>Free 6</td>
<td>Basic 6</td>
<td>Pro 6</td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_three">Section 3</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_three" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 7</td>
<td>Basic 7</td>
<td>Pro 7</td>
</tr>
<tr>
<td>Free 8</td>
<td>Basic 8</td>
<td>Pro 8</td>
</tr>
<tr>
<td>Free 9</td>
<td>Basic 9</td>
<td>Pro 9</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>