Trecho TAB HTML Tela Checkout do curso Laravel 6 Criando Marketplace - Code Experts e Udemy

checkout.html

<div class="container">


        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="creditCard-tab" data-toggle="tab" href="#creditCard" role="tab" aria-controls="creditCard" aria-selected="true">Cartão de Crédito</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="boleto-tab" data-toggle="tab" href="#boleto" role="tab" aria-controls="boleto" aria-selected="false">Boleto</a>
            </li>
        </ul>
        <div class="tab-content pt-5" id="myTabContent">
            <div class="tab-pane fade show active" id="creditCard" role="tabpanel" aria-labelledby="creditCard-tab">
                <!-- Cartão de Crédito Conteúdo Tab-->
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-12">
                            <h2>Dados para Pagamento</h2>
                            <hr>
                        </div>
                    </div>
                    <form action="" method="post">
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label>Nome no Cartão</label>
                                <input type="text" class="form-control" name="card_name">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label>Número do Cartão <span class="brand"></span></label>
                                <input type="text" class="form-control" name="card_number">
                                <input type="hidden" name="card_brand">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label>Mês de Expiração</label>
                                <input type="text" class="form-control" name="card_month">
                            </div>

                            <div class="col-md-4 form-group">
                                <label>Ano de Expiração</label>
                                <input type="text" class="form-control" name="card_year">
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-5 form-group">
                                <label>Código de Segurança</label>
                                <input type="text" class="form-control" name="card_cvv">
                            </div>

                            <div class="col-md-12 installments form-group"></div>
                        </div>

                        <button class="btn btn-success btn-lg processCheckout">Efetuar Pagamento</button>
                    </form>
                </div>
                <!-- Fim Cartão de Crédito Conteúdo Tab-->
            </div>

            <div class="tab-pane fade" id="boleto" role="tabpanel" aria-labelledby="boleto-tab">

                <div class="row">
                    <div class="col-12">
                        <h2>Pagar com Boleto</h2>
                        <button class="btn btn-success btn-lg">Emitir Boleto</button>
                    </div>
                </div>

            </div>
        </div>


    </div>