Published on

Beginners Guide: Make A Flight Card With Tailwind CSS

Tags
CardsWidget
Flight Card

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 Flight Card ui component

Card flight for listing

Why use Tailwind CSS to build a Flight Card ui component?

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

The preview of Flight Card ui component

Free download of the Flight Card's source code

The source code of Flight Card ui component

<div class="p-10">
  <div class="max-w-full  bg-white flex flex-col rounded overflow-hidden shadow-lg">
    <div class="flex flex-row items-baseline flex-nowrap bg-gray-100 p-2">
      <svg viewBox="0 0 64 64" data-testid="tripDetails-bound-plane-icon" pointer-events="all" aria-hidden="true" class="mt-2 mr-1" role="presentation" style="fill: rgb(102, 102, 102); height: 0.9rem; width: 0.9rem;">
        <path d="M43.389 38.269L29.222 61.34a1.152 1.152 0 01-1.064.615H20.99a1.219 1.219 0 01-1.007-.5 1.324 1.324 0 01-.2-1.149L26.2 38.27H11.7l-3.947 6.919a1.209 1.209 0 01-1.092.644H1.285a1.234 1.234 0 01-.895-.392l-.057-.056a1.427 1.427 0 01-.308-1.036L1.789 32 .025 19.656a1.182 1.182 0 01.281-1.009 1.356 1.356 0 01.951-.448l5.4-.027a1.227 1.227 0 01.9.391.85.85 0 01.2.252L11.7 25.73h14.5L19.792 3.7a1.324 1.324 0 01.2-1.149A1.219 1.219 0 0121 2.045h7.168a1.152 1.152 0 011.064.615l14.162 23.071h8.959a17.287 17.287 0 017.839 1.791Q63.777 29.315 64 32q-.224 2.685-3.807 4.478a17.282 17.282 0 01-7.84 1.793h-9.016z"></path>
      </svg>
      <h1 class="ml-2 uppercase font-bold text-gray-500">departure</h1>
      <p class="ml-2 font-normal text-gray-500">Wednesday 18 Aug</p>
    </div>
    <div class="mt-2 flex justify-start bg-white p-2">
      <div class="flex mx-2 ml-6 h8 px-2 flex-row items-baseline rounded-full bg-gray-100 p-1">
        <svg viewBox="0 0 64 64" pointer-events="all" aria-hidden="true" class="etiIcon css-jbc4oa" role="presentation" style="fill: rgb(102, 102, 102); height: 12px; width: 12px;">
          <path d="M43.389 38.269L29.222 61.34a1.152 1.152 0 01-1.064.615H20.99a1.219 1.219 0 01-1.007-.5 1.324 1.324 0 01-.2-1.149L26.2 38.27H11.7l-3.947 6.919a1.209 1.209 0 01-1.092.644H1.285a1.234 1.234 0 01-.895-.392l-.057-.056a1.427 1.427 0 01-.308-1.036L1.789 32 .025 19.656a1.182 1.182 0 01.281-1.009 1.356 1.356 0 01.951-.448l5.4-.027a1.227 1.227 0 01.9.391.85.85 0 01.2.252L11.7 25.73h14.5L19.792 3.7a1.324 1.324 0 01.2-1.149A1.219 1.219 0 0121 2.045h7.168a1.152 1.152 0 011.064.615l14.162 23.071h8.959a17.287 17.287 0 017.839 1.791Q63.777 29.315 64 32q-.224 2.685-3.807 4.478a17.282 17.282 0 01-7.84 1.793h-9.016z"></path>
        </svg>
        <p class="font-normal text-sm ml-1 text-gray-500">Economy</p>
      </div>
    </div>
    <div class="mt-2 flex sm:flex-row mx-6 sm:justify-between flex-wrap ">
      <div class="flex flex-row place-items-center p-2">
        <img alt="Qatar Airways" class="w-10 h-10" src="data:image/png;base64,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" style="opacity: 1; transform-origin: 0% 50% 0px; transform: none;" />
        <div class="flex flex-col ml-2">
          <p class="text-xs text-gray-500 font-bold">Qatar Airways</p>
          <p class="text-xs text-gray-500">QR1456</p>
          <div class="text-xs text-gray-500">2*23kg</div>
        </div>
      </div>

      <div class="flex flex-col p-2">
        <p class="font-bold">18:25</p>
        <p class="text-gray-500"><span class="font-bold">HRE</span> Harare</p>
        <p class="text-gray-500">Zimbabwe</p>
      </div>
      <div class="flex flex-col flex-wrap p-2">
        <p class="font-bold">19:25</p>
        <p class="text-gray-500"><span class="font-bold">LUN</span> Lusaka</p>
        <p class="text-gray-500">Zambia</p>
      </div>
    </div>
    <div class="mt-4 bg-gray-100 flex flex-row flex-wrap md:flex-nowrap justify-between items-baseline">
      <div class="flex mx-6 py-4 flex-row flex-wrap">
        <svg class="w-12 h-10 p-2 mx-2 self-center bg-gray-400 rounded-full fill-current text-white" viewBox="0 0 64 64" pointer-events="all" aria-hidden="true" role="presentation"><path d="M43.389 38.269L29.222 61.34a1.152 1.152 0 01-1.064.615H20.99a1.219 1.219 0 01-1.007-.5 1.324 1.324 0 01-.2-1.149L26.2 38.27H11.7l-3.947 6.919a1.209 1.209 0 01-1.092.644H1.285a1.234 1.234 0 01-.895-.392l-.057-.056a1.427 1.427 0 01-.308-1.036L1.789 32 .025 19.656a1.182 1.182 0 01.281-1.009 1.356 1.356 0 01.951-.448l5.4-.027a1.227 1.227 0 01.9.391.85.85 0 01.2.252L11.7 25.73h14.5L19.792 3.7a1.324 1.324 0 01.2-1.149A1.219 1.219 0 0121 2.045h7.168a1.152 1.152 0 011.064.615l14.162 23.071h8.959a17.287 17.287 0 017.839 1.791Q63.777 29.315 64 32q-.224 2.685-3.807 4.478a17.282 17.282 0 01-7.84 1.793h-9.016z"></path></svg>
        <div class="text-sm mx-2 flex flex-col">
          <p class="">Standard Ticket</p>
          <p class="font-bold">$404.73</p>
          <p class="text-xs text-gray-500">Price per adult</p>
        </div>
        <button class="w-32 h-11 rounded flex border-solid border bg-white mx-2 justify-center place-items-center"><div class="">Book</div></button>
      </div>
      <div class="md:border-l-2 mx-6 md:border-dotted flex flex-row py-4 mr-6 flex-wrap">
        <svg class="w-12 h-10 p-2 mx-2 self-center bg-green-800 rounded-full fill-current text-white" viewBox="0 0 64 64" pointer-events="all" aria-hidden="true" class="etiIcon css-ecvhkc" role="presentation" style="fill: rgb(255, 255, 255);"><path d="M62.917 38.962C59.376 53.71 47.207 64 31.833 64a31.93 31.93 0 01-21.915-8.832l-5.376 5.376a2.65 2.65 0 01-1.874.789A2.685 2.685 0 010 58.668V40a2.687 2.687 0 012.667-2.667h18.666A2.687 2.687 0 0124 40a2.645 2.645 0 01-.793 1.877L17.5 47.58a21.244 21.244 0 0032.665-4.414 33.706 33.706 0 002.208-4.873 1.292 1.292 0 011.25-.96h8a1.342 1.342 0 011.333 1.337.738.738 0 01-.041.293M64 24a2.687 2.687 0 01-2.667 2.668H42.667A2.687 2.687 0 0140 24a2.654 2.654 0 01.793-1.877l5.749-5.746a21.336 21.336 0 00-32.706 4.457 33.224 33.224 0 00-2.208 4.873 1.293 1.293 0 01-1.25.96H2.085A1.342 1.342 0 01.752 25.33v-.293C4.334 10.247 16.626 0 32 0a32.355 32.355 0 0122.041 8.832l5.419-5.376a2.644 2.644 0 011.872-.789A2.685 2.685 0 0164 5.333z"></path></svg>
        <div class="text-sm mx-2 flex flex-col">
          <p>Flexible Ticket</p>
          <p class="font-bold">$605.43</p>
          <p class="text-xs text-gray-500">Price per adult</p>
        </div>
        <button class="w-32 h-11 rounded flex border-solid border text-white bg-green-800 mx-2 justify-center place-items-center"><div class="">Book</div></button>
      </div>
    </div>
  </div>
