JSFiddle - React, Tailwind, and code Playground

by HarmonicApps

HTML

<input type="checkbox" value="1" checked="checked">
		<div class="container">
			<div class="carousel">
				<p>Child 1a to be transformed<br>
					<span style="margin-left:1em;">Child 1a Span 1</span>
				</p>
				<p>Child 2a</p>
				<p>Child 3a</p>
				<p>Child 4a</p>
				<p>Child 5a</p>
				<p>Child 6a</p>
				<p>Child 7a</p>
				<p>Child 8a</p>
				<p>Child 9a</p>
			</div>
		</div>
		<input type="checkbox" value="1">
		<div class="container">
			<div class="carousel">
				<p>Child 1b to be transformed<br>
					<span style="margin-left:1em;">Child 1b Span 1</span>
				</p>
				<p>Child 2b</p>
				<p>Child 3b</p>
				<p>Child 4b</p>
				<p>Child 5b</p>
				<p>Child 6b</p>
				<p>Child 7b</p>
				<p>Child 8b</p>
				<p>Child 9b</p>
			</div>
		</div>

CSS

.carousel > p {opacity: .35; margin: .2em 0;}
input[value="1"]:checked + .container .carousel p:nth-child(1) 
    { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }