Published on

How To Create A Minimal Portfolio With Tailwind CSS In 6 Easy Steps?

Tags
NavigationsPages
Minimal Portfolio

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 Minimal Portfolio ui component

Portfolio resume page

Why use Tailwind CSS to build a Minimal Portfolio ui component?

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

The preview of Minimal Portfolio ui component

Free download of the Minimal Portfolio's source code

The source code of Minimal Portfolio ui component

<div class="relative text-gray-800 bg-gray-50">
<!-- Navbar -->
    <header>
        <nav class="w-full">
            <div class="flex justify-between w-full px-16 py-8">
                <!-- Left Nav -->
                <div>
                    <ul
                        class="flex flex-col text-left md:flex-row space-y-5 md:space-y-0 md:space-x-6 text-xl md:text-2xl">
                        <li class="text-left">
                            <a href="#experience">
                                Experience
                            </a>

                        </li>
                        <li class="text-left">
                            <a href="#contact">
                                Contact
                            </a>

                        </li>
                    </ul>
                </div>
                <!-- Right Nav -->
                <div>
                    <!-- Socials -->
                    <ul class="flex flex-col md:flex-row items-end md:items-center md:space-x-4 space-y-4 md:space-y-0">
                        <li>
                            <a href="https://www.github.com" target="_blank" aria-label="Github"
                                class="hover:text-blue-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-9 h-9" fill="currentColor"
                                    class="bi bi-github" viewBox="0 0 16 16">
                                    <path
                                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
                                </svg>
                            </a>
                        </li>

                        <li>
                            <a href="https://www.linkedin.com" target="_blank" aria-label="linkedin"
                                class="hover:text-blue-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 rounded-full" fill="currentColor"
                                    class="bi bi-linkedin" viewBox="0 0 16 16">
                                    <path
                                        d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <!-- / Navbar -->
    <!-- Name section -->
    <section class="flex flex-col items-center justify-center h-screen  -my-20 md:-mt-48 px-8">
        <!-- style="height: 50vh" -->
        <div class="flex flex-col items-center justify-center text-center h-screen-half">
            <!-- image -->
            <img class="md:hidden object-cover w-15 h-40 rounded-full mb-5 ring-2 ring-gray-500/50 ring-offset-[10px]"
                src="https://i.ibb.co/Byd813Q/mateus-campos-felipe-Zxd-JFg-SGQBA-unsplash.jpg" alt="Your Name Here">
            <h1 class="text-5xl sm:text-6xl lg:text-9xl">Jane Doe</h1>
            <h2 class="font-light text-4xl sm:text-5xl lg:text-8xl">Business Manager</h2>
        </div>
    </section>
    <!-- /Name Section -->
    <!-- image section -->
    <section class="flex items-center justify-between px-8 mb-20 tracking-wider">
        <!-- Summary (left) -->
        <div class="flex flex-col w-full md:w-1/3 space-y-12 text-center md:text-left">
            <div class="flex flex-col px-10 md:px-20">
                <h3 class="text-xl font-bold">Skills</h3>
                <br>
                <span class="text-lg">Management</span>
                <span class="text-lg">Collaboration</span>
                <span class="text-lg">Communication</span>
                <span class="text-lg">Microsoft Office</span>
            </div>
            <div class="px-10 md:px-20">
                <h3 class="text-xl font-bold">Summary</h3>
                <br>
                <p class="w-full md:w-2/3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius eaque delectus
                    consequuntur harum doloremque assumenda omnis quibusdam quia neque, adipisci iste laborum sed
                    nostrum.</p>
            </div>
            <div class="px-10 md:px-20">
                <br>
                <h3 class="text-xl font-bold">Contact</h3>
                <a class="text-xl hover:text-blue-600" href="mailto:[email protected]">[email protected]</a>
                <p>675 234 4323</p>
            </div>
        </div>
        <!-- image -->
        <img class="hidden md:block object-cover w-1/4 h-screen rounded-full ring-2 ring-gray-500/50 ring-offset-[30px]"
            src="https://i.ibb.co/Byd813Q/mateus-campos-felipe-Zxd-JFg-SGQBA-unsplash.jpg" alt="Your Name Here">
        <!-- statistics (right) -->
        <div class="hidden md:flex flex-col w-1/3 space-y-12 text-right">
            <div class="px-20">
                <h4 class="text-xl font-bold">Experience</h4>
                <br>
                <p class="text-6xl">+2</p>
            </div>
            <div class="px-20">
                <h4 class="text-xl font-bold">Projects</h4>
                <br>
                <p class="text-6xl">+25</p>
            </div>
            <div class="px-20">
                <h4 class="text-xl font-bold">Clients</h4>
                <br>
                <p class="text-6xl">+14</p>
            </div>
        </div>
    </section>
    <!-- /image section -->
    <hr class="border-gray-400 mx-44" />
    <!-- Resume -->
    <section class="px-20 mt-10">
        <h4 class="mb-8 text-3xl font-bold text-center md:text-left">Experience</h4>
        <div class="grid grid-cols-1 md:grid-cols-6 my-10">
            <div class="flex flex-col col-span-2 mb-4 md:mb-0">
                <h5 class="text-xl md:text-2xl font-bold">Full Stack Developer</h5>
                <h6 class="text-lg font-bold">Facebook</h6>
                <p>Jan 2015 - present</p>
            </div>
            <div class="flex flex-col col-span-4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid eveniet deleniti tempore veritatis
                    adipisci accusantium voluptatibus vel aperiam ex alias officiis deserunt, ad, iste id cum minus sit
                    laudantium ullam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi non incidunt
                    voluptates molestiae delectus nulla quisquam aperiam voluptas tempora distinctio! Ipsa cupiditate
                    harum voluptates praesentium. Suscipit itaque officiis odio ut!</p>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-6 my-10">
            <div class="flex flex-col col-span-2 mb-4 md:mb-0">
                <h5 class="text-xl md:text-2xl  font-bold">Software Developer</h5>
                <h6 class="text-lg font-bold">Google</h6>
                <p>Feb 2010 - Jan 2015</p>
            </div>
            <div class="flex flex-col col-span-4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid eveniet deleniti tempore veritatis
                    adipisci accusantium voluptatibus vel aperiam ex alias officiis deserunt, ad, iste id cum minus sit
                    laudantium ullam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi non incidunt
                    voluptates molestiae delectus nulla quisquam aperiam voluptas tempora distinctio! Ipsa cupiditate
                    harum voluptates praesentium. Suscipit itaque officiis odio ut!</p>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-6 my-10">
            <div class="flex flex-col col-span-2 mb-4 md:mb-0">
                <h5 class="text-xl md:text-2xl  font-bold">Web Developer</h5>
                <h6 class="text-lg font-bold">IBM</h6>
                <p>Apr 2008 - Feb 2010</p>
            </div>
            <div class="flex flex-col col-span-4">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid eveniet deleniti tempore veritatis
                    adipisci accusantium voluptatibus vel aperiam ex alias officiis deserunt, ad, iste id cum minus sit
                    laudantium ullam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi non incidunt
                    voluptates molestiae delectus nulla quisquam aperiam voluptas tempora distinctio! Ipsa cupiditate
                    harum voluptates praesentium. Suscipit itaque officiis odio ut!</p>
            </div>
        </div>
    </section>
    <hr class="border-gray-400 mx-44" />
    <!-- Resume -->
    <section class="px-20 mt-10">
        <h4 class="mb-8 text-3xl font-bold text-center md:text-left">Education</h4>
        <div class="grid grid-cols-1 md:grid-cols-6 my-10">
            <div class="flex flex-col col-span-2 mb-4 md:mb-0">
                <h5 class="text-xl md:text-2xl  font-bold">B.S. Computer Science</h5>
                <h6 class="text-lg font-bold">Harward University</h6>
                <p>Jan 2015 - present</p>
            </div>
            <div class="flex flex-col col-span-4 ">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid eveniet deleniti tempore veritatis
                    adipisci accusantium voluptatibus vel aperiam ex alias officiis deserunt, ad, iste id cum minus sit
                    laudantium ullam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi non incidunt
                    voluptates molestiae delectus nulla quisquam aperiam voluptas tempora distinctio! Ipsa cupiditate
                    harum voluptates praesentium. Suscipit itaque officiis odio ut!</p>
            </div>
        </div>
    </section>
    <footer class="absolute w-full h-36 bottom-0 p-8 px-16 bg-gray-800 text-gray-50">
        <p class="text-2xl">Thank you for checking out my portfolio</p>
        <a class="text-lg" href="mailto:[email protected]">[email protected]</a>
    </footer>
    <div class="h-80">
    </div>
    </div>

