Published on

Most Effective Ways To Make A Shopping Cart with coupon With Tailwind CSS

Tags
PagesWidget
Shopping Cart with coupon

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Shopping Cart with coupon ui component

A responsive shopping cart made for one of my open-source projects

Why use Tailwind CSS to make a Shopping Cart with coupon ui component?

  • It can make the building process of Shopping Cart with coupon ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Shopping Cart with coupon component file.

The preview of Shopping Cart with coupon ui component

Free download of the Shopping Cart with coupon's source code

The source code of Shopping Cart with coupon ui component

<div class="flex justify-center my-6">
  <div class="flex flex-col w-full p-8 text-gray-800 bg-white shadow-lg pin-r pin-y md:w-4/5 lg:w-4/5">
    <div class="flex-1">
      <table class="w-full text-sm lg:text-base" cellspacing="0">
        <thead>
          <tr class="h-12 uppercase">
            <th class="hidden md:table-cell"></th>
            <th class="text-left">Product</th>
            <th class="lg:text-right text-left pl-5 lg:pl-0">
              <span class="lg:hidden" title="Quantity">Qtd</span>
              <span class="hidden lg:inline">Quantity</span>
            </th>
            <th class="hidden text-right md:table-cell">Unit price</th>
            <th class="text-right">Total price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="hidden pb-4 md:table-cell">
              <a href="#">
                <img src="https://limg.app/i/Calm-Cormorant-Catholic-Pinball-Blaster-yM4oub.jpeg" class="w-20 rounded" alt="Thumbnail">
              </a>
            </td>
            <td>
              <a href="#">
                <p class="mb-2 md:ml-4">Earphone</p>
                <form action="" method="POST">
                  <button type="submit" class="text-gray-700 md:ml-4">
                    <small>(Remove item)</small>
                  </button>
                </form>
              </a>
            </td>
            <td class="justify-center md:justify-end md:flex mt-6">
              <div class="w-20 h-10">
                <div class="relative flex flex-row w-full h-8">
                <input type="number" value="2" 
                  class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
                </div>
              </div>
            </td>
            <td class="hidden text-right md:table-cell">
              <span class="text-sm lg:text-base font-medium">
                10.00€
              </span>
            </td>
            <td class="text-right">
              <span class="text-sm lg:text-base font-medium">
                20.00€
              </span>
            </td>
          </tr> 
          <tr>
            <td class="hidden pb-4 md:table-cell">
              <a href="#">
                <img src="https://limg.app/i/Cute-Constrictor-Super-Sexy-Military-Enforcer-W7mvBp.png" class="w-20 rounded" alt="Thumbnail">
              </a>
            </td>
            <td>
              <p class="mb-2 md:ml-4">Tesla Model 3</p>
              <form action="" method="POST">
                <button type="submit" class="text-gray-700 md:ml-4">
                  <small>(Remove item)</small>
                </button>
              </form>
            </td>
            <td class="justify-center md:justify-end md:flex md:mt-4">
            <div class="w-20 h-10">
              <div class="relative flex flex-row w-full h-8">
              <input type="number" value="3" 
                class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
              </div>
            </div>
            </td>
            <td class="hidden text-right md:table-cell">
              <span class="text-sm lg:text-base font-medium">
                49,600.01€
              </span>
            </td>
            <td class="text-right">
              <span class="text-sm lg:text-base font-medium">
                148,800.03€
              </span>
            </td>
          </tr> 
          <tr>
            <td class="hidden pb-4 md:table-cell">
              <a href="#">
                <img src="https://limg.app/i/Successful-Spider-Biblical-Mutant---Total-War-lKoE7D.jpeg" class="w-20 rounded" alt="Thumbnail">
              </a>
            </td>
            <td>
              <p class="mb-2 md:ml-4">Bic 4 colour pen</p>
              <form action="" method="POST">
                <button type="submit" class="text-gray-700 md:ml-4">
                  <small>(Remove item)</small>
                </button>
              </form>
            </td>
            <td class="justify-center md:justify-end md:flex md:mt-8">
            <div class="w-20 h-10">
              <div class="relative flex flex-row w-full h-8">
              <input type="number" value="5" 
                class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
              </div>
            </div>

            </td>
            <td class="hidden text-right md:table-cell">
              <span class="text-sm lg:text-base font-medium">
                1.50€
              </span>
            </td>
            <td class="text-right">
              <span class="text-sm lg:text-base font-medium">
                7.50€
              </span>
            </td>
          </tr> 
        </tbody>
      </table>
      <hr class="pb-6 mt-6">
      <div class="my-4 mt-6 -mx-2 lg:flex">
        <div class="lg:px-2 lg:w-1/2">
          <div class="p-4 bg-gray-100 rounded-full">
            <h1 class="ml-2 font-bold uppercase">Coupon Code</h1>
          </div>
          <div class="p-4">
            <p class="mb-4 italic">If you have a coupon code, please enter it in the box below</p>
            <div class="justify-center md:flex">
              <form action="" method="POST">
                  <div class="flex items-center w-full h-13 pl-3 bg-white bg-gray-100 border rounded-full">
                    <input type="coupon" name="code" id="coupon" placeholder="Apply coupon" value="90off"
                            class="w-full bg-gray-100 outline-none appearance-none focus:outline-none active:outline-none"/>
                      <button type="submit" class="text-sm flex items-center px-3 py-1 text-white bg-gray-800 rounded-full outline-none md:px-4 hover:bg-gray-700 focus:outline-none active:outline-none">
                        <svg aria-hidden="true" data-prefix="fas" data-icon="gift" class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 448c0 17.7 14.3 32 32 32h160V320H32v128zm256 32h160c17.7 0 32-14.3 32-32V320H288v160zm192-320h-42.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H32c-17.7 0-32 14.3-32 32v80c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-80c0-17.7-14.3-32-32-32zm-326.1 0c-22.1 0-40-17.9-40-40s17.9-40 40-40c19.9 0 34.6 3.3 86.1 80h-86.1zm206.1 0h-86.1c51.4-76.5 65.7-80 86.1-80 22.1 0 40 17.9 40 40s-17.9 40-40 40z"/></svg>
                        <span class="font-medium">Apply coupon</span>
                      </button>
                  </div>
              </form>
            </div>
          </div>
          <div class="p-4 mt-6 bg-gray-100 rounded-full">
            <h1 class="ml-2 font-bold uppercase">Instruction for seller</h1>
          </div>
          <div class="p-4">
            <p class="mb-4 italic">If you have some information for the seller you can leave them in the box below</p>
            <textarea class="w-full h-24 p-2 bg-gray-100 rounded"></textarea>
          </div>
        </div>
        <div class="lg:px-2 lg:w-1/2">
          <div class="p-4 bg-gray-100 rounded-full">
            <h1 class="ml-2 font-bold uppercase">Order Details</h1>
          </div>
          <div class="p-4">
            <p class="mb-6 italic">Shipping and additionnal costs are calculated based on values you have entered</p>
              <div class="flex justify-between border-b">
                <div class="lg:px-4 lg:py-2 m-2 text-lg lg:text-xl font-bold text-center text-gray-800">
                  Subtotal
                </div>
                <div class="lg:px-4 lg:py-2 m-2 lg:text-lg font-bold text-center text-gray-900">
                  148,827.53€
                </div>
              </div>
                <div class="flex justify-between pt-4 border-b">
                  <div class="flex lg:px-4 lg:py-2 m-2 text-lg lg:text-xl font-bold text-gray-800">
                    <form action="" method="POST">
                      <button type="submit" class="mr-2 mt-1 lg:mt-2">
                        <svg aria-hidden="true" data-prefix="far" data-icon="trash-alt" class="w-4 text-red-600 hover:text-red-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M268 416h24a12 12 0 0012-12V188a12 12 0 00-12-12h-24a12 12 0 00-12 12v216a12 12 0 0012 12zM432 80h-82.41l-34-56.7A48 48 0 00274.41 0H173.59a48 48 0 00-41.16 23.3L98.41 80H16A16 16 0 000 96v16a16 16 0 0016 16h16v336a48 48 0 0048 48h288a48 48 0 0048-48V128h16a16 16 0 0016-16V96a16 16 0 00-16-16zM171.84 50.91A6 6 0 01177 48h94a6 6 0 015.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0012-12V188a12 12 0 00-12-12h-24a12 12 0 00-12 12v216a12 12 0 0012 12z"/></svg>
                      </button>
                    </form>
                    Coupon "90off"
                  </div>
                  <div class="lg:px-4 lg:py-2 m-2 lg:text-lg font-bold text-center text-green-700">
                    -133,944.77€
                  </div>
                </div>
                <div class="flex justify-between pt-4 border-b">
                  <div class="lg:px-4 lg:py-2 m-2 text-lg lg:text-xl font-bold text-center text-gray-800">
                    New Subtotal
                  </div>
                  <div class="lg:px-4 lg:py-2 m-2 lg:text-lg font-bold text-center text-gray-900">
                    14,882.75€
                  </div>
                </div>
                <div class="flex justify-between pt-4 border-b">
                  <div class="lg:px-4 lg:py-2 m-2 text-lg lg:text-xl font-bold text-center text-gray-800">
                    Tax
                  </div>
                  <div class="lg:px-4 lg:py-2 m-2 lg:text-lg font-bold text-center text-gray-900">
                    2,976.55€
                  </div>
                </div>
                <div class="flex justify-between pt-4 border-b">
                  <div class="lg:px-4 lg:py-2 m-2 text-lg lg:text-xl font-bold text-center text-gray-800">
                    Total
                  </div>
                  <div class="lg:px-4 lg:py-2 m-2 lg:text-lg font-bold text-center text-gray-900">
                    17,859.3€
                  </div>
                </div>
              <a href="#">
                <button class="flex justify-center w-full px-10 py-3 mt-6 font-medium text-white uppercase bg-gray-800 rounded-full shadow item-center hover:bg-gray-700 focus:shadow-outline focus:outline-none">
                  <svg aria-hidden="true" data-prefix="far" data-icon="credit-card" class="w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zM54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6zm467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6zM192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"/></svg>
                  <span class="ml-2 mt-5px">Procceed to checkout</span>
                </button>
              </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

