darkuranium/tabs-flex.html

## tabs-flex.html
<!DOCTYPE html>
<html>
    <!-- Using Flexbox. No need for `position`, but doesn't work with `nowrap`, thus tab headers might wrap. -->
    <head>
        <meta charset="UTF-8"/>
        <title>Tabs Test</title>
        <style>
            .tabbed {
                display: flex;
                flex-flow: row wrap;
            }

            .tab {
                display: contents;
            }

            .tab > input {
                display: none;
            }

            .tab > label {
                padding: 2px 4px;
                border: 1px solid #CCC;
                background-color: #EEE;

                cursor: pointer;
                user-select: none;

                order: 0;
            }
            .tab > input:checked ~ label {
                background-color: #CFC;
            }

            .tab > input:not(:checked) ~ div {
                display: none;
            }
            .tab > input:checked ~ div {
                flex-basis: 100%;
                order: 1;
            }
        </style>
    </head>
    <body>
        <div class="tabbed">
            <div class="tab">
                <input type="radio" name="t-test" id="t-test-A" value="A"/>
                <label for="t-test-A">Tab A</label>
                <div>
                    <h2>Tab A contents!</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat nibh at ex volutpat, vel eleifend nisi pharetra. Phasellus elementum purus sem, id faucibus tortor finibus quis. Aliquam erat volutpat. Maecenas bibendum pulvinar malesuada. Cras blandit, quam eu consectetur pharetra, nibh turpis pretium lorem, eu finibus mauris massa vel neque. Aenean magna ipsum, efficitur sit amet accumsan eu, rhoncus vitae mi. Fusce non hendrerit mi. Donec quis leo nec purus maximus congue. Cras diam enim, scelerisque sit amet ultrices vel, sagittis quis magna.</p>
                </div>
            </div>
            <div class="tab">
                <input type="radio" name="t-test" id="t-test-B" value="B"/>
                <label for="t-test-B">Tab B</label>
                <div>
                    <h2>Tab B contents!</h2>
                    <p>Vestibulum placerat orci ut augue posuere venenatis. Proin sodales ullamcorper arcu, eu feugiat enim scelerisque nec. Sed semper pulvinar elit eu ornare. Vestibulum semper tellus ex, non ultrices ligula sollicitudin vitae. Vivamus et nisl nisl. Donec vehicula luctus massa in sollicitudin. Sed bibendum sem nunc, nec porttitor libero semper at.</p>
                </div>
            </div>
            <div class="tab">
                <input type="radio" name="t-test" id="t-test-C" value="C"/>
                <label for="t-test-C">Tab C</label>
                <div>
                    <h2>Tab C contents!</h2>
                    <p>Pellentesque sollicitudin justo non pellentesque malesuada. Ut sit amet tincidunt nibh. Nulla id ligula non nisl aliquet egestas in quis nisi. Mauris eu ornare velit. Nullam consectetur erat eget pellentesque sagittis. Duis id tempus turpis. Pellentesque rhoncus risus ut porttitor facilisis. Sed id malesuada quam, vitae ultricies velit. Nam id egestas dolor.</p>
                </div>
            </div>
        </div>
    </body>
</html>

