eli-oat/index.html

## index.html
<style id="jsbin-css">
main > .tab:last-of-type {
  order: 0;
}
main > article:last-of-type {
  display: flex;
}
main > article:target ~ article {
  display: none;
}
main > article:target ~ .tab {
  background-color: #506C64;
  font-weight: normal;
}
main > .tab:last-of-type {
  background-color: #75B8C8;
  font-weight: bold;
}
main > article {
  display: none;
}
main > article:target {
  display: flex;
}
main > article:target + .tab {
  background-color: #75B8C8;
  font-weight: bold;
}
main {
  display: flex;
  flex-wrap: wrap;
}
main > .tab {
  order: 1;
}
main > article {
  order: 3;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body {
  padding-top: 1vh;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0;
  background-color: #CDD3D5;
  color: #220C10;
}
article {
  min-width: 100%;
  background-color: #75B8C8;
  padding: 0.7rem;
  box-sizing: border-box;
}
main {
  width: 90%;
  min-width: 90%;
}
main > .tab {
  padding: 0.7em;
  background-color: #506C64;
  border: solid #220C10;
  border-width: 1px 1px 0 1px;
  border-radius: 8px 8px 0 0;
  margin: 0 0.7em;
  color: white;
}
</style>
<body>
	<main>

		<article id="about">
			About Content
		</article>
		<a href="#about" class="tab">About</a>

		<article id="contact">
			Contact Content
		</article>
		<a href="#contact" class="tab">Contact</a>

		<article id="home">
			Home Content
		</article>
		<a href="#home" class="tab">Home</a>

	</main>


<script id="jsbin-source-css" type="text/css">// Show the last tab first //////////
main > .tab:last-of-type {
	order: 0;
}

// When initially loaded, show the last tab as selected
main {
	& > article {
		&:last-of-type {
			display: flex;
		}

		&:target {
			& ~ article {
				display: none;
			}
			& ~ .tab {
				background-color: #506C64;
				font-weight: normal;
			}
		}
	}

	& > .tab {
		&:last-of-type {
			background-color: #75B8C8;
			font-weight: bold;
		}
	}
}

// Hide all tabs, style selected ////
main > article {
	display: none;

	&:target {
		display: flex;

		& + .tab {
			background-color: #75B8C8;
			font-weight: bold;
		}
	}
}

// Make tabs preceed content ////////

main {
	display: flex;
	flex-wrap: wrap;

	& > .tab {
		order: 1;
	}
	& > article {
		order: 3;
	}
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
}


// Purely styling ///////////////////
body {
	padding-top: 1vh;
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	background-color: #CDD3D5;
	color: #220C10;
}

article {
	min-width: 100%;
	background-color: #75B8C8;
	padding: 0.7rem;
	box-sizing: border-box;

}

main {
	width: 90%;
	min-width: 90%;

	& > .tab {
		padding: 0.7em;
		background-color: #506C64;
		border: solid #220C10;
		border-width: 1px 1px 0 1px;
		border-radius: 8px 8px 0 0;
		margin: 0 0.7em;
		color: white;
	}
}
</script>
</body>

## jsbin.hizapepixi.css
main > .tab:last-of-type {
  order: 0;
}
main > article:last-of-type {
  display: flex;
}
main > article:target ~ article {
  display: none;
}
main > article:target ~ .tab {
  background-color: #506C64;
  font-weight: normal;
}
main > .tab:last-of-type {
  background-color: #75B8C8;
  font-weight: bold;
}
main > article {
  display: none;
}
main > article:target {
  display: flex;
}
main > article:target + .tab {
  background-color: #75B8C8;
  font-weight: bold;
}
main {
  display: flex;
  flex-wrap: wrap;
}
main > .tab {
  order: 1;
}
main > article {
  order: 3;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body {
  padding-top: 1vh;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0;
  background-color: #CDD3D5;
  color: #220C10;
}
article {
  min-width: 100%;
  background-color: #75B8C8;
  padding: 0.7rem;
  box-sizing: border-box;
}
main {
  width: 90%;
  min-width: 90%;
}
main > .tab {
  padding: 0.7em;
  background-color: #506C64;
  border: solid #220C10;
  border-width: 1px 1px 0 1px;
  border-radius: 8px 8px 0 0;
  margin: 0 0.7em;
  color: white;
}
	<style id="jsbin-css">
	main > .tab:last-of-type {
	order: 0;
	}
	main > article:last-of-type {
	display: flex;
	}
	main > article:target ~ article {
	display: none;
	}
	main > article:target ~ .tab {
	background-color: #506C64;
	font-weight: normal;
	}
	main > .tab:last-of-type {
	background-color: #75B8C8;
	font-weight: bold;
	}
	main > article {
	display: none;
	}
	main > article:target {
	display: flex;
	}
	main > article:target + .tab {
	background-color: #75B8C8;
	font-weight: bold;
	}
	main {
	display: flex;
	flex-wrap: wrap;
	}
	main > .tab {
	order: 1;
	}
	main > article {
	order: 3;
	}
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	body {
	padding-top: 1vh;
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	background-color: #CDD3D5;
	color: #220C10;
	}
	article {
	min-width: 100%;
	background-color: #75B8C8;
	padding: 0.7rem;
	box-sizing: border-box;
	}
	main {
	width: 90%;
	min-width: 90%;
	}
	main > .tab {
	padding: 0.7em;
	background-color: #506C64;
	border: solid #220C10;
	border-width: 1px 1px 0 1px;
	border-radius: 8px 8px 0 0;
	margin: 0 0.7em;
	color: white;
	}
	</style>
	<body>
	<main>

	<article id="about">
	About Content
	</article>
	<a href="#about" class="tab">About</a>

	<article id="contact">
	Contact Content
	</article>
	<a href="#contact" class="tab">Contact</a>

	<article id="home">
	Home Content
	</article>
	<a href="#home" class="tab">Home</a>

	</main>


	<script id="jsbin-source-css" type="text/css">// Show the last tab first //////////
	main > .tab:last-of-type {
	order: 0;
	}

	// When initially loaded, show the last tab as selected
	main {
	& > article {
	&:last-of-type {
	display: flex;
	}

	&:target {
	& ~ article {
	display: none;
	}
	& ~ .tab {
	background-color: #506C64;
	font-weight: normal;
	}
	}
	}

	& > .tab {
	&:last-of-type {
	background-color: #75B8C8;
	font-weight: bold;
	}
	}
	}

	// Hide all tabs, style selected ////
	main > article {
	display: none;

	&:target {
	display: flex;

	& + .tab {
	background-color: #75B8C8;
	font-weight: bold;
	}
	}
	}

	// Make tabs preceed content ////////

	main {
	display: flex;
	flex-wrap: wrap;

	& > .tab {
	order: 1;
	}
	& > article {
	order: 3;
	}
	}

	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	}


	// Purely styling ///////////////////
	body {
	padding-top: 1vh;
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	background-color: #CDD3D5;
	color: #220C10;
	}

	article {
	min-width: 100%;
	background-color: #75B8C8;
	padding: 0.7rem;
	box-sizing: border-box;

	}

	main {
	width: 90%;
	min-width: 90%;

	& > .tab {
	padding: 0.7em;
	background-color: #506C64;
	border: solid #220C10;
	border-width: 1px 1px 0 1px;
	border-radius: 8px 8px 0 0;
	margin: 0 0.7em;
	color: white;
	}
	}
	</script>
	</body>