How to make a Shopping Cart with coupon with Tailwind CSS?

Install tailwind css of verion 1.4.6

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.4.6

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to make a Shopping Cart with coupon component

  • flex
  • my-6
  • flex-col
  • w-full
  • p-8
  • text-gray-800
  • bg-white
  • md:w-4/5
  • lg:w-4/5
  • flex-1
  • text-sm
  • lg:text-base
  • h-12
  • hidden
  • md:table-cell
  • text-left
  • lg:text-right
  • pl-5
  • lg:pl-0
  • lg:hidden
  • lg:inline
  • text-right
  • pb-4
  • w-20
  • mb-2
  • md:ml-4
  • text-gray-700
  • md:flex
  • mt-6
  • h-10
  • relative
  • flex-row
  • h-8
  • text-center
  • bg-gray-200
  • hover:text-black
  • focus:text-black
  • md:mt-4
  • md:mt-8
  • pb-6
  • my-4
  • -mx-2
  • lg:flex
  • lg:px-2
  • lg:w-1/2
  • p-4
  • bg-gray-100
  • ml-2
  • mb-4
  • h-13
  • pl-3
  • px-3
  • py-1
  • text-white
  • bg-gray-800
  • md:px-4
  • hover:bg-gray-700
  • w-8
  • h-24
  • p-2
  • mb-6
  • border-b
  • lg:px-4
  • lg:py-2
  • m-2
  • text-lg
  • lg:text-xl
  • lg:text-lg
  • text-gray-900
  • pt-4
  • mr-2
  • mt-1
  • lg:mt-2
  • w-4
  • text-red-600
  • hover:text-red-800
  • text-green-700
  • px-10
  • py-3
  • mt-5px