## tabs-grid.html
<!DOCTYPE html>
<html>
    <!-- Using Grid. Needs `position`, but tabs can be forced *not* to wrap. -->
    <head>
        <meta charset="UTF-8"/>
        <title>Tabs Test</title>
        <style>
            .tabbed {
                position: relative;
                display: grid;
                grid-template-rows: [head] auto [sep] auto [tail];

                justify-content: start;
            }

            .tab {
                display: contents;
            }

            .tab > input {
                display: none;
            }

            .tab > label {
                padding: 2px 4px;
                border: 1px solid #CCC;
                background-color: #EEE;

                cursor: pointer;
                user-select: none;

                grid-row: head / sep;
            }
            .tab > input:checked ~ label {
                background-color: #CFC;
            }

            .tab > input:not(:checked) ~ div {
                display: none;
            }
            .tab > input:checked ~ div {
                grid-row: sep / tail;
                position: absolute;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="tabbed">
            <div class="tab">
                <input type="radio" name="t-test" id="t-test-A" value="A"/>
                <label for="t-test-A">Tab A</label>
                <div>
                    <h2>Tab A contents!</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat nibh at ex volutpat, vel eleifend nisi pharetra. Phasellus elementum purus sem, id faucibus tortor finibus quis. Aliquam erat volutpat. Maecenas bibendum pulvinar malesuada. Cras blandit, quam eu consectetur pharetra, nibh turpis pretium lorem, eu finibus mauris massa vel neque. Aenean magna ipsum, efficitur sit amet accumsan eu, rhoncus vitae mi. Fusce non hendrerit mi. Donec quis leo nec purus maximus congue. Cras diam enim, scelerisque sit amet ultrices vel, sagittis quis magna.</p>
                </div>
            </div>
            <div class="tab">
                <input type="radio" name="t-test" id="t-test-B" value="B"/>
                <label for="t-test-B">Tab B</label>
                <div>
                    <h2>Tab B contents!</h2>
                    <p>Vestibulum placerat orci ut augue posuere venenatis. Proin sodales ullamcorper arcu, eu feugiat enim scelerisque nec. Sed semper pulvinar elit eu ornare. Vestibulum semper tellus ex, non ultrices ligula sollicitudin vitae. Vivamus et nisl nisl. Donec vehicula luctus massa in sollicitudin. Sed bibendum sem nunc, nec porttitor libero semper at.</p>
                </div>
            </div>
            <div class="tab">
                <input type="radio" name="t-test" id="t-test-C" value="C"/>
                <label for="t-test-C">Tab C</label>
                <div>
                    <h2>Tab C contents!</h2>
                    <p>Pellentesque sollicitudin justo non pellentesque malesuada. Ut sit amet tincidunt nibh. Nulla id ligula non nisl aliquet egestas in quis nisi. Mauris eu ornare velit. Nullam consectetur erat eget pellentesque sagittis. Duis id tempus turpis. Pellentesque rhoncus risus ut porttitor facilisis. Sed id malesuada quam, vitae ultricies velit. Nam id egestas dolor.</p>
                </div>
            </div>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<!-- Using Flexbox. No need for `position`, but doesn't work with `nowrap`, thus tab headers might wrap. -->
	<head>
	<meta charset="UTF-8"/>
	<title>Tabs Test</title>
	<style>
	.tabbed {
	display: flex;
	flex-flow: row wrap;
	}

	.tab {
	display: contents;
	}

	.tab > input {
	display: none;
	}

	.tab > label {
	padding: 2px 4px;
	border: 1px solid #CCC;
	background-color: #EEE;

	cursor: pointer;
	user-select: none;

	order: 0;
	}
	.tab > input:checked ~ label {
	background-color: #CFC;
	}

	.tab > input:not(:checked) ~ div {
	display: none;
	}
	.tab > input:checked ~ div {
	flex-basis: 100%;
	order: 1;
	}
	</style>
	</head>
	<body>
	<div class="tabbed">
	<div class="tab">
	<input type="radio" name="t-test" id="t-test-A" value="A"/>
	<label for="t-test-A">Tab A</label>
	<div>
	<h2>Tab A contents!</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat nibh at ex volutpat, vel eleifend nisi pharetra. Phasellus elementum purus sem, id faucibus tortor finibus quis. Aliquam erat volutpat. Maecenas bibendum pulvinar malesuada. Cras blandit, quam eu consectetur pharetra, nibh turpis pretium lorem, eu finibus mauris massa vel neque. Aenean magna ipsum, efficitur sit amet accumsan eu, rhoncus vitae mi. Fusce non hendrerit mi. Donec quis leo nec purus maximus congue. Cras diam enim, scelerisque sit amet ultrices vel, sagittis quis magna.</p>
	</div>
	</div>
	<div class="tab">
	<input type="radio" name="t-test" id="t-test-B" value="B"/>
	<label for="t-test-B">Tab B</label>
	<div>
	<h2>Tab B contents!</h2>
	<p>Vestibulum placerat orci ut augue posuere venenatis. Proin sodales ullamcorper arcu, eu feugiat enim scelerisque nec. Sed semper pulvinar elit eu ornare. Vestibulum semper tellus ex, non ultrices ligula sollicitudin vitae. Vivamus et nisl nisl. Donec vehicula luctus massa in sollicitudin. Sed bibendum sem nunc, nec porttitor libero semper at.</p>
	</div>
	</div>
	<div class="tab">
	<input type="radio" name="t-test" id="t-test-C" value="C"/>
	<label for="t-test-C">Tab C</label>
	<div>
	<h2>Tab C contents!</h2>
	<p>Pellentesque sollicitudin justo non pellentesque malesuada. Ut sit amet tincidunt nibh. Nulla id ligula non nisl aliquet egestas in quis nisi. Mauris eu ornare velit. Nullam consectetur erat eget pellentesque sagittis. Duis id tempus turpis. Pellentesque rhoncus risus ut porttitor facilisis. Sed id malesuada quam, vitae ultricies velit. Nam id egestas dolor.</p>
	</div>
	</div>
	</div>
	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<!-- Using Grid. Needs `position`, but tabs can be forced not to wrap. -->
	<head>
	<meta charset="UTF-8"/>
	<title>Tabs Test</title>
	<style>
	.tabbed {
	position: relative;
	display: grid;
	grid-template-rows: [head] auto [sep] auto [tail];

	justify-content: start;
	}

	.tab {
	display: contents;
	}

	.tab > input {
	display: none;
	}

	.tab > label {
	padding: 2px 4px;
	border: 1px solid #CCC;
	background-color: #EEE;

	cursor: pointer;
	user-select: none;

	grid-row: head / sep;
	}
	.tab > input:checked ~ label {
	background-color: #CFC;
	}

	.tab > input:not(:checked) ~ div {
	display: none;
	}
	.tab > input:checked ~ div {
	grid-row: sep / tail;
	position: absolute;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div class="tabbed">
	<div class="tab">
	<input type="radio" name="t-test" id="t-test-A" value="A"/>
	<label for="t-test-A">Tab A</label>
	<div>
	<h2>Tab A contents!</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat nibh at ex volutpat, vel eleifend nisi pharetra. Phasellus elementum purus sem, id faucibus tortor finibus quis. Aliquam erat volutpat. Maecenas bibendum pulvinar malesuada. Cras blandit, quam eu consectetur pharetra, nibh turpis pretium lorem, eu finibus mauris massa vel neque. Aenean magna ipsum, efficitur sit amet accumsan eu, rhoncus vitae mi. Fusce non hendrerit mi. Donec quis leo nec purus maximus congue. Cras diam enim, scelerisque sit amet ultrices vel, sagittis quis magna.</p>
	</div>
	</div>
	<div class="tab">
	<input type="radio" name="t-test" id="t-test-B" value="B"/>
	<label for="t-test-B">Tab B</label>
	<div>
	<h2>Tab B contents!</h2>
	<p>Vestibulum placerat orci ut augue posuere venenatis. Proin sodales ullamcorper arcu, eu feugiat enim scelerisque nec. Sed semper pulvinar elit eu ornare. Vestibulum semper tellus ex, non ultrices ligula sollicitudin vitae. Vivamus et nisl nisl. Donec vehicula luctus massa in sollicitudin. Sed bibendum sem nunc, nec porttitor libero semper at.</p>
	</div>
	</div>
	<div class="tab">
	<input type="radio" name="t-test" id="t-test-C" value="C"/>
	<label for="t-test-C">Tab C</label>
	<div>
	<h2>Tab C contents!</h2>
	<p>Pellentesque sollicitudin justo non pellentesque malesuada. Ut sit amet tincidunt nibh. Nulla id ligula non nisl aliquet egestas in quis nisi. Mauris eu ornare velit. Nullam consectetur erat eget pellentesque sagittis. Duis id tempus turpis. Pellentesque rhoncus risus ut porttitor facilisis. Sed id malesuada quam, vitae ultricies velit. Nam id egestas dolor.</p>
	</div>
	</div>
	</div>
	</body>
	</html>