Penultimate DnD TAB 5

            <div class="tab-pane p-1" style="border-top-left-radius: 0; border-top-right-radius: 0; height: 505px; border-top: 0px; overflow:auto;" id="FIVE">
                <div class="row no-gutters">
                    <div class="col-3 p-1">
                        <div class="card" style="height: 193px; background-image: url(https://via.placeholder.com/200); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
                    </div>

                    <div class="col-9 p-0 py-1 pr-1">
                        <div class="card" style="height: 193px; border-radius: 0;">
                            <h2 class="card-header text-danger text-uppercase" style="font-size: 1.1rem; font-weight: bold; letter-spacing: 0.25rem;">name
                            <span class="pull-right" style="font-weight: 100;">relation</span></h2>
                            <p class="p-2 text-justify" style="overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis lorem, scelerisque et euismod ut, ornare non sem. Sed commodo odio neque, tempor scelerisque lacus dignissim non. Duis dapibus facilisis sapien, vel sollicitudin magna condimentum ac. Vestibulum a volutpat velit. Etiam lobortis augue nunc, quis tincidunt nisl ullamcorper a. Vestibulum placerat, quam a lacinia accumsan, nulla tellus mattis libero, ac semper libero turpis non metus. Quisque lacinia feugiat sem ac dignissim. Vestibulum eu dignissim ante. Nunc lacinia eros quis vehicula vestibulum. Nulla luctus et libero et consectetur. Sed libero eros, fringilla vitae fermentum id, dictum id tortor. Morbi faucibus faucibus odio, eu facilisis magna ullamcorper sed. Suspendisse vitae ornare dui. Curabitur in ipsum sit amet est commodo mattis sit amet eu mi. Aliquam eget laoreet lorem, vitae lacinia sapien.</p>
                        </div>
                    </div>

                    <div class="col-9 p-0 py-1 pl-1">
                        <div class="card" style="height: 193px; border-radius: 0;">
                            <h2 class="card-header text-warning text-uppercase" style="font-size: 1.1rem; font-weight: bold; letter-spacing: 0.25rem;">name
                            <span class="pull-right" style="font-weight: 100;">relation</span></h2>
                            <p class="p-2 text-justify" style="overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis lorem, scelerisque et euismod ut, ornare non sem. Sed commodo odio neque, tempor scelerisque lacus dignissim non. Duis dapibus facilisis sapien, vel sollicitudin magna condimentum ac. Vestibulum a volutpat velit. Etiam lobortis augue nunc, quis tincidunt nisl ullamcorper a. Vestibulum placerat, quam a lacinia accumsan, nulla tellus mattis libero, ac semper libero turpis non metus. Quisque lacinia feugiat sem ac dignissim. Vestibulum eu dignissim ante. Nunc lacinia eros quis vehicula vestibulum. Nulla luctus et libero et consectetur. Sed libero eros, fringilla vitae fermentum id, dictum id tortor. Morbi faucibus faucibus odio, eu facilisis magna ullamcorper sed. Suspendisse vitae ornare dui. Curabitur in ipsum sit amet est commodo mattis sit amet eu mi. Aliquam eget laoreet lorem, vitae lacinia sapien.</p>
                        </div>
                    </div>

                    <div class="col-3 p-1">
                        <div class="card" style="height: 193px; background-image: url(https://via.placeholder.com/200); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
                    </div>

                    <div class="col-3 p-1">
                        <div class="card" style="height: 193px; background-image: url(https://via.placeholder.com/200); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
                    </div>

                    <div class="col-9 p-0 py-1 pr-1">
                        <div class="card" style="height: 193px; border-radius: 0;">
                            <h2 class="card-header text-success text-uppercase" style="font-size: 1.1rem; font-weight: bold; letter-spacing: 0.25rem;">name
                            <span class="pull-right" style="font-weight: 100;">relation</span></h2>
                            <p class="p-2 text-justify" style="overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis lorem, scelerisque et euismod ut, ornare non sem. Sed commodo odio neque, tempor scelerisque lacus dignissim non. Duis dapibus facilisis sapien, vel sollicitudin magna condimentum ac. Vestibulum a volutpat velit. Etiam lobortis augue nunc, quis tincidunt nisl ullamcorper a. Vestibulum placerat, quam a lacinia accumsan, nulla tellus mattis libero, ac semper libero turpis non metus. Quisque lacinia feugiat sem ac dignissim. Vestibulum eu dignissim ante. Nunc lacinia eros quis vehicula vestibulum. Nulla luctus et libero et consectetur. Sed libero eros, fringilla vitae fermentum id, dictum id tortor. Morbi faucibus faucibus odio, eu facilisis magna ullamcorper sed. Suspendisse vitae ornare dui. Curabitur in ipsum sit amet est commodo mattis sit amet eu mi. Aliquam eget laoreet lorem, vitae lacinia sapien.</p>
                        </div>
                    </div>
                </div>
            </div>