Github-like Issue creation Write/Preview Layout

Issue

For the life of mine I can't figure out how to achieve the following.

I need to create a form with support for preview of the typed content just like the Github new issue creation form as below

What I want to replicate is the curved border around the Write/Preview pair with the Write and Preview demarcated just as shown in this image.

How can this be achieved in CSS?

Thanks

Solution

One approach is to set a background-color for the active tab, also set its bottom border color to the same color of its background, then move it down for 1px to obstruct the longer border line.

[...document.querySelectorAll('.tabs > *')].forEach((tab, i, arr) => {
  
  tab.addEventListener('click', () => {
    arr.forEach(tab => tab.classList.remove('active'));
    tab.classList.add('active');
  });
})

.wrapper {
  padding: 4px;
}

.tabs {
  display: flex;
  border-bottom: solid 1px gray;
}

.tabs a {
  text-decoration: none;
  padding: 10px 16px;
  margin-left: 10px;
  border: solid 1px transparent;
  
  /* only rounded border for top left and right */
  border-radius: 8px 8px 0px 0px;
  
  /* move the tab 1px downwards */
  margin-bottom: -1px;
}

.tabs a.active {
  border: solid 1px gray;
  background-color: #fff;
  border-bottom-color: white;
}

<div class="wrapper">
  <div class="tabs">
    <a href="#" class="active">Write</a>
    <a href="#">Preview</a>
  </div>
  <div class="content">
    <p>content</p>
  </div>
</div>

Answered By - Hao Wu