cardboxticket.vue

    <div class="bg-white h-auto p-5">
        <!-- header -->
        <div class="flex flex-row justify-between items-center">

            <div class="flex flex-row">
                <div class=" rounded-full bg-violet-400 h-12 w-12 mr-3">
                    <figure>
                        <img class="h-12 w-12 object-cover rounded-full"
                            src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1588&q=80"
                            alt="" srcset="" />
                    </figure>
                </div>

                <div class="flex flex-col">
                    <p class=" font-semibold">Alice Martine</p>
                    <p class=" text-gray-400 text-sm">5 hours ago</p>
                </div>
            </div>

            <!-- tag -->
            <div class=" bg-gray-200 w-1/4 h-8 rounded-xl">
                <p class=" text-center mt-1 font-semibold text-gray-500">html</p>
            </div>
        </div>
        <!-- header -->

        <!-- body -->
        <div class="mt-4">
            <p class=" text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
        </div>
        <!-- body -->

        <!-- footer -->
        <div class="flex flex-row justify-start items-center mt-10">
          <div class="bg-red-100 h-8 rounded-full mr-2 px-5">
            <p class="text-center mt-2 font-semibold text-red-800 text-sm">Sol.pdf</p>
          </div>
          <div class="bg-red-100 h-8 rounded-full mr-2 px-5">
            <p class="text-center mt-2 font-semibold text-red-800 text-sm">Sol.pdf</p>
          </div>
        </div>
        <!-- footer -->
    </div>