JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabs">
					<li class="active">By Name</li>
					<li>By Specialty</li>
					<li>By Location</li>
				</ul>

CSS

ul#tabs {
		list-style-type: none;
		margin: 0 0 30px 0;
		padding: 50px 0 0 0;
		text-align: center;
	}
	ul#tabs li {
		display: inline-block;
		background-color: #3C75C3;
		border-bottom: solid 5px #FF714E;
		padding: 15px 35px;
		margin-bottom: 4px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
	}
	ul#tabs li:hover {
		background-color: #FF714E;
	}
	ul#tabs li.active {
		background-color: #FF714E;
	}

	ul#tab {
		list-style-type: none;
		margin: 0;
		padding: 0;
		color: #000000;
	}