JSFiddle - React, Tailwind, and code Playground

by davidliang2008

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container mt-5">


	<!--Section: Content-->
	<section class="dark-grey-text text-center">
		<!-- Section heading -->
		<h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3>
		<!-- Section description -->
		<p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p>

		<!--First row-->
		<div class="row">

			<!--First column-->
			<div class="col-12">

				<!-- Nav tabs -->
				<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
					<li class="nav-item">
						<a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a>
					</li>
					<li class="nav-item">
						<a id="branding-tab-link" class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a>
					</li>
					<li class="nav-item">
						<a id="packaging-tab-link" class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a>
					</li>
					<li class="nav-item">
						<a id="print-design-tab-link" class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a>
					</li>
				</ul>

			</div>
			<!--First column-->

		</div>
		<!--First row-->

		<!--Tab panels-->
		<div class="tab-content">

			<!--Panel 1-->
			<div class="tab-pane fade show in active" id="panel31" role="tabpanel">

				<!--First row-->
				<div class="row">

					<!--First column-->
					<div class="col-lg-4...

CSS

.md-pills .nav-link.active {
	background-color: #3f51b5;
	color: #fff;
}

.tab-content {
	margin-top: 1rem;
}

JavaScript

$(function() {
	$('a.reference-link').click(function(){
		let navLinkId = $(this).data('nav-link-id');		
				
		$(navLinkId).trigger('click');
		
		$(body).scrollTop();
		
		return false;
	});
});