<h1 class="wp-block-heading">Tab 1</h1>

<p>Stuff for Tab 1 goes here</p>

<h1 class="wp-block-heading">Tab 2 Title</h1>

<h2 class="wp-block-heading">Heading 2 inside tab</h2>

<p>this is a section inside a tab</p>

<h2 class="wp-block-heading">Another Section</h2>

<p>This is another section isid e atab</p>

<h1 class="wp-block-heading">Tab 3</h1>

<p>Any type of block can go inside a tab</p>

<blockquote class="wp-block-quote">
<p>Quotes</p>
</blockquote>

<figure class="wp-block-pullquote"><blockquote><p>Pull Quote</p></blockquote></figure>

<figure class="wp-block-image"><img alt=""/></figure>

<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>a</td><td>table</td></tr><tr><td>as</td><td>well</td></tr></tbody></table></figure>

<p></p>

#tgei-auto-tabs-container
{
  width: 100%;
  height: 50vh;
  position: relative;
  display: grid;
  grid-template-areas: "tabs content";
  grid-template-columns: 1fr 4fr;
}
#tgei-auto-tabs-tabs-container
{
  grid-area: tabs;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 10px;
}

.tgei-auto-tabs-tab
{
  width: 100%;
  height: 150px;
  display: flex;
  border-left: 2px solid black;
  border-top: 2px solid black;
  border-right: none;
  padding: 0.8rem 1rem 0.8rem;
  justify-content: center;
  align-items: center;
  color: black;
  background: white;
  font-size: 1rem;
}

.tgei-auto-tabs-tab:hover
{
  cursor: pointer;
  background: #888888;
}

#tgei-auto-tabs-content-container
{
  grid-area: content;
  width: 100%;
  height: 100%;
  position: relative;
  border: 2px solid black;
  padding: 10px;
  background: black;
  color: white;
}
.tgei-auto-tabs-content
{
  width: calc(100% - 20px);
}

.tgei-auto-tabs-tab-active
{
  background: black;
  color: white;
  font-size: 1.5rem;
}