bio-performx/report_gen/page_2.html

<div class="bg-white w-full page m-0 px-10">
    <div class="px-16 py-10">
        <!-- Table of Contents Header -->
        <div class="mb-8">
            <h1
                class="text-5xl font-bold text-black mb-6 tracking-wide border-b-4 border-blue-500 pb-2 text-center"
            >
                TABLE OF CONTENTS
            </h1>
            <div class="w-full h-1 bg-cyan-400"></div>
        </div>

        <!-- Table of Contents Items -->
        <div class="flex flex-col justify-between space-y-6 py-6">
            <!-- Lung Analysis -->
            <div class="flex items-start bg-gray-200 h-24">
                <div
                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                >
                    3
                </div>
                <div class="flex flex-col flex-1 py-1 justify-center h-full">
                    <h2 class="text-2xl font-semibold text-black">
                        Lung Analysis
                    </h2>
                    <p class="text-gray-600 text-base">
                        Pulse Oximetry Assessment
                    </p>
                    <p class="text-gray-600 text-base">
                        Spirometry Assessment
                    </p>
                </div>
            </div>

            <!-- Cardio Metrics -->
            <div class="flex items-start bg-gray-200 h-24">
                <div
                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                >
                    4
                </div>
                <div class="flex flex-col py-1  flex-1 justify-center h-full">
                    <h2 class="text-2xl font-semibold text-black mb-3">
                        Cardio Metrics
                    </h2>
                    <p class="text-gray-600 text-base">
                        Active Metabolic Rate Assessment
                    </p>
                </div>
            </div>

            <!-- Fuel Utilization -->
            <div class="flex items-start bg-gray-200 h-24">
                <div
                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                >
                    5
                </div>
                <div class="flex flex-col py-1 flex-1 justify-center flex-1 h-full">
                    <h2 class="text-2xl font-semibold text-black">
                        Fuel Utilization
                    </h2>
                </div>
            </div>

            <!-- Local Muscle Activity -->
            <div class="flex items-start bg-gray-200 h-24">
                <div
                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                >
                    9
                </div>
                <div class="flex flex-col justify-center h-full flex-1">
                    <h2 class="text-2xl font-semibold text-black">
                        Local Muscle Activity
                    </h2>
                </div>
            </div>

            <!-- Training Recommendations -->
            <div class="flex items-start bg-gray-200 h-24">
                <div
                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                >
                    10
                </div>
                <div class="flex flex-col h-full justify-center flex-1">
                    <h2 class="text-2xl font-semibold text-black">
                        Training Recommendations
                    </h2>
                </div>
            </div>

            <!-- Next Steps -->
            <div class="flex items-start bg-gray-200 h-24">
                <div
                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                >
                    12
                </div>
                <div class="flex flex-col h-full justify-center flex-1">
                    <h2 class="text-2xl font-semibold text-black">
                        Next Steps
                    </h2>
                    <div class="space-y-2">
                        <!-- No sub-items -->
                    </div>
                </div>
            </div>

            <!-- Glossary -->
            <div class="flex items-start bg-gray-200 h-24">
                <div
                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                >
                    13
                </div>
                <div class="flex flex-col h-full justify-center flex-1">
                    <h2 class="text-2xl font-semibold text-black">
                        Glossary
                    </h2>
                    <div class="space-y-2">
                        <!-- No sub-items -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>