How to build a Minimal Portfolio with Tailwind CSS?

Install tailwind css of verion 3.0.18

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

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

All the unility class needed to build a Minimal Portfolio component

  • relative
  • text-gray-800
  • bg-gray-50
  • w-full
  • flex
  • px-16
  • py-8
  • flex-col
  • text-left
  • md:flex-row
  • text-xl
  • md:text-2xl
  • hover:text-blue-600
  • w-9
  • h-9
  • h-screen
  • -my-20
  • md:-mt-48
  • px-8
  • text-center
  • h-screen-half
  • md:hidden
  • w-15
  • h-40
  • mb-5
  • text-5xl
  • sm:text-6xl
  • lg:text-9xl
  • text-4xl
  • sm:text-5xl
  • lg:text-8xl
  • mb-20
  • md:w-1/3
  • md:text-left
  • px-10
  • md:px-20
  • text-lg
  • md:w-2/3
  • hidden
  • md:block
  • w-1/4
  • md:flex
  • w-1/3
  • text-right
  • px-20
  • text-6xl
  • border-gray-400
  • mx-44
  • mt-10
  • mb-8
  • text-3xl
  • grid
  • grid-cols-1
  • md:grid-cols-6
  • my-10
  • mb-4
  • md:mb-0
  • absolute
  • h-36
  • bottom-0
  • p-8
  • bg-gray-800
  • text-gray-50
  • text-2xl
  • h-80

