JSFiddle - React, Tailwind, and code Playground

by echocarriet

HTML

<body>
	<div class="wrap">
		<div class="header clearfix">
			<ul class="menu">
				<li><a href="#" class="font-l">大</a></li>
				<li><a href="#" class="font-m">中</a></li>
				<li><a href="#" class="font-s">小</a></li>
			</ul>
		</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi accusamus consequuntur soluta amet, aperiam id voluptatibus architecto omnis eveniet odit officia perspiciatis unde culpa, neque explicabo aut illo temporibus possimus.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente distinctio eaque omnis est nam ipsam provident adipisci voluptas, maiores, minima veniam culpa ex, molestiae quos fugiat nemo suscipit eveniet sit sequi, dicta libero. Rerum ipsa dolore maiores alias praesentium voluptatum sed dolores quam. Qui placeat, hic rerum ab, porro expedita.</p>
		</div>
	</div>
</body>

CSS

.wrap{
	width: 600px;
	margin:0 auto;
}
.clearfix:after{    
	content:'';    
	display: table;    
	clear: both;
}
.menu{
	float:right;
}
.menu li{
	float:left;
}
.menu a{
	display: block;
	text-decoration: none;
	color: #fff;
	background: #000;
	padding: 15px;
}
.menu a:hover{
	background: #ff6768;
}
.content p{
	line-height: 1.5;
	font-size: 16px;
}

JavaScript

$(document).ready(function() {
	//字體大
	$('.font-l').click(function(event) {
		$('.content p').css('font-size','20px');
	});
	//字體中
	$('.font-m').click(function(event) {
		$('.content p').css('font-size','16px');
	});
	//字體小
	$('.font-s').click(function(event) {
		$('.content p').css('font-size','12px');
	});
});