Dynamic CSS Page

<div class="tab-content">
	<input type="radio" id="tab1" name="tabs" checked=""/>
	<label for="tab1">Tab 1</label>
	<div class="tab">
		<h3>Tab 1</h3>
		<p>I'd just like to interject for a moment. What you're referring to as Linux, is in fact, GNU/Linux, or as I've taken to calling it, GNU plus Linux.</p>
	</div>

	<input type="radio" id="tab2" name="tabs"/>
	<label for="tab2">Tab 2</label>
	<div class="tab">
		<h3>Tab 2</h3>
		<p>No Richard, it's Linux, not GNU/Linux.</p>
	</div>

	<input type="radio" id="tab3" name="tabs"/>
	<label for="tab3">Tab 3</label>
	<div class="tab">
		<h3>Tab 3</h3>
		<p>JavaScript and its consequences have been a disaster for the human race.</p>
	</div>
</div>

.tab-content {
	display: flex;
	flex-wrap: wrap;
}

.tab-content > input[type="radio"] {
	display: none;
}

.tab-content > label {
	background-color: #bbb;
	padding: 5px;
	margin: 2px;
	order: 1;
}

.tab-content > label:hover {
	background-color: #ccc;
}

.tab-content > .tab {
	display: none;
	overflow: auto;
	order: 2;
}

.tab-content > input[type="radio"]:checked + label + .tab {
	display: initial;
	width: 100%;
	padding: 5px;
	background-color: #fff;
}

.tab-content > input[type="radio"]:checked + label {
	background-color: #fff;
	font-weight: bold;
}

<input class="dialog-toggle" type="checkbox" id="dialog-toggle" checked=""/>
<div class="dialog">
	<label class="dialog-close" for="dialog-toggle">X</label>
	<p class="dialog-msg">This website doesn't use cookies.</p>
</div>

.dialog {
	background-color: #8f8;
	width: 100%;
}

.dialog-close {
	float: right;
	cursor: pointer;
	background-color: #6d6;
	margin: 0.25em;
	padding: 0.25em;
	padding-bottom: 0;
}

.dialog-msg {
	clear: left;
	padding: 0.5em;
	margin: 0;
}

.dialog-toggle, .dialog-toggle + .dialog {
	display: none;
}

.dialog-toggle:checked + .dialog {
	display: inline-block;
}

<input class="accordion-toggle" type="checkbox" id="acc1-toggle"/>
<label for="acc1-toggle">Item 1</label>
<div class="accordion-content">
	<h3>Item 1</h3>
	<p>CSS Sandwich</p>
</div>

<input class="accordion-toggle" type="checkbox" id="acc2-toggle"/>
<label for="acc2-toggle">Item 2</label>
<div class="accordion-content">
	<h3>Item 2</h3>
	<p>onclick="check_a_box_instead()"</p>
</div>

<input class="accordion-toggle" type="checkbox" id="acc3-toggle"/>
<label for="acc3-toggle">Item 3</label>
<div class="accordion-content">
	<h3>Item 3</h3>
	<p>Web 1.5?</p>
</div>

.accordion-toggle, .accordion-toggle + label + .accordion-content {
	display: none;
}
.accordion-toggle:checked + label + .accordion-content {
	display: block;
}

.accordion-toggle + label {
	display: block;
	background-color: #aaa;
	padding: 0.5em;
}
.accordion-toggle + label:hover, .accordion-toggle:checked + label {
	background-color: #bbb;
}

.accordion-content {
	background-color: #fff;
	padding: 5px;
}

<div class="slideshow">
	<input type="radio" name="slideshow-items" id="slideshow-item1" checked=""/>
	<div class="slideshow-item">
		<label for="slideshow-item3" class="slideshow-control prev">Previous</label>
		<label for="slideshow-item2" class="slideshow-control next">Next</label>
		<img class="slideshow-content" src="slideshow1.jpg"/>
	</div>

	<input type="radio" name="slideshow-items" id="slideshow-item2"/>
	<div class="slideshow-item">
		<label for="slideshow-item1" class="slideshow-control prev">Previous</label>
		<label for="slideshow-item3" class="slideshow-control next">Next</label>
		<img class="slideshow-content" src="slideshow2.jpg"/>
	</div>

	<input type="radio" name="slideshow-items" id="slideshow-item3"/>
	<div class="slideshow-item">
		<label for="slideshow-item2" class="slideshow-control prev">Previous</label>
		<label for="slideshow-item1" class="slideshow-control next">Next</label>
		<img class="slideshow-content" src="slideshow3.jpg"/>
	</div>
</div>

.slideshow > input, .slideshow-item {
	display: none;
}
.slideshow > input:checked + .slideshow-item {
	display: inline-block;
}

.prev {
	float: left;
}
.next {
	float: right;
}
.slideshow-content {
	clear: left;
	width: 100%;
}
.slideshow-control {
	background-color: #000;
	color: #fff;
	padding: 0.5em 0;
	width: 50%;
	text-align: center;
	cursor: pointer;
}
.slideshow-control:hover {
	background-color: #222;
}