Coder Wrap provides free to use snippets

/**Typeo CSS if no need so remove it Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  color: #444;
  box-sizing: border-box;
  margin: 0px;
}
/**Typeo CSS if no need so remove it Start**/

.cw-tabbingmain {
    max-width: 800px;
    width: 100%;
    padding: 0 15px;
    margin: 50px auto;
}

.cw-tablist {
  display: flex;
  flex-flow: row wrap;
}

.cw-tablist .cw-tab-item {
	position: relative;
  background-color: #000;
  color: #fff;
  padding: 10px 20px 13px 20px;
  cursor: pointer;
  border-left: #fff 1px solid;
}
.cw-tablist .cw-tab-item:after {
	content: '';
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	width: 0;
	height: 3px;
	background-color: #176b91;
	position: absolute;
	left:0px;
	bottom: -1px;
}
.cw-tablist .cw-tab-item:first-child {
  border-left: none;
}

.cw-tablist .cw-tab-item.cw-active:after {
  width: 100%;
}

.cw-tablist .cw-tab-item.cw-active {
	background-color: #0892cf;
	color: #fff;
}

.cw-tabdatalist {
  border: #999 1px solid;
  width: 100%;
}
.cw-tabdatalist h2 {
  margin: 0px;
}
.cw-tabdatalist p {
  margin: 0px;
}
.cw-datatab-item {
  width: 100%;
  
  display: none;
}
.cw-datatab-inner {
	padding: 15px;
}
.cw-datatab-item .cw-tab-item {
	position: relative;
  background-color: #000;
  color: #fff;
  padding: 10px 25px 10px 15px;
  cursor: pointer;
  border-top: #fff 1px solid;
  width: 100%;
  position: relative;
  display: none;
} 
.cw-datatab-item .cw-tab-item:after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	margin-top: -8px;
	width: 8px;
	height: 8px;
	border-left: #fff 1px solid;
	border-top: #fff 1px solid;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);

}
.cw-datatab-item-show{
	display: block;
}

@media (max-width: 767px) {
.cw-tabdatalist {
	border:none;

}	
.cw-tablist {
	display: none;
}	
.cw-datatab-item {
	display: block;
}
.cw-datatab-item .cw-tab-item {
	display: inline-block;
}
.cw-datatab-inner {
	display: none;
}
.cw-tabdatalist .cw-tab-item.cw-current+.cw-datatab-inner {
	display: block;
}
.cw-tabdatalist .cw-tab-item.cw-current:after {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
} 
}

 var tabbing = document.querySelectorAll('.cw-tab-item');
 var tabdata = document.querySelectorAll('.cw-datatab-item');
 tabbing.forEach(datatab);
 function datatab(item, index) {
		tabdata.forEach((el, i) => {
			if (index === i) {
				let elM = document.createElement('span');
				elM.setAttribute('datatab', `${'dataitem'+[index+1]}`);
				elM.setAttribute('class', `${'cw-tab-item item'+[index+1]}`)
				elM.innerHTML = item.innerHTML;
				el.prepend(elM);
			}
		})
	}
	function tab(){	
	 if(document.querySelector('.cw-tab-item.cw-active') !=null){
	 		document.querySelector('.cw-tab-item.cw-active').classList.remove('cw-active');
	 }
	 if(document.querySelector('.cw-datatab-item.cw-datatab-item-show') !=null){
	 		document.querySelector('.cw-datatab-item.cw-datatab-item-show').classList.remove('cw-datatab-item-show');
	 }
	 var datatab =  this.getAttribute('datatab')
	 document.getElementById(datatab).classList.add('cw-datatab-item-show')
	 this.classList.add('cw-active'); 
  }
 tabbing.forEach(tabs => { 
  tabs.addEventListener('click', tab)
 })
//Mobile Change Accordion 
function tabMob() {
	if(document.querySelector('.cw-tab-item.cw-current') !=null){
	 	document.querySelector('.cw-tab-item.cw-current').classList.remove('cw-current');
	}
	this.classList.add('cw-current'); 
}
const tabdataMob = document.querySelectorAll('.cw-tab-item');
    tabdataMob.forEach (mobileAcc => {  
      mobileAcc.addEventListener('click', tabMob);
    });