<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section id="tabs" class="coE-tab">
<div class="container">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="tab-1" data-toggle="tab" href="#tab1" role="tab"
aria-controls="tab1" aria-selected="true">DEBTOR</a>
<a class="nav-item nav-link" id="tab-2" data-toggle="tab" href="#tab2" role="tab"
aria-controls="tab2" aria-selected="false">CO-DEBTOR</a>
</div>
</nav>
<div class="card">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab-1">
<h5 class="font-weight-bold text-core-green f-900 pb-15 mb-0">Tab 1
</h5>
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue id
augue ac aliquam. Aliquam erat volutpat. Phasellus et ultrices ante.
Cras ornare risus lacus, sollicitudin tempor magna ultrices ut. Cras
mollis finibus cursus. Aenean aliquet sed diam ut venenatis. Duis
scelerisque suscipit blandit. Donec ultricies bibendum nisi vitae
luctus. Cras venenatis magna at mauris fringilla, tempus dapibus ligula
ornare.
</p>
</div>
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab-2">
<h5>Tab 2</h5>
<p class="mb-0">
Mauris metus mi, commodo vitae sapien id, vehicula dignissim arcu. In dictum
fringilla dui vitae pulvinar. Phasellus nisi lacus, dictum non efficitur vitae,
gravida sed sem. Curabitur placerat interdum justo, sit amet dignissim urna
viverra rutrum. Sed eget mauris vel nulla efficitur condimentum. In fringilla
commodo porta. Aliquam nisi augue, pretium ac ligula nec, congue tristique
magna. Morbi fringilla dignissim facilisis. Sed arcu felis, convallis dapibus
porta vel, semper ac risus.
</p>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&family=Titillium+Web:wght@200;400;600;700;900&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
body {
height: 100%;
font-family: 'Source Sans Pro', sans-serif, 'FontAwesome' !important;
font-size: 14px;
color: #4e4e4e;
}
.coE-tab nav {
width: 100%;
background-color: #f5f5f5;
border: 0px solid #eee;
margin: 10px 0px;
}
.coE-tab .nav-link {
border: 1px solid transparent;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
color: #003b4d;
font-size: 16px;
font-weight: 600;
text-align: center;
}
.coE-tab .nav-tabs {
border-bottom: 0px solid #dee2e6;
}
.coE-tab .nav-tabs .nav-link:focus,
.coE-tab .nav-tabs .nav-link:hover {
border-color: transparent;
}
.coE-tab #tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
color: #4bcd3e;
background-color: transparent;
border-color: transparent transparent #f3f3f3;
border-bottom: 0px solid !important;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.coE-tab .nav-tabs .nav-link.active::after {
content: ".";
display: block;
font-size: 22px;
margin-top: -15px;
}
.coE-tab .tab-content {
padding: 15px;
}
.coE-tab h5 {
font-family: 'Titillium Web', sans-serif, 'FontAwesome' !important;
color: #4bcd3e;
padding-bottom: 15px;
font-weight: 900 !important;
margin-bottom: 0px;
}
.card {
-webkit-box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
margin-bottom: 10px;
border: 0px solid rgba(0, 0, 0, .125);
}
@media (min-width: 1100px) {
.coE-tab nav {
padding: 0px 20%;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
