Tabler Vertical Tabs

vertical-tabs.blade.php

<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-md-4">
                {{-- Left navigation start --}}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Settings</h3>
                    </div>
                    <div class="list-group list-group-flush" data-bs-toggle="tabs" role="tablist">
                        <a href="#tabs-home-1" class="list-group-item list-group-item-action active" data-bs-toggle="tab" aria-selected="true" role="tab" aria-current="true">
                            Company
                        </a>
                        <a href="#tabs-profile-1" class="list-group-item list-group-item-action" data-bs-toggle="tab" aria-selected="true" role="tab">
                            Profile
                        </a>
                    </div>
                </div>
                {{-- Left navigation end --}}
            </div>
            <div class="col-md-8">
                <div class="tab-content">
                    {{-- Company profile settings start --}}
                    <div class="tab-pane active show" id="tabs-home-1" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Company</h3>
                            </div>
                            <div class="card-body">
                                Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
                            </div>
                        </div>
                    </div>
                    {{-- Company profile settings end --}}
                    <div class="tab-pane" id="tabs-profile-1" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Profile</h3>
                            </div>
                            <div class="card-body">
                                Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>