.tabgroup {
	width: 85%;
}
.tabgroup .tablist {
    display: flex;
	border-block-end: 2px solid #660066;
	font-family: poppins, sans-serif;
	color: black;
}
.tabgroup .tab {
    padding: 0.5em 1em;
    flex: 1 1 auto;
    position:relative;
}
.tabgroup .tab:hover {
	background-color: purple;
}
.tabgroup .tab.active::after {
	content:'';
	background-color:purple;
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	height:3px;
}
.tabgroup .contentlist {
	width:100%;
	height:15em;
	position:relative;
}
.tabgroup .content {
	width:100%;
	height:100%;

	position:absolute;
	top:0;
	left:0;

	background-color:#ffccff;

	/*transition: all 400ms;*/
	opacity:0;

	pointer-events:none;
	/*transform:translate(-100%,0);*/
	/*left:-100%;*/
}

.tabgroup .content.active {
	opacity:1;
	pointer-events:initial;
	/*left:0;*/
	/*transform:translate(0,0);*/
}

.tabgroup .content p{
	width: 100%;
}