Published on

6 Steps To Make A Create With Tailwind CSS Like A Pro In Under An Hour

Tags
CardsInputsNavigationsPages
Create

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

Create

Why use Tailwind CSS to create a Create ui component?

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

The preview of Create ui component

Free download of the Create's source code

The source code of Create ui component

<div class="flex">
  <div class="flex w-2/5 md:w-1/4 h-screen bg-white">
    <div class="mx-auto py-10">
      <h1 class="text-2xl font-bold mb-10 cursor-pointer text-[#EC5252] duration-150">Asason</h1>
      <ul>
        <li class="flex space-x-2 mt-10 cursor-pointer hover:text-[#EC5252] duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          <span class="font-semibold">Home</span>
        </li>
        <li class="flex space-x-2 mt-10 cursor-pointer hover:text-[#EC5252] duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          <span class="font-semibold">All Courses</span>
        </li>
        <li class="flex space-x-2 mt-10 cursor-pointer hover:text-[#EC5252] duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M12 14l9-5-9-5-9 5 9 5z" />
            <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
          </svg>
          <span class="font-semibold">My Course</span>
        </li>
        <li class="flex space-x-2 mt-10 cursor-pointer hover:text-[#EC5252] duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
          </svg>
          <span class="font-semibold">Profile</span>
        </li>
        <li class="flex space-x-2 mt-10 cursor-pointer hover:text-[#EC5252] duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
          </svg>
          <span class="font-semibold">Setthing</span>
        </li>
        <button class="w-full mt-10 bg-[#EC5252] rounded-full py-1.5 text-white">Learn</button>
      </ul>
    </div>
  </div>
  <main class=" min-h-screen w-full">
    <nav class="flex justify-between px-10 bg-white py-6">
      <div class="flex items-center bg-gray-100 px-4 py-2 rounded-md space-x-3 w-96">
        <input type="text" placeholder="search" class="bg-gray-100 outline-none w-full" />
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 cursor-pointer text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>
      <div class="flex items-center">
        <img class="w-8 rounded-full" src="https://imagez.tmz.com/image/f7/1by1/2021/12/14/f7703994b69d48ca802df55729a2325c_xl.jpg" alt="Elon Musk" />
        <p>Elon Musk</p>
      </div>
    </nav>
    <div class="w-full ">
      <h class="text-2xl font-semibold">All Courses</h1>
      <div class="md:flex mt-4 space-x-4  justify-center">
        <div class="h-96 bg-gradient-to-r from-indigo-600 to-purple-500 flex items-end rounded-md">
          <p class="text-lg text-indigo-50">How to do Basic Jumping and how to landing safely</p>
        </div>
        <div class="h-96 bg-gradient-to-r from-yellow-600 to-red-500 flex items-end rounded-md">
          <p class="text-lg text-indigo-50">How to do Basic Jumping and how to landing safely</p>
        </div>

      </div>
    </div>
  </main>
</div>

How to create a Create with Tailwind CSS?

Install tailwind css of verion 2.2.19

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

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

All the unility class needed to create a Create component

  • flex
  • w-2/5
  • md:w-1/4
  • h-screen
  • bg-white
  • mx-auto
  • py-10
  • text-2xl
  • mb-10
  • text-[#EC5252]
  • mt-10
  • hover:text-[#EC5252]
  • h-6
  • w-6
  • w-full
  • bg-[#EC5252]
  • py-1.5
  • text-white
  • min-h-screen
  • px-10
  • py-6
  • bg-gray-100
  • px-4
  • py-2
  • w-96
  • h-5
  • w-5
  • text-gray-500
  • w-8
  • md:flex
  • mt-4
  • h-96
  • bg-gradient-to-r
  • text-lg
  • text-indigo-50

35 steps to create a Create component with Tailwind CSS

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

  2. Use w-2/5 to set an element to a fixed width(2/5).

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

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

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

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

  7. Control the vertical padding of an element to 2.5rem using the py-10 utilities.

  8. Control the text color of an element to 2xl using the text-2xl utilities.

  9. Control the margin on bottom side of an element to 2.5rem using the mb-10 utilities.

  10. Control the text color of an element to [#EC5252] using the text-[#EC5252] utilities.

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

  12. Control the text color of an element to [#EC5252] on hover using the hover:text-[#EC5252] utilities.

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

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

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

  16. Control the background color of an element to [#EC5252] using the bg-[#EC5252] utilities.

  17. Control the vertical padding of an element to 1.5 using the py-1.5 utilities.

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

  19. Set the minimum width/height of an element using the min-h-screen utilities.

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

  21. Control the vertical padding of an element to 1.5rem using the py-6 utilities.

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

  23. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  24. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

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

  26. Use h-5 to set an element to a fixed height(1.25rem).

  27. Use w-5 to set an element to a fixed width(1.25rem).

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

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

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

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

  32. Use h-96 to set an element to a fixed height(24rem).

  33. Control the background color of an element to gradient-to-r using the bg-gradient-to-r utilities.

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

  35. Control the text color of an element to indigo-50 using the text-indigo-50 utilities.

Conclusion

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