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 {
	margin: 40px 0px;
	width: 100%;
	font-family: var(--base-fm);
	font-size: var(--base-size);
	color: var(--base-clr);
	box-shadow: #eef2f6 0 0 60px;
}

.tabstop-part {
	display: flex;
	flex-flow: row wrap;
	justify-content: right;
}

.tabstop-part .tabitem {
	text-align: center;
	margin: auto;
	padding: 14px 10px 14px 10px;
	cursor: pointer;
	flex: auto;
	font-weight: 600;
	transition: 0.5s all;
	position: relative;
	background-color: #eef2f6;
}

.tabstop-part .tabitem.active {
	background-color: var(--white-clr);
	color: var(--black-clr);
}

.tabsdata-part {
	width: 100%;
}

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

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

.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;
		transition: 0.5s all;
		position: relative;
		display: inline-block;
		width: 100%;
		text-align: left;
		margin-bottom: 2px;
	}

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

	.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() {
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*/