Coder Wrap provides free to use snippets

.preview-mode-scn {
	background-color: #fff;
}

@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: 600px;
	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: var(--theme-clr) 2px solid;
}

.tabstop-part .tabitem {
	text-align: center;
	margin: auto;
	padding: 10px 10px 10px 10px;
	cursor: pointer;
	flex: auto;
	font-weight: 600;
	transition: 0.5s all;
	position: relative;
	border-radius: 6px 6px 0px 0px;
}

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

.tabsdata-part {
	width: 100%;
}

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

.tabsdata-part .tabsdata-show {
	height: auto;
	overflow: inherit;
	padding: 20px 15px;
	border: #e7e7e7 1px solid;
	border-radius: 0px 0px 6px 6px;
}

.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;
		border: none;
	}

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

	.tabsdata-part .tabitem.active {
		background-color: var(--theme-clr);
		color: var(--white-clr);
		border-radius: 6px 6px 0px 0px;
	}

	.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;
		margin-bottom: 4px;
	}

	/* 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*/