JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>


<div class="container">

<div class="row">


<div class="col-md-4">
<!-- Tabs nav -->

<div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a class="nav-link p-2 active" id="v-pills-job1-tab" data-toggle="pill" href="#v-pills-job1" role="tab" aria-controls="v-pills-job1" aria-selected="true">
        <span class="font-weight-bold small  tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job2-tab" data-toggle="pill" href="#v-pills-job2" role="tab" aria-controls="v-pills-job2" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job3-tab" data-toggle="pill" href="#v-pills-job3" role="tab" aria-controls="v-pills-job3" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job4-tab" data-toggle="pill" href="#v-pills-job4" role="tab" aria-controls="v-pills-job4" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>


    <a class="nav-link p-2" id="v-pills-job5-tab" data-toggle="pill" href="#v-pills-job5" role="tab" aria-controls="v-pills-job5" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>


        <a class="nav-link p-2" id="v-pills-job6-tab" data-toggle="pill" href="#v-pills-job6" role="tab" aria-controls="v-pills-job6" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2"...

CSS

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
        color: #fff;
        background-color: #00ADEF;
        border-radius: 0px !important;
        border-left: 5px solid #000000;
    }

    

    .nav-pills{
      border-left: 2px solid #dae9f7;
    }

    span.tab-text{
      padding-left: 25px;
    }