JSFiddle - React, Tailwind, and code Playground

by Netsurfer

HTML

<body>
		<section class="force-repaint">
			<input type="checkbox" id="checkbox1"/>
			<label for="checkbox1">checkbox1</label>
			<p class="Xforce-repaint">This text should be visible when checkbox1 is checked; unvisible otherwise.</p>
		</section>

		<section class="force-repaint">
			<input type="checkbox" id="checkbox2" checked="checked"/>
			<label for="checkbox2">checkbox2</label>
			<p class="force-repaint">This text should be visible when checkbox2 is checked; unvisible otherwise.</p>
		</section>
		
		<section class="force-repaint">
			<input type="radio" name="radio" id="radio1"/>
			<label for="radio1">radio1</label>
			<input type="radio" name="radio" id="radio2"/>
			<label for="radio2">radio2</label>
			<input type="radio" name="radio" id="radio3"/>
			<label for="radio3">radio3</label>
			<p id="text-radio1" class="Xforce-repaint">This text should be visible when radio1 is checked; unvisible otherwise.</p>
			<p id="text-radio2" class="Xforce-repaint">This text should be visible when radio2 is checked; unvisible otherwise.</p>
			<p id="text-radio3" class="Xforce-repaint">This text should be visible when radio3 is checked; unvisible otherwise.</p>
		</section>

CSS

.force-repaint { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
    from { fill: 0; }
    to { fill: 0; }
}

[type="checkbox"]:not(:checked) ~ p,
#radio1:not(:checked) ~ #text-radio1,
#radio2:not(:checked) ~ #text-radio2,
#radio3:not(:checked) ~ #text-radio3
{
	display: none;
}

section
{
	margin: 2em 0;
}