JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col">
<h3>Account Settings</h3>
<ul class="nav nav-tabs mt-4" id="settingsTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="true">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#followers" role="tab" aria-controls="followers" aria-selected="false">Followers</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#following" role="tab" aria-controls="following" aria-selected="false">Following</a>
</li>
</ul>
<div class="tab-content" id="settingsContent">
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
<div class="mt-5">
<h4>Change Username</h4>
<form action="/account" method="POST">
<div class="row">
<div class="col-6">
<input type="text" class="form-control" name="newUsername" placeholder="New Username" />
</div>
</div>
<div class="row">
<div class="col-6 pb-5 border-bottom">
...