css tabs

by Ben Gillbanks

HTML

<style>
/* Hide the input elements */
.tabset>input[type="radio"] {
	position: absolute;
	left: -200vw;
}

.tabset {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
}

/* Show only the active tab panel */
.tabset>input:checked+label+.tab-panel {
	display: block;
}

/* Styling for tab labels */
.tabset>input+label {
	position: relative;
	display: inline-block;
	padding: 1rem 1.5rem;
	cursor: pointer;
	font-weight: 600;
	opacity: 0.5;
	background: yellow;
	color: black;
	margin: 0;
}

/* Hover and focus styling for tabs */
.tabset>label:hover,
.tabset>input:focus+label,
.tabset>input:checked+label {
	opacity: 1;
}

/* Hide all tab panels by default */
.tab-panel {
	display: none;
}

/* Additional styling for better presentation */
.tab-panel {
	padding: 1rem;
    width: 100%;
    background: #eee;
    order: 2
}
</style>

<div class="tabset">
	<!-- Tab 1 -->
	<input type="radio" name="tabset" id="tab1" aria-controls="request-free" checked>
	<label for="tab1">Free Gif</label>
	<section id="request-free" class="tab-panel bg-white p4 t-ideal-length" markdown=1>{% include request/free.md %}</section>
	<!-- Tab 2 -->
	<input type="radio" name="tabset" id="tab2" aria-controls="request-business">
	<label for="tab2">Branded Gif</label>
	<section id="request-business" class="tab-panel bg-white p4 t-ideal-length" markdown=1>{% include request/branded.md %}</section>
</div>