tailwind-ai/application_ui/lists/tables/with_condensed_content.html

<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-base font-semibold text-gray-900">Transactions</h1>
            <p class="mt-2 text-sm text-gray-700">
                A table of placeholder stock market data that does not make any
                sense.
            </p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <button
                type="button"
                class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
                Export
            </button>
        </div>
    </div>
    <div class="mt-8 flow-root">
        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div
                class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
            >
                <table class="min-w-full divide-y divide-gray-300">
                    <thead>
                        <tr>
                            <th
                                scope="col"
                                class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold whitespace-nowrap text-gray-900 sm:pl-0"
                            >
                                Transaction ID
                            </th>
                            <th
                                scope="col"
                                class="px-2 py-3.5 text-left text-sm font-semibold whitespace-nowrap text-gray-900"
                            >
                                Company
                            </th>
                            <th
                                scope="col"
                                class="px-2 py-3.5 text-left text-sm font-semibold whitespace-nowrap text-gray-900"
                            >
                                Share
                            </th>
                            <th
                                scope="col"
                                class="px-2 py-3.5 text-left text-sm font-semibold whitespace-nowrap text-gray-900"
                            >
                                Commision
                            </th>
                            <th
                                scope="col"
                                class="px-2 py-3.5 text-left text-sm font-semibold whitespace-nowrap text-gray-900"
                            >
                                Price
                            </th>
                            <th
                                scope="col"
                                class="px-2 py-3.5 text-left text-sm font-semibold whitespace-nowrap text-gray-900"
                            >
                                Quantity
                            </th>
                            <th
                                scope="col"
                                class="px-2 py-3.5 text-left text-sm font-semibold whitespace-nowrap text-gray-900"
                            >
                                Net amount
                            </th>
                            <th
                                scope="col"
                                class="relative py-3.5 pr-4 pl-3 whitespace-nowrap sm:pr-0"
                            >
                                <span class="sr-only">Edit</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white">
                        <tr>
                            <td
                                class="py-2 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pl-0"
                            >
                                AAPS0L
                            </td>
                            <td
                                class="px-2 py-2 text-sm font-medium whitespace-nowrap text-gray-900"
                            >
                                Chase &amp; Co.
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-900"
                            >
                                CAC
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                +$4.37
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $3,509.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                12.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $4,397.00
                            </td>
                            <td
                                class="relative py-2 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0"
                            >
                                <a
                                    href="#"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    >Edit<span class="sr-only"
                                        >, AAPS0L</span
                                    ></a
                                >
                            </td>
                        </tr>
                        <tr>
                            <td
                                class="py-2 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pl-0"
                            >
                                O2KMND
                            </td>
                            <td
                                class="px-2 py-2 text-sm font-medium whitespace-nowrap text-gray-900"
                            >
                                Amazon.com Inc.
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-900"
                            >
                                AMZN
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                +$5.92
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $2,900.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                8.80
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $3,509.00
                            </td>
                            <td
                                class="relative py-2 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0"
                            >
                                <a
                                    href="#"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    >Edit<span class="sr-only"
                                        >, O2KMND</span
                                    ></a
                                >
                            </td>
                        </tr>
                        <tr>
                            <td
                                class="py-2 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pl-0"
                            >
                                1LP2P4
                            </td>
                            <td
                                class="px-2 py-2 text-sm font-medium whitespace-nowrap text-gray-900"
                            >
                                Procter &amp; Gamble
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-900"
                            >
                                PG
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                -$5.65
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $7,978.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                2.30
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $2,652.00
                            </td>
                            <td
                                class="relative py-2 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0"
                            >
                                <a
                                    href="#"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    >Edit<span class="sr-only"
                                        >, 1LP2P4</span
                                    ></a
                                >
                            </td>
                        </tr>
                        <tr>
                            <td
                                class="py-2 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pl-0"
                            >
                                PS9FJGL
                            </td>
                            <td
                                class="px-2 py-2 text-sm font-medium whitespace-nowrap text-gray-900"
                            >
                                Berkshire Hathaway
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-900"
                            >
                                BRK
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                +$4.37
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $3,116.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                48.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $6,055.00
                            </td>
                            <td
                                class="relative py-2 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0"
                            >
                                <a
                                    href="#"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    >Edit<span class="sr-only"
                                        >, PS9FJGL</span
                                    ></a
                                >
                            </td>
                        </tr>
                        <tr>
                            <td
                                class="py-2 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pl-0"
                            >
                                QYR135
                            </td>
                            <td
                                class="px-2 py-2 text-sm font-medium whitespace-nowrap text-gray-900"
                            >
                                Apple Inc.
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-900"
                            >
                                AAPL
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                +$38.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $8,508.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                36.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $3,496.00
                            </td>
                            <td
                                class="relative py-2 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0"
                            >
                                <a
                                    href="#"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    >Edit<span class="sr-only"
                                        >, QYR135</span
                                    ></a
                                >
                            </td>
                        </tr>
                        <tr>
                            <td
                                class="py-2 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pl-0"
                            >
                                99SLSM
                            </td>
                            <td
                                class="px-2 py-2 text-sm font-medium whitespace-nowrap text-gray-900"
                            >
                                NVIDIA Corporation
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-900"
                            >
                                NVDA
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                +$1,427.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $4,425.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                18.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $2,109.00
                            </td>
                            <td
                                class="relative py-2 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0"
                            >
                                <a
                                    href="#"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    >Edit<span class="sr-only"
                                        >, 99SLSM</span
                                    ></a
                                >
                            </td>
                        </tr>
                        <tr>
                            <td
                                class="py-2 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pl-0"
                            >
                                OSDJLS
                            </td>
                            <td
                                class="px-2 py-2 text-sm font-medium whitespace-nowrap text-gray-900"
                            >
                                Johnson &amp; Johnson
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-900"
                            >
                                JNJ
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                +$1,937.23
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $4,038.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                32.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $7,210.00
                            </td>
                            <td
                                class="relative py-2 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0"
                            >
                                <a
                                    href="#"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    >Edit<span class="sr-only"
                                        >, OSDJLS</span
                                    ></a
                                >
                            </td>
                        </tr>
                        <tr>
                            <td
                                class="py-2 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 sm:pl-0"
                            >
                                4HJK3N
                            </td>
                            <td
                                class="px-2 py-2 text-sm font-medium whitespace-nowrap text-gray-900"
                            >
                                JPMorgan
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-900"
                            >
                                JPM
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                -$3.67
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $3,966.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                80.00
                            </td>
                            <td
                                class="px-2 py-2 text-sm whitespace-nowrap text-gray-500"
                            >
                                $6,432.00
                            </td>
                            <td
                                class="relative py-2 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-0"
                            >
                                <a
                                    href="#"
                                    class="text-indigo-600 hover:text-indigo-900"
                                    >Edit<span class="sr-only"
                                        >, 4HJK3N</span
                                    ></a
                                >
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>