80 steps to make a Shopping Cart with coupon component with Tailwind CSS

  1. Use flex to create a block-level flex container.

  2. Control the vertical margin of an element to 1.5rem using the my-6 utilities.

  3. Use flex to create a block-level flex container.

  4. Use w-full to set an element to a 100% based width.

  5. Control the padding on all sides of an element to 2rem using the p-8 utilities.

  6. Control the text color of an element to gray-800 using the text-gray-800 utilities.

  7. Control the background color of an element to white using the bg-white utilities.

  8. Use md:w-4/5 to set an element to a fixed width(4/5) at only medium screen sizes.

  9. Use lg:w-4/5 to set an element to a fixed width(4/5) at only large screen sizes.

  10. Use flex to create a block-level flex container.

  11. Control the text color of an element to sm using the text-sm utilities.

  12. Control the text color of an element to base at only large screen sizes using the lg:text-base utilities.

  13. Use h-12 to set an element to a fixed height(3rem).

  14. Use hidden to set an element to display: none and remove it from the page layout.

  15. Use the table utilities to create elements that behave like their respective table elements at only medium screen sizes.

  16. Control the text color of an element to left using the text-left utilities.

  17. Control the text color of an element to right at only large screen sizes using the lg:text-right utilities.

  18. Set the left padding of the element to 1.25rem using the pl-5 utilities class

  19. Set the left padding of the element to 0rem at only large screen sizes using the lg:pl-0 utilities class

  20. Use hidden to set an element to display: none and remove it from the page layout at only large screen sizes.

  21. Use inline utilities to control the flow of text inside the element to wrap normally at only large screen sizes.

  22. Control the text color of an element to right using the text-right utilities.

  23. Control the padding on bottom side of an element to 1rem using the pb-4 utilities.

  24. Use w-20 to set an element to a fixed width(5rem).

  25. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

  26. Control the margin on left side of an element to 1rem at only medium screen sizes using the md:ml-4 utilities.

  27. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  28. Use flex to create a block-level flex container at only medium screen sizes.

  29. Control the margin on top side of an element to 1.5rem using the mt-6 utilities.

  30. Use h-10 to set an element to a fixed height(2.5rem).

  31. Use relative to position an element according to the normal flow of the document.

  32. Use flex to create a block-level flex container.

  33. Use h-8 to set an element to a fixed height(2rem).

  34. Control the text color of an element to center using the text-center utilities.

  35. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

  36. Control the text color of an element to black on hover using the hover:text-black utilities.

  37. Control the text color of an element to black on focus using the focus:text-black utilities.

  38. Control the margin on top side of an element to 1rem at only medium screen sizes using the md:mt-4 utilities.

  39. Control the margin on top side of an element to 2rem at only medium screen sizes using the md:mt-8 utilities.

  40. Control the padding on bottom side of an element to 1.5rem using the pb-6 utilities.

  41. Control the vertical margin of an element to 1rem using the my-4 utilities.

  42. Control the horizontal margin of an element to -0.5rem using the -mx-2 utilities.

  43. Use flex to create a block-level flex container at only large screen sizes.

  44. Control the horizontal padding of an element to 0.5rem at only large screen sizes using the lg:px-2 utilities.

  45. Use lg:w-1/2 to set an element to a fixed width(1/2) at only large screen sizes.

  46. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  47. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  48. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

  49. Control the margin on bottom side of an element to 1rem using the mb-4 utilities.

  50. Use h-13 to set an element to a fixed height(3.25rem).

  51. Set the left padding of the element to 0.75rem using the pl-3 utilities class

  52. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

  53. Control the vertical padding of an element to 0.25rem using the py-1 utilities.

  54. Control the text color of an element to white using the text-white utilities.

  55. Control the background color of an element to gray-800 using the bg-gray-800 utilities.

  56. Control the horizontal padding of an element to 1rem at only medium screen sizes using the md:px-4 utilities.

  57. Control the background color of an element to gray-700 using the hover:bg-gray-700 utilities on hover.

  58. Use w-8 to set an element to a fixed width(2rem).

  59. Use h-24 to set an element to a fixed height(6rem).

  60. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  61. Control the margin on bottom side of an element to 1.5rem using the mb-6 utilities.

  62. Control the border color of an element to b using the border-b utilities.

  63. Control the horizontal padding of an element to 1rem at only large screen sizes using the lg:px-4 utilities.

  64. Control the vertical padding of an element to 0.5rem at only large screen sizes using the lg:py-2 utilities.

  65. Control the margin on all sides of an element to 0.5rem using the m-2 utilities.

  66. Control the text color of an element to lg using the text-lg utilities.

  67. Control the text color of an element to xl at only large screen sizes using the lg:text-xl utilities.

  68. Control the text color of an element to lg at only large screen sizes using the lg:text-lg utilities.

  69. Control the text color of an element to gray-900 using the text-gray-900 utilities.

  70. Control the padding on top side of an element to 1rem using the pt-4 utilities.

  71. Control the margin on right side of an element to 0.5rem using the mr-2 utilities.

  72. Control the margin on top side of an element to 0.25rem using the mt-1 utilities.

  73. Control the margin on top side of an element to 0.5rem at only large screen sizes using the lg:mt-2 utilities.

  74. Use w-4 to set an element to a fixed width(1rem).

  75. Control the text color of an element to red-600 using the text-red-600 utilities.

  76. Control the text color of an element to red-800 on hover using the hover:text-red-800 utilities.

  77. Control the text color of an element to green-700 using the text-green-700 utilities.

  78. Control the horizontal padding of an element to 2.5rem using the px-10 utilities.

  79. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  80. Control the margin on top side of an element to 5px using the mt-5px utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Shopping Cart with coupon components, learn and follow along to implement your own components.