</div>

How to build a Flight Card with Tailwind CSS?

Install tailwind css of verion 2.2.4

Use the script html tag to import the script of Tailwind CSS of the version 2.2.4

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to build a Flight Card component

  • p-10
  • max-w-full
  • bg-white
  • flex
  • flex-col
  • overflow-hidden
  • flex-row
  • flex-nowrap
  • bg-gray-100
  • p-2
  • mt-2
  • mr-1
  • ml-2
  • text-gray-500
  • justify-start
  • mx-2
  • ml-6
  • px-2
  • p-1
  • text-sm
  • ml-1
  • sm:flex-row
  • mx-6
  • flex-wrap
  • w-10
  • h-10
  • text-xs
  • mt-4
  • md:flex-nowrap
  • py-4
  • w-12
  • bg-gray-400
  • text-white
  • w-32
  • h-11
  • border-solid
  • md:border-l-2
  • md:border-dotted
  • mr-6
  • bg-green-800

40 steps to build a Flight Card component with Tailwind CSS

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

  2. Set the maximum width/height of an element using the max-w-full utilities.

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

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

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

  6. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

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

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

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

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

  11. Control the margin on top side of an element to 0.5rem using the mt-2 utilities.

  12. Control the margin on right side of an element to 0.25rem using the mr-1 utilities.

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

  14. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  15. Use justify-start to justify items against the start of the container’s main axis.

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

  17. Control the margin on left side of an element to 1.5rem using the ml-6 utilities.

  18. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

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

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

  21. Control the margin on left side of an element to 0.25rem using the ml-1 utilities.

  22. Use flex to create a block-level flex container at only small screen sizes.

  23. Control the horizontal margin of an element to 1.5rem using the mx-6 utilities.

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

  25. Use w-10 to set an element to a fixed width(2.5rem).

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

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

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

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

  30. Control the vertical padding of an element to 1rem using the py-4 utilities.

  31. Use w-12 to set an element to a fixed width(3rem).

  32. Control the background color of an element to gray-400 using the bg-gray-400 utilities.

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

  34. Use w-32 to set an element to a fixed width(8rem).

  35. Use h-11 to set an element to a fixed height(2.75rem).

  36. Control the border color of an element to solid using the border-solid utilities.

  37. Control the border color of an element to l-2 using the md:border-l-2 utilities at only medium screen sizes.

  38. Control the border color of an element to dotted using the md:border-dotted utilities at only medium screen sizes.

  39. Control the margin on right side of an element to 1.5rem using the mr-6 utilities.

  40. Control the background color of an element to green-800 using the bg-green-800 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to build a Flight Card components, learn and follow along to implement your own components.