Coder Wrap provides free to use snippets

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');

* {
	box-sizing: border-box;
}

body {
	margin: 0px;
}

.page-width {
	max-width: 1000px;
	margin: auto;
	width: 100%;
	padding: 0 15px;
}

.tab-scn, .tab-scn * {
	--base-fm: 'Source Sans Pro', sans-serif;
	--base-size: 16px;
	--base-clr: #444444;
	--white-clr: #ffffff;
	--black-clr: #000000;
	--theme-clr: #BF8850;
	--theme-rgb-clr: 191, 136, 80;
}

.tab-scn {
	padding: 40px 0px;
	width: 100%;
	font-family: var(--base-fm);
	font-size: var(--base-size);
	color: var(--base-clr);
}

.tabstop-part {
	display: flex;
	flex-flow: row wrap;
	justify-content: right;
	border-bottom: #f7f7f7 1px solid;
}

.tabstop-part .tabitem {
	text-align: center;
	margin: auto;
	padding: 14px 10px 14px 10px;
	cursor: pointer;
	flex: auto;
	font-weight: 600;
	border-bottom: 2px solid transparent;
	transition: 0.5s all;
	position: relative;
}

.tabstop-part .tabitem:after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0px;
	width: 0;
	height: 2px;
	background-color: var(--theme-clr);
	transition: 0.5s all;
}

.tabstop-part .tabitem.active {
	background-color: rgba(var(--theme-rgb-clr), 0.07);
	color: var(--theme-clr);
}

.tabstop-part .tabitem.active:after {
	width: 100%;
}

.tabsdata-part {
	width: 100%;
}

.tabsdata-part .tabdata-cont {
	overflow: hidden;
	height: 0px;
}

.tabsdata-part .tabsdata-show {
	height: auto;
	overflow: inherit;
	padding: 20px 0;
}

.tabsdata-part .tabdata-cont h3 {
	margin: 0px	0px 10px 0px;
}

.tabsdata-part .tabdata-cont p {
	margin-top: 0;
}

.tabsdata-part .tabdata-cont p:last-child {
	margin-bottom: 0px;
}

@media(max-width:767px) {

	/* Tab to converter Accordion for Mobile view start*/
	.tabstop-part {
		display: none;
	}

	.tabsdata-part .tabdata-cont {
		overflow: inherit;
		height: auto;
		padding: 0px;
	}

	.tabsdata-part .tabitem {
		background-color: #f5f5f5;
		text-align: center;
		margin: auto;
		padding: 12px 15px 12px 15px;
		cursor: pointer;
		flex: auto;
		font-weight: 600;
		border-bottom: 2px solid transparent;
		transition: 0.5s all;
		position: relative;
		display: inline-block;
		width: 100%;
		text-align: left;
		margin-bottom: 2px;
	}

	.tabsdata-part .tabitem:after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0px;
		width: 0;
		height: 2px;
		background-color: var(--theme-clr);
		transition: 0.5s all;
	}

	.tabsdata-part .tabitem.active {
		background-color: rgba(var(--theme-rgb-clr), 0.07);
		color: var(--theme-clr);
	}

	.tabsdata-part .tabitem.active:after {
		width: 100%;
	}

	.tabsdata-part .tabcont {
		display: none;
		padding: 15px 15px 15px 15px;
		border: rgba(var(--theme-rgb-clr), 0.15) 1px solid;
		margin-top: -3px;
	}

	.tabsdata-part .tabitem.active + .tabcont {
		display: block;
	}

	/* Tab to converter Accordion for Mobile view end*/
}

/**Desktop Tab Code Start**/
//First Tab & Tab Data class
document.querySelector('.tabitem:first-child').classList.add('active');
document.querySelector('.tabdata-cont:first-child').classList.add('tabsdata-show')
//Tab Code 
let tabitems = document.querySelectorAll('.tabitem');
tabitems.forEach(function(item) {
item.addEventListener('click', function(e) {
 // Remove active class from all tab items
 tabitems.forEach(function(item) {
   item.classList.remove('active');
 });
 
 // Add active class to clicked tab item
 e.target.classList.add('active'); 
 let tabDataItems = document.querySelectorAll('.tabdata-cont');	
 tabDataItems.forEach(function(dItem) {
   dItem.classList.remove('tabsdata-show');
 })
 let datatab = e.target.getAttribute('data-tab');
 document.querySelector(`.${datatab}`).classList.add('tabsdata-show'); 
 });
});
/**Desktop Tab Code End**/

/* Tab to converter Accordion for Mobile view start*/
function mediaCondition() {
  var demoid = document.getElementById('demo')
  if (mobilemedia.matches) { // If media query matches
    tabitems.forEach(function(item) {
    	tabitems.forEach(function(item) {
			document.querySelector('.' + item.dataset.tab).prepend(item);
    	});
    });
  }else {
  	tabitems.forEach((elm, i) => {
		i === 0 ? document.querySelector('.tabstop-part').replaceChildren(elm) : document.querySelector('.tabstop-part').append(elm)
	})
  }	
}
var mobilemedia = window.matchMedia("(max-width: 767px)")
mediaCondition() // function at run time
mobilemedia.addListener(mediaCondition) // Attach listener function
/* Tab to converter Accordion for Mobile view end*/