65 steps to build a Minimal Portfolio component with Tailwind CSS

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

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

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

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

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

  6. Control the horizontal padding of an element to 4rem using the px-16 utilities.

  7. Control the vertical padding of an element to 2rem using the py-8 utilities.

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

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

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

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

  12. Control the text color of an element to 2xl at only medium screen sizes using the md:text-2xl utilities.

  13. Control the text color of an element to blue-600 on hover using the hover:text-blue-600 utilities.

  14. Use w-9 to set an element to a fixed width(2.25rem).

  15. Use h-9 to set an element to a fixed height(2.25rem).

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

  17. Control the vertical margin of an element to -5rem using the -my-20 utilities.

  18. Control the margin on top side of an element to -12rem at only medium screen sizes using the md:-mt-48 utilities.

  19. Control the horizontal padding of an element to 2rem using the px-8 utilities.

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

  21. Use h-screen-half to set an element to a fixed height(screen-half).

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

  23. Use w-15 to set an element to a fixed width(3.75rem).

  24. Use h-40 to set an element to a fixed height(10rem).

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

  26. Control the text color of an element to 5xl using the text-5xl utilities.

  27. Control the text color of an element to 6xl at only small screen sizes using the sm:text-6xl utilities.

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

  29. Control the text color of an element to 4xl using the text-4xl utilities.

  30. Control the text color of an element to 5xl at only small screen sizes using the sm:text-5xl utilities.

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

  32. Control the margin on bottom side of an element to 5rem using the mb-20 utilities.

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

  34. Control the text color of an element to left at only medium screen sizes using the md:text-left utilities.

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

  36. Control the horizontal padding of an element to 5rem at only medium screen sizes using the md:px-20 utilities.

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

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

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

  40. Use inline utilities to put the element on its own line and fill its parent at only medium screen sizes.

  41. Use w-1/4 to set an element to a fixed width(1/4).

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

  43. Use w-1/3 to set an element to a fixed width(1/3).

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

  45. Control the horizontal padding of an element to 5rem using the px-20 utilities.

  46. Control the text color of an element to 6xl using the text-6xl utilities.

  47. Control the border color of an element to gray-400 using the border-gray-400 utilities.

  48. Control the horizontal margin of an element to 11rem using the mx-44 utilities.

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

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

  51. Control the text color of an element to 3xl using the text-3xl utilities.

  52. Use grid to create a grid container.

  53. Use grid to create a grid container.

  54. Use grid to create a grid container at only medium screen sizes.

  55. Control the vertical margin of an element to 2.5rem using the my-10 utilities.

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

  57. Control the margin on bottom side of an element to 0rem at only medium screen sizes using the md:mb-0 utilities.

  58. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  59. Use h-36 to set an element to a fixed height(9rem).

  60. Use the bottom-0 utilities to set the bottom position of a positioned element to 0rem.

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

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

  63. Control the text color of an element to gray-50 using the text-gray-50 utilities.

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

  65. Use h-80 to set an element to a fixed height(20rem).

Conclusion

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