Published on

How To Make A Powerpoint With Tailwind CSS In 6 Easy Steps?

Tags
Pages
Powerpoint

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 Powerpoint ui component

Simplified powerpoint's ui

Why use Tailwind CSS to build a Powerpoint ui component?

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

The preview of Powerpoint ui component

Free download of the Powerpoint's source code

The source code of Powerpoint ui component

<div
      class="flex items-center justify-center h-screen antialiased bg-gray-100"
    >
      <div class="w-11/12 max-w-4xl border border-gray-300 shadow-lg lg:w-1/2">
        <div class="flex flex-col bg-yellow-600">
          <div
            class="flex flex-row items-center justify-between p-5 text-yellow-100"
          >
            <p class="hidden mr-3 font-medium sm:flex">
              Auto-save
            </p>
            <svg
              class="hidden w-6 h-6 mr-3 sm:flex"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M17 16v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-7a2 2 0 012-2h2m3-4H9a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-1m-1 4l-3 3m0 0l-3-3m3 3V3"
              ></path>
            </svg>
            <svg
              class="hidden w-6 h-6 mr-3 sm:flex"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"
              ></path>
            </svg>
            <svg
              class="hidden w-6 h-6 mr-3 sm:flex"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
              ></path>
            </svg>
            <svg
              class="hidden w-6 h-6 mr-3 sm:flex"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
              ></path>
            </svg>
            <p
              class="flex-grow font-medium text-left text-yellow-100 sm:text-center"
            >
              My PowerPoint presentation
            </p>
            <svg
              class="w-6 h-6 mr-3"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M20 12H4"
              ></path>
            </svg>
            <svg
              class="w-6 h-6 mr-3"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
              ></path>
            </svg>
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              ></path>
            </svg>
          </div>
          <div class="flex flex-row items-center font-medium">
            <div
              class="px-6 py-3 text-yellow-100 transition duration-200 cursor-pointer hover:bg-yellow-700"
            >
              File
            </div>
            <div class="px-6 py-3 text-yellow-600 bg-gray-100">Home</div>
            <div
              class="px-6 py-3 text-yellow-100 transition duration-200 cursor-pointer hover:bg-yellow-700"
            >
              Insert
            </div>
            <div
              class="px-6 py-3 text-yellow-100 transition duration-200 cursor-pointer hover:bg-yellow-700"
            >
              Design
            </div>
            <div
              class="px-6 py-3 text-yellow-100 transition duration-200 cursor-pointer hover:bg-yellow-700"
            >
              Transitions
            </div>
            <div
              class="px-6 py-3 text-yellow-100 transition duration-200 cursor-pointer hover:bg-yellow-700"
            >
              Animation
            </div>
          </div>
          <div class="flex flex-row bg-gray-200">
            <div
              class="flex-col hidden p-5 space-y-5 border-r border-gray-300 sm:flex"
            >
              <div
                class="w-48 h-24 transition duration-200 transform scale-100 bg-white border border-gray-300 shadow-sm scale hover:scale-95"
              ></div>
              <div
                class="w-48 h-24 transition duration-200 transform scale-100 bg-white border border-gray-300 shadow-sm scale hover:scale-95"
              ></div>
              <div
                class="w-48 h-24 transition duration-200 transform scale-100 bg-white border border-gray-300 shadow-sm scale hover:scale-95"
              ></div>
              <div
                class="w-48 h-24 transition duration-200 transform scale-100 bg-white border border-gray-300 shadow-sm scale hover:scale-95"
              ></div>
              <div
                class="w-48 h-24 transition duration-200 transform scale-100 bg-white border border-gray-300 shadow-sm scale hover:scale-95"
              ></div>
            </div>
            <div class="flex flex-col w-full">
              <div
                class="flex items-center justify-center flex-grow p-5 mx-auto xl:p-10"
              >
                <div
                  class="h-48 mx-auto transition duration-200 transform scale-100 bg-white border border-gray-300 shadow-sm w-96 scale hover:scale-95"
                ></div>
              </div>
              <div
                class="p-5 text-gray-600 border-t border-gray-300 cursor-pointer hover:text-gray-800"
              >
                <p>Click to add notes</p>
              </div>
            </div>
          </div>
          <div
            class="flex flex-row items-center justify-between p-5 text-sm text-gray-500 bg-white border-t border-gray-300"
          >
            <div class="inline-flex items-center">
              <p class="mr-4">Slide 1 of 16</p>
              <button class="transition duration-200 hover:bg-gray-100 p-2 rounded-lg">
                <svg
                  class="w-6 h-6 text-gray-500"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                  ></path>
                </svg>
              </button>
            </div>
            <button class="transition duration-200 hover:bg-gray-100 p-2 rounded-lg">
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
              ></path>
            </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

How to build a Powerpoint with Tailwind CSS?

Install tailwind css of verion 2.0.3

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

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

All the unility class needed to build a Powerpoint component

  • flex
  • h-screen
  • bg-gray-100
  • w-11/12
  • max-w-4xl
  • border-gray-300
  • lg:w-1/2
  • flex-col
  • bg-yellow-600
  • flex-row
  • p-5
  • text-yellow-100
  • hidden
  • mr-3
  • sm:flex
  • w-6
  • h-6
  • flex-grow
  • text-left
  • sm:text-center
  • px-6
  • py-3
  • hover:bg-yellow-700
  • text-yellow-600
  • bg-gray-200
  • border-r
  • w-48
  • h-24
  • bg-white
  • w-full
  • mx-auto
  • xl:p-10
  • h-48
  • w-96
  • text-gray-600
  • border-t
  • hover:text-gray-800
  • text-sm
  • text-gray-500
  • inline-flex
  • mr-4
  • hover:bg-gray-100
  • p-2

43 steps to build a Powerpoint component with Tailwind CSS

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

  2. Use h-screen to make an element span the entire height of the viewport.

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

  4. Use w-11/12 to set an element to a fixed width(11/12).

  5. Set the maximum width/height of an element using the max-w-4xl utilities.

  6. Control the border color of an element to gray-300 using the border-gray-300 utilities.

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

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

  9. Control the background color of an element to yellow-600 using the bg-yellow-600 utilities.

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

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

  12. Control the text color of an element to yellow-100 using the text-yellow-100 utilities.

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

  14. Control the margin on right side of an element to 0.75rem using the mr-3 utilities.

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

  16. Use w-6 to set an element to a fixed width(1.5rem).

  17. Use h-6 to set an element to a fixed height(1.5rem).

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

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

  20. Control the text color of an element to center at only small screen sizes using the sm:text-center utilities.

  21. Control the horizontal padding of an element to 1.5rem using the px-6 utilities.

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

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

  24. Control the text color of an element to yellow-600 using the text-yellow-600 utilities.

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

  26. Control the border color of an element to r using the border-r utilities.

  27. Use w-48 to set an element to a fixed width(12rem).

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

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

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

  31. Control the horizontal margin of an element to auto using the mx-auto utilities.

  32. Control the padding on all sides of an element to 2.5rem at only extremely large screen sizes using the xl:p-10 utilities.

  33. Use h-48 to set an element to a fixed height(12rem).

  34. Use w-96 to set an element to a fixed width(24rem).

  35. Control the text color of an element to gray-600 using the text-gray-600 utilities.

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

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

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

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

  40. Use inline-flex to create an inline flex container that flows with text.

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

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

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

Conclusion

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