JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel">
        <div id="Default" class="contentHolder"> 
            
            <a href="#" class="vehicle_details"><span class="active" title="Active"></span><span class="vehicle_name">Car Name <span class="vehicle_number">(TN 58 AJ 3776)</span></span><br /><span class="driver_name">Driver: <span class="name_span">sample name</span></span><br /><span class="driver_mobile">Mob: <span class="driver_number">9842198421</span></span></span><a href="#" class="edit_driver"></a></a>

<a href="#" class="vehicle_details"><span class="inactive" title="Inactive"></span><span class="vehicle_name">Car Name <span class="vehicle_number">(TN 58 AJ 3776)</span></span><br /><span class="driver_name">Driver: <span class="name_span">sample name</span></span><br /><span class="driver_mobile">Mob: <span class="driver_number">9842198421</span></span></span><a href="#" class="edit_driver"></a></a>
            
            <a href="#" class="vehicle_details"><span class="idle" title="Idle"></span><span class="vehicle_name">Car Name <span class="vehicle_number">(TN 58 AJ 3776)</span></span><br /><span class="driver_name">Driver: <span class="name_span">my name</span></span><br /><span class="driver_mobile">Mob: <span class="driver_number">9842198421</span></span></span><a href="#" class="edit_driver"></a></a>

</div>
</div>

CSS

.panel #Default .vehicle_details:first-of-type
{
	border-top: 1px solid #cccccc;
	padding-top: 10px;
}

.panel #Default .vehicle_details
{
	margin-left: 20px;
	border-bottom: 1px solid #cccccc;
	display: inline-block;
	padding-bottom: 10px;
	padding-top: 10px;
}

.panel #Default a .active
{
	margin-right: 15px;
	margin-top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #5d9732;
	display: inline-block;
	vertical-align: top;
}

.panel #Default a .inactive
{
	margin-right: 15px;
	margin-top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff0000;
	margin-right: 15px;
	display: inline-block;
	vertical-align: top;
}

.panel #Default a .idle
{
	margin-right: 15px;
	margin-top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #95a0a4;
	margin-right: 15px;
	display: inline-block;
	vertical-align: top;
}

.panel #Default a .vehicle_name
{
	margin-right: 25px;
	display: inline-block;
	font-family: 'exo_2regular';;
	font-size: 14px;
	color: #333;
	font-weight: bold;
	text-decoration: none;
}

.panel #Default a .vehicle_number
{
	font-family: 'exo_2regular';
	font-size: 14px;
	color: #2788b9;
	font-weight: bold;
	text-decoration: none;
}

.panel #Default a .driver_name
{
	margin-right: 25px;
	margin-left: 25px;
	display: inline-block;
	font-family: 'exo_2regular';
	font-size: 12px;
	color: #666;
	font-weight: bold;
	text-decoration: none;
}

.panel #Default a .name_span
{
	font-family: 'exo_2regular';
	font-size: 14px;
	color: #2788b9;
	font-weight: bold;
	text-decoration: none;
}

.panel #Default a .driver_mobile
{
	margin-right: 25px;
	margin-left: 25px;
	display: inline-block;
	font-family: 'exo_2regular';
	font-size: 12px;
	color: #666;
	font-weight: bold;
	text-decoration: none;
}

.panel #Default a .driver_number
{
	font-family: 'exo_2regular';
	font-size: 14px;
	color: #d70500;
	font-weight: bold;
	text-decoration: none;
}

JavaScript

$('#Default a span.active').closest('.vehicle_details').css('background-color','#444');