JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="wrap">
		<div class="header clearfix">
			<ul class="menu">
				<li class="bfont">
					<a href="#">大</a>
				</li>
				<li class="mfont">
					<a href="#">中</a>
				</li>
				<li class="sfont">
					<a href="#">小</a>
				</li>
		</ul>
		</div>
		
		<div class="content">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus odit qui praesentium accusamus quos animi error similique quod possimus quae itaque, ipsam omnis sed! Tenetur quam rem, ex quidem similique eum expedita! Deleniti dolore minus explicabo, ipsa nostrum possimus, libero ipsum quia sit nihil amet laboriosam delectus rerum quasi assumenda neque asperiores ad, quos sint expedita. Quaerat cum sunt doloremque rerum veniam odit culpa, necessitatibus nisi mollitia veritatis commodi magnam molestias dolores consequuntur ex debitis eum. Reiciendis ut distinctio sunt, provident aperiam. Placeat labore voluptatem consequuntur incidunt eius numquam nihil vitae harum accusamus temporibus sit omnis molestiae, molestias adipisci rem, laudantium ducimus quos aperiam blanditiis id. Cupiditate obcaecati numquam, ut libero voluptas modi. Esse nam cum harum quasi, neque illo molestias ipsam, dolore inventore libero necessitatibus iusto voluptate reprehenderit sunt molestiae sapiente provident sequi quae in accusamus enim quaerat. Dolorem harum tempora tenetur veritatis officiis ab ipsa est perferendis, dolorum, culpa, reiciendis adipisci doloremque? Tempora nesciunt recusandae deleniti, quam temporibus. Repudiandae possimus necessitatibus quam quisquam quibusdam dolorum, sunt labore voluptatem animi autem, mollitia dolor reiciendis assumenda similique repellat! Architecto blanditiis ratione rerum enim nam molestiae tempora cumque amet nemo, maxime voluptates expedita quo aperiam tenetur optio, iure esse a. Itaque tempore reprehenderit a sequi excepturi quod, placeat adipisci reiciendis, explicabo minima earum dolorem ipsam provident cupiditate debitis nemo possimus illo...

CSS

.wrap{
	width: 500px;
	margin:0 auto;
}
.clearfix:after{
	content: '';
	display: table;
	clear:both;
}
.menu {
	float: right;
	margin-bottom: 20px;
}
.menu li{
	float:left;
}
.menu a{
	display: block;
	text-decoration: none;
	background: #000;
	color: #fff;
	padding: 20px;
}
.menu a:hover,.menu a.active{
	background: #ff6768;
}

JavaScript

$(document).ready(function() {
	$('.bfont').click(function(event) {
		$('.content p').css('font-size','20px');
		$('.bfont a').addClass('active').parent().siblings().find('a').removeClass('active');
	});
	$('.mfont').click(function(event) {
		$('.content p').css('font-size','15px');
		$('.mfont a').addClass('active').parent().siblings().find('a').removeClass('active');;
	});
	$('.sfont').click(function(event) {
		$('.content p').css('font-size','12px');
		$('.sfont a').addClass('active').parent().siblings().find('a').removeClass('active');;
	});
});