JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabs">
					<li class="active person"">By Name</li>
					<li class="book">By Specialty</li>
					<li class="target">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;
		border-bottom: solid 5px #FF714E;
		padding: 25px 50px;
		margin-bottom: 4px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
}

ul#tabs li.person {
    		background: #3C75C3 url('https://standards.ieee.org/images/event_icon7.png') no-repeat;
        background-position:7px center;
}
ul#tabs li.book {
    		background: #3C75C3 url('https://standards.ieee.org/images/event_icon7.png') no-repeat;
        background-position:7px center;
}
ul#tabs li.target {
    		background: #3C75C3 url('https://standards.ieee.org/images/event_icon7.png') no-repeat;
        background-position:7px center;
}
	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;
	}