table-view for form preview

table-view.html

  <!--**********************************
                                Tables View
                  ***********************************-->
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xxl-8 mx-auto">
                            <div class="card mb-5">
                                <div class="card-header">
                                    <div class="card-title">
                                        <h2>Form Preview</h2>
                                    </div>
                                </div>
                                <!--begin::Body-->
                                <div class="card-body py-3">

                                    <div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Image</span>
                                        <div class="me-7 mb-4">
                                            <div
                                                class="symbol symbol-100px symbol-lg-140px symbol-fixed position-relative">
                                                <img src="assets/media/avatars/150-26.jpg" alt="crm">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Name</span>
                                        <span>Momin</span>
                                    </div>

                                    <div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Email</span>
                                        <span>momin@mail.com</span>
                                    </div>

                                    <div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px w-lg-100px w-xxl-150px">Phone Number</span>
                                        <span>018852356856</span>
                                    </div>

                                    <div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Date of Birth</span>
                                        <span>05/15/2024</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Password</span>
                                        <span>#4334$$</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Gender</span>
                                        <span>Male</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Status</span>
                                        <span>Inactive</span>
                                    </div>

                                    <div class="d-flex align-items-start gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Address</span>
                                        <address>House 8, Road 4, Block A, Section 11, Mirpur, Dhaka 1216, Bangladesh
                                        </address>
                                    </div>
                                    <div class="d-flex align-items-start gap-2 bg-light p-3 mb-1">
                                        <span
                                            class="fs-6 fw-bolder mb-1 text-gray-900 text-hover-primary w-lg-100px w-xxl-150px">Note</span>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, veniam.</span>
                                    </div>


                                </div>
                                <!--begin::Body-->

                            </div>


                        </div>
                    </div>
                </div>

                <!-- End Tables View-->