tomwhoiscontrary · November 17, 2022 17:59
diff --git a/tabs.html b/tabs.html
 <html>

 <head>
    <style>
        .tabs {
            /* make this a horizontal flexbox, and make it capable of wrapping */
            display: flex;
            flex-wrap: wrap;
        }

        /* a tab is a radio button (hidden), a label (shown in the tab bar), and a section (shown, only when the tab is selected, below the tab bar) */

        .tabs > input {
            /* hide without disabling */
            position: absolute;
            opacity: 0;
        }

        .tabs > label {
            /* divide up the space equally, regardless of content width */
            flex-basis: 0;
            flex-grow: 1;
            /* give users a clue that they can click */
            cursor: pointer;
        }

        .tabs > label:hover {
            /* give users a further clue that they can click */
            text-decoration: underline;
        }

        .tabs > input:checked + label {
            /* show which tab is selected */
            font-weight: bold;
        }

        section {
            /* lay out after the labels */
            order: 99;
            /* hide by default */
            display: none;
            /* fill the whole container, so it definitely wraps */
            width: 100%;
        }

        .tabs > input:checked + label + section {
            /* show when the tab is selected */
            display: initial;
        }
    </style>
 </head>

 <body>

 <div class="tabs">
    <input name="tabs" type="radio" id="tab-aut" checked="checked"/>
    <label for="tab-aut">Aut</label>
    <section>
        authentic authentically authenticate authenticated authenticates
        authenticating authentication authentication's authentications
        authenticity authenticity's author author's authored authoring
        authoritarian authoritarian's authoritarianism authoritarianism's
        authoritarians authoritative authoritatively authoritativeness
        authoritativeness's authorities authority authority's authorization
        authorization's authorizations authorize authorized authorizes authorizing
        authors authorship authorship's autism autism's autistic auto auto's
        autobiographical autobiographies autobiography autobiography's autocracies
        autocracy autocracy's autocrat autocrat's autocratic autocratically
        autocrats autograph autograph's autographed autographing autographs
        autoimmune automata automate automated automates automatic automatic's
        automatically automatics automating automation automation's automaton
        automaton's automatons automobile automobile's automobiled automobiles
        automobiling automotive autonomous autonomously autonomy autonomy's
        autopilot autopilot's autopilots autopsied autopsies autopsy autopsy's
        autopsying autos autoworker autoworker's autoworkers autumn autumn's
        autumnal autumns
    </section>

    <input name="tabs" type="radio" id="tab-leg"/>
    <label for="tab-leg">Leg</label>
    <section>
        leg leg's legacies legacy legacy's legal legal's legalese legalese's
        legalism legalism's legalisms legalistic legality legality's legalization
        legalization's legalize legalized legalizes legalizing legally legals
        legate legate's legatee legatee's legatees legates legation legation's
        legations legato legato's legatos legend legend's legendary legends
        legerdemain legerdemain's legged leggier leggiest leggin leggin's legging
        legging's leggings leggins leggy legibility legibility's legible legibly
        legion legion's legionnaire legionnaire's legionnaires legions legislate
        legislated legislates legislating legislation legislation's legislative
        legislator legislator's legislators legislature legislature's legislatures
        legit legitimacy legitimacy's legitimate legitimated legitimately
        legitimates legitimating legitimize legitimized legitimizes legitimizing
        legless legman legman's legmen legroom legroom's legrooms legs legume
        legume's legumes leguminous legwork legwork's
    </section>

    <input name="tabs" type="radio" id="tab-hor"/>
    <label for="tab-hor">Hor</label>
    <section>
        horde horde's horded hordes hording horizon horizon's horizons horizontal
        horizontal's horizontally horizontals hormonal hormone hormone's hormones
        horn horn's horned hornet hornet's hornets hornier horniest hornless
        hornpipe hornpipe's hornpipes horns horny horology horology's horoscope
        horoscope's horoscopes horrendous horrendously horrible horribly horrid
        horridly horrific horrified horrifies horrify horrifying horror horror's
        horrors horse horse's horseback horseback's horsed horseflies horsefly
        horsefly's horsehair horsehair's horsehide horsehide's horseman horseman's
        horsemanship horsemanship's horsemen horseplay horseplay's horsepower
        horsepower's horseradish horseradish's horseradishes horses horseshoe
        horseshoe's horseshoed horseshoeing horseshoes horsetail horsetail's
        horsetails horsewhip horsewhip's horsewhipped horsewhipping horsewhips
        horsewoman horsewoman's horsewomen horsey horsier horsiest horsing horsy
        horticultural horticulture horticulture's horticulturist horticulturist's
        horticulturists
    </section>
 </div>

 </body>

 </html>
	<html>

	<head>
	<style>
	.tabs {
	/* make this a horizontal flexbox, and make it capable of wrapping */
	display: flex;
	flex-wrap: wrap;
	}

	/* a tab is a radio button (hidden), a label (shown in the tab bar), and a section (shown, only when the tab is selected, below the tab bar) */

	.tabs > input {
	/* hide without disabling */
	position: absolute;
	opacity: 0;
	}

	.tabs > label {
	/* divide up the space equally, regardless of content width */
	flex-basis: 0;
	flex-grow: 1;
	/* give users a clue that they can click */
	cursor: pointer;
	}

	.tabs > label:hover {
	/* give users a further clue that they can click */
	text-decoration: underline;
	}

	.tabs > input:checked + label {
	/* show which tab is selected */
	font-weight: bold;
	}

	section {
	/* lay out after the labels */
	order: 99;
	/* hide by default */
	display: none;
	/* fill the whole container, so it definitely wraps */
	width: 100%;
	}

	.tabs > input:checked + label + section {
	/* show when the tab is selected */
	display: initial;
	}
	</style>
	</head>

	<body>

	<div class="tabs">
	<input name="tabs" type="radio" id="tab-aut" checked="checked"/>
	<label for="tab-aut">Aut</label>
	<section>
	authentic authentically authenticate authenticated authenticates
	authenticating authentication authentication's authentications
	authenticity authenticity's author author's authored authoring
	authoritarian authoritarian's authoritarianism authoritarianism's
	authoritarians authoritative authoritatively authoritativeness
	authoritativeness's authorities authority authority's authorization
	authorization's authorizations authorize authorized authorizes authorizing
	authors authorship authorship's autism autism's autistic auto auto's
	autobiographical autobiographies autobiography autobiography's autocracies
	autocracy autocracy's autocrat autocrat's autocratic autocratically
	autocrats autograph autograph's autographed autographing autographs
	autoimmune automata automate automated automates automatic automatic's
	automatically automatics automating automation automation's automaton
	automaton's automatons automobile automobile's automobiled automobiles
	automobiling automotive autonomous autonomously autonomy autonomy's
	autopilot autopilot's autopilots autopsied autopsies autopsy autopsy's
	autopsying autos autoworker autoworker's autoworkers autumn autumn's
	autumnal autumns
	</section>

	<input name="tabs" type="radio" id="tab-leg"/>
	<label for="tab-leg">Leg</label>
	<section>
	leg leg's legacies legacy legacy's legal legal's legalese legalese's
	legalism legalism's legalisms legalistic legality legality's legalization
	legalization's legalize legalized legalizes legalizing legally legals
	legate legate's legatee legatee's legatees legates legation legation's
	legations legato legato's legatos legend legend's legendary legends
	legerdemain legerdemain's legged leggier leggiest leggin leggin's legging
	legging's leggings leggins leggy legibility legibility's legible legibly
	legion legion's legionnaire legionnaire's legionnaires legions legislate
	legislated legislates legislating legislation legislation's legislative
	legislator legislator's legislators legislature legislature's legislatures
	legit legitimacy legitimacy's legitimate legitimated legitimately
	legitimates legitimating legitimize legitimized legitimizes legitimizing
	legless legman legman's legmen legroom legroom's legrooms legs legume
	legume's legumes leguminous legwork legwork's
	</section>

	<input name="tabs" type="radio" id="tab-hor"/>
	<label for="tab-hor">Hor</label>
	<section>
	horde horde's horded hordes hording horizon horizon's horizons horizontal
	horizontal's horizontally horizontals hormonal hormone hormone's hormones
	horn horn's horned hornet hornet's hornets hornier horniest hornless
	hornpipe hornpipe's hornpipes horns horny horology horology's horoscope
	horoscope's horoscopes horrendous horrendously horrible horribly horrid
	horridly horrific horrified horrifies horrify horrifying horror horror's
	horrors horse horse's horseback horseback's horsed horseflies horsefly
	horsefly's horsehair horsehair's horsehide horsehide's horseman horseman's
	horsemanship horsemanship's horsemen horseplay horseplay's horsepower
	horsepower's horseradish horseradish's horseradishes horses horseshoe
	horseshoe's horseshoed horseshoeing horseshoes horsetail horsetail's
	horsetails horsewhip horsewhip's horsewhipped horsewhipping horsewhips
	horsewoman horsewoman's horsewomen horsey horsier horsiest horsing horsy
	horticultural horticulture horticulture's horticulturist horticulturist's
	horticulturists
	</section>
	</div>

	</body>

	</html>