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;
		}

		.timeline-slider, .timeline-slider * {
	--base-fm: 'Source Sans Pro', sans-serif;
	--base-size: 16px;
	--title-size: 30px;
	--base-clr: #444444;
	--white-clr: #ffffff;
	--black-clr: #000000;
	--theme-clr: #0fb9b1;
	--theme-rgb-clr: 191, 136, 80;
}

.timeline-slider {
	padding: 40px 15px;
	width: 100%;
	max-width: 800px;
	font-family: var(--base-fm);
	font-size: var(--base-size);
	color: var(--base-clr);
 margin: auto;
}
.timeline-slider h2{
	text-align: center;
	font-size: var(--title-size);
}



.timelinetab {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    border-bottom: #ccc 3px solid;
}

.timelinetab-item {
	cursor: pointer;
	font-weight: 700;
	position: relative;
	padding: 20px 0;
	flex: auto;
	text-align: center;
}

.timelinetab-item * {
    pointer-events: none;
}
.timelinetab-icon {
    width: 70px;
    height: 70px;
    background-color: var(--theme-clr);
    border-radius: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;

}

.timelinetab-icon img {
    max-width: 100%;
    max-height: 40px;
}
.timelinetab-item.active .timelinetab-icon {
	    box-shadow: #b9b9b9 0px 4px 4px;
}

.timelinetab-item.active {
	color: var(--theme-clr);
}
.timelinetab-item:after {
    content: '';
    width: 10px;
    height: 11px;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    bottom: -8px;
    border-radius: 100%;
    border: #ccc 2px solid;
    background-color: var(--white-clr);
    
}

.timelinetab-item.active:after {
    bottom: -13px;
    border: var(--theme-clr) 6px solid;
}

.timelinetab-item:before {
    content: '';
    bottom: -4px;
    background-color: var(--theme-clr);
    position: absolute;
    left: 0px;
    right: 0px;
    width: 0;
    height: 5px;
    transition: 0.5s all;
    margin: auto;
}

.timelinetab-item.active:before {
    width: 100%;
}

.timelinedata {
    width: 100%;
    padding: 30px;
    background-color: var(--white-clr);
    box-shadow: #8ec5c2 0 0 14px;
    margin-top: 30px;
    border-radius: 4px;
}

.t-data {
    display: none;
}

.t-data.tabsdata-show {
    display: block;
}

.t-data h3 {
    margin: 0px;
}

.t-data p {
    margin: 10px 0 10px 0;
}

.t-data p:last-child {
    margin-bottom: 0px;
}

@media(max-width: 992px) {
	.timeline-slider {
		font-size: calc(var(--base-size) - 2px);
	}
	.timeline-slider h2 {
		margin: 0px;
		font-size: calc(var(--title-size) - 4px);
	}
	.timelinedata {
    position: relative;
}

.timelinedata:before {
    content: '';
    position: absolute;
    left: 29px;
    width: 2px;
    height: calc(100% - 30px);
    background-color: #d5d5d5;
    z-index: 1;
    top: 16px;
}
	.timelinetab {
		display: none;
	}
	.timelinedata{
		padding: 0px;
	}
	.t-data {
		display: block;
	}
	.timelinetab-item:before, .timelinetab-item:after {
		content: normal;
	}
	.timelinetab-item {
		border-bottom: #e9e9e9 1px solid;
		padding:8px 10px;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
	}
	.timelinetab-icon {
    width: 40px;
    height: 40px;
    margin: 0px 10px 0 0;
    position: relative;
    z-index: 1;
	}
	.timelinetab-item.active {
		border-bottom: none;
	}
		.timelinetab-icon img {
			max-height: 26px;
		}
		.timelinetab-item.active img {
			max-height: 26px;
		}
	.t-data-cont {
		display: none;
		padding: 5px 15px 20px 60px;
		border-bottom: #e9e9e9 1px solid;
  
	}
		.timelinetab-item.active+.t-data-cont {
			display: block;
		}

}

	/**Desktop Tab Code Start**/
//First Tab & Tab Data class
document.querySelector('.timelinetab-item:first-child').classList.add('active');
document.querySelector('.t-data:first-child').classList.add('tabsdata-show')
//Tab Code 
let tabitems = document.querySelectorAll('.timelinetab-item');
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('.t-data');	
 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('.timelineta').replaceChildren(elm) : document.querySelector('.timelineta').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*/