Review List or Receipt - Tailwind Component

This list review tailwind component is great for showing any information that is displayed or organized in a logical or linear formation. as below displays a list of receipt, it is use Tailwind CSS to create this beautiful list view tailwind component.

list-view

Loading component...

index.html

51 lines

<div class="w-full max-w-lg mx-auto">
  <div class="rounded-lg shadow-lg p-12 text-xs mt-8 mx-4 sm:mx-0 bg-white">
    <div>
      <div class="flex flex-col">
        <h1 class="text-gray-800 text-xl font-medium mb-2">Receipt</h1>
        <p class="text-gray-600 text-xs">Date: 05.03.22</p>
        <p class="text-gray-600 text-xs">Order Number: 0000000001</p>
      </div>
      <hr class="my-4">
      <div>
        <div class="flex justify-between items-center">
          <span class="font-medium text-base">House Blend</span><span class="text-base font-medium">$15.00</span>
        </div>
        <div class="mb-4 flex justify-between items-center">
          <span>*Quantity:</span><span class="">1</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="font-medium text-base">French Press</span><span class="text-base font-medium">$29.50</span>
        </div>
        <div class="mb-4 flex justify-between items-center">
          <span>*Quantity:</span><span class="">1</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="font-medium text-base">Stainless Steel Mugs</span><span
            class="text-base font-medium">$43.00</span>
        </div>
        <div class="flex justify-between items-center">
          <span>*Quantity:</span><span class="">2</span>
        </div>
        <hr class="my-4">
        <div class="flex justify-between items-center">
          <span>Shipping Costs:</span><span class="">$0.00</span>
        </div>
        <div class="mb-2 flex justify-between items-center">
          <span>Taxes & Fees</span><span class="">$8.36</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-lg font-medium">Total</span><span class="text-lg font-medium">$96.06</span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

  body {
    font-family: 'Poppins', sans-serif;
  }
</style>

Review List or Receipt - Tailwind Component

Preview - Review List or Receipt - Tailwind Component