Published on

How To Build A Profile Card With Tailwind CSS From Scratch

Tags
Cards
Profile 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 Profile Card ui component

Simple profile card with floating image

Why use Tailwind CSS to create a Profile Card ui component?

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

The preview of Profile Card ui component

Free download of the Profile Card's source code

The source code of Profile Card ui component

<!-- This is an example component -->
<div class="w-full h-screen flex items-center justify-center bg-gray-200">
    <div class="relative w-96 h-auto bg-gray-400 rounded-md pt-24 pb-8 px-4 shadow-md hover:shadow-lg transition flex flex-col items-center">
        <div class="absolute rounded-full bg-gray-100 w-28 h-28 p-2 z-10 -top-8 shadow-lg hover:shadow-xl transition">
            <div class="rounded-full bg-black w-full h-full overflow-auto">
                <img src="https://rairaksa.github.io/assets/img/rai.jpg">
            </div>
        </div>
        <label class="font-bold text-gray-100 text-lg">
            Rai Raksa Muhamad
        </label>
        <p class="text-center text-gray-200 mt-2 leading-relaxed">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        </p>
        <ul class="flex flex-row gap-2 mt-4">
                <!-- instagram -->
                <a href="https://instagram.com/raydeon" target="_blank">
                    <svg class="h-10 w-10 text-gray-300 hover:text-gray-100 transition" fill="currentColor" style="enable-background:new 0 0 56.7 56.7;" version="1.1" viewBox="0 0 56.7 56.7" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g>
                            <circle cx="28.1" cy="30" r="4.4"></circle>
                            <path d="M33.6,19.2h-11c-1.6,0-3,0.5-3.9,1.4c-0.9,0.9-1.4,2.3-1.4,3.9v11c0,1.6,0.5,3,1.5,4c1,0.9,2.3,1.4,3.9,1.4h10.9   c1.6,0,3-0.5,3.9-1.4c1-0.9,1.5-2.3,1.5-3.9v-11c0-1.6-0.5-2.9-1.4-3.9C36.6,19.7,35.3,19.2,33.6,19.2z M28.1,36.8   c-3.8,0-6.8-3.1-6.8-6.8c0-3.8,3.1-6.8,6.8-6.8S35,26.2,35,30C35,33.8,31.9,36.8,28.1,36.8z M35.2,24.5c-0.9,0-1.6-0.7-1.6-1.6   s0.7-1.6,1.6-1.6s1.6,0.7,1.6,1.6S36.1,24.5,35.2,24.5z"></path>
                            <path d="M28.3,5.2c-13.6,0-24.6,11-24.6,24.6c0,13.6,11,24.6,24.6,24.6c13.6,0,24.6-11,24.6-24.6C53,16.2,41.9,5.2,28.3,5.2z    M41.4,35.6c0,2.3-0.8,4.3-2.2,5.7c-1.4,1.4-3.4,2.1-5.6,2.1H22.7c-2.2,0-4.2-0.7-5.6-2.1c-1.5-1.4-2.2-3.4-2.2-5.7v-11   c0-4.6,3.1-7.8,7.8-7.8h11c2.3,0,4.2,0.8,5.6,2.2c1.4,1.4,2.1,3.3,2.1,5.6V35.6z"></path>
                        </g>
                    </svg>
                </a>
                <!-- linkedin -->
                <a href="https://www.linkedin.com/in/rairaksa" target="_blank">
                    <svg class="h-10 w-10 text-gray-300 hover:text-gray-100 transition" fill="currentColor" style="enable-background:new 0 0 56.7 56.7;" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g>
                            <path d="M28.347,5.155c-13.6,0-24.625,11.025-24.625,24.625c0,13.602,11.025,24.625,24.625,24.625   c13.598,0,24.623-11.023,24.623-24.625C52.97,16.181,41.944,5.155,28.347,5.155z M42.062,41.741c0,1.096-0.91,1.982-2.031,1.982   H16.613c-1.123,0-2.031-0.887-2.031-1.982V18.052c0-1.094,0.908-1.982,2.031-1.982H40.03c1.121,0,2.031,0.889,2.031,1.982V41.741z"></path>
                            <path d="M33.099,26.441c-2.201,0-3.188,1.209-3.74,2.061v0.041h-0.027c0.01-0.012,0.02-0.027,0.027-0.041v-1.768h-4.15   c0.055,1.17,0,12.484,0,12.484h4.15v-6.973c0-0.375,0.027-0.744,0.137-1.012c0.301-0.744,0.984-1.52,2.129-1.52   c1.504,0,2.104,1.146,2.104,2.824v6.68h4.15V32.06C37.878,28.224,35.829,26.441,33.099,26.441z"></path>
                            <path d="M20.864,20.712c-1.419,0-2.349,0.934-2.349,2.159c0,1.197,0.9,2.158,2.294,2.158h0.027c1.447,0,2.348-0.961,2.348-2.158   C23.157,21.646,22.284,20.712,20.864,20.712z"></path>
                            <rect height="12.484" width="4.151" x="18.762" y="26.734"></rect>
                        </g>
                    </svg>
                </a>
                <!-- github -->
                <a href="https://github.com/rairaksa" target="_blank">
                    <svg class="h-10 w-10 text-gray-300 hover:text-gray-100 transition" fill="currentColor" style="enable-background:new 0 0 56.7 56.7;" version="1.1" viewBox="-1163 1657.697 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g>
                            <path clip-rule="evenodd" d="M-1134.6598,1662.9163c-13.601,0-24.63,11.0267-24.63,24.6299   c0,10.8821,7.0573,20.1144,16.8435,23.3713c1.2308,0.2279,1.6829-0.5345,1.6829-1.1849c0-0.587-0.0227-2.5276-0.0334-4.5857   c-6.8521,1.4901-8.2979-2.906-8.2979-2.906c-1.1205-2.8467-2.7347-3.6039-2.7347-3.6039   c-2.2349-1.5287,0.1685-1.4972,0.1685-1.4972c2.473,0.1737,3.7755,2.5385,3.7755,2.5385c2.1967,3.7651,5.7618,2.6765,7.1675,2.0472   c0.2211-1.5917,0.8591-2.6786,1.5637-3.2936c-5.4707-0.6226-11.2218-2.7347-11.2218-12.1722c0-2.6888,0.9623-4.8861,2.538-6.611   c-0.2557-0.6206-1.0989-3.1255,0.2386-6.5183c0,0,2.0684-0.6616,6.7747,2.525c1.9648-0.5458,4.0719-0.8195,6.165-0.829   c2.093,0.0095,4.2017,0.2832,6.17,0.829c4.7012-3.1866,6.7665-2.525,6.7665-2.525c1.3406,3.3928,0.4974,5.8977,0.2417,6.5183   c1.5793,1.7249,2.5348,3.9221,2.5348,6.611c0,9.4602-5.7618,11.5428-11.2465,12.1527c0.8834,0.7644,1.6704,2.2632,1.6704,4.561   c0,3.2955-0.0282,5.9479-0.0282,6.7592c0,0.6556,0.4432,1.4236,1.6915,1.1818c9.7812-3.2605,16.8296-12.4896,16.8296-23.3682   C-1110.0299,1673.943-1121.0574,1662.9163-1134.6598,1662.9163z" fill-rule="evenodd"></path>
                            <path d="M-1149.9611,1698.2793c-0.0542,0.1227-0.2469,0.1593-0.4222,0.0753c-0.1788-0.0804-0.2788-0.2473-0.2211-0.37   c0.053-0.126,0.2457-0.161,0.4242-0.0769C-1150.0013,1697.9882-1149.8993,1698.1566-1149.9611,1698.2793L-1149.9611,1698.2793z    M-1150.2642,1698.0547"></path>
                            <path d="M-1148.9634,1699.3922c-0.1174,0.1086-0.3473,0.0581-0.5031-0.1139c-0.1613-0.1718-0.1912-0.4016-0.072-0.5118   c0.1211-0.1088,0.3438-0.0579,0.505,0.1139C-1148.8721,1699.0541-1148.8407,1699.2819-1148.9634,1699.3922L-1148.9634,1699.3922z    M-1149.1984,1699.14"></path>
                            <path d="M-1147.9922,1700.8105c-0.151,0.1051-0.3979,0.0067-0.5505-0.2123c-0.151-0.2191-0.151-0.4819,0.0035-0.5872   c0.1526-0.1051,0.396-0.0104,0.5505,0.2068C-1147.8381,1700.4406-1147.8381,1700.7034-1147.9922,1700.8105L-1147.9922,1700.8105z    M-1147.9922,1700.8105"></path>
                            <path d="M-1146.6619,1702.1812c-0.1351,0.1489-0.4227,0.1086-0.6329-0.0945c-0.2155-0.1984-0.2753-0.4803-0.1403-0.6293   c0.1371-0.149,0.4263-0.1072,0.6381,0.0944C-1146.5831,1701.7501-1146.5182,1702.0337-1146.6619,1702.1812L-1146.6619,1702.1812z    M-1146.6619,1702.1812"></path>
                            <path d="M-1144.8265,1702.9769c-0.0597,0.1927-0.3365,0.2804-0.6154,0.1984c-0.2788-0.0845-0.4608-0.3103-0.4047-0.5051   c0.0577-0.1943,0.3361-0.2855,0.6169-0.1979C-1144.9512,1702.5563-1144.7688,1702.7805-1144.8265,1702.9769L-1144.8265,1702.9769z    M-1144.8265,1702.9769"></path>
                            <path d="M-1142.8107,1703.1243c0.0067,0.2031-0.2299,0.3716-0.5226,0.3752c-0.2944,0.0067-0.533-0.1577-0.5361-0.3577   c0-0.2052,0.2313-0.3717,0.5258-0.3768C-1143.0509,1702.7594-1142.8107,1702.9227-1142.8107,1703.1243L-1142.8107,1703.1243z    M-1142.8107,1703.1243"></path>
                            <path d="M-1140.9351,1702.8052c0.035,0.198-0.1686,0.4015-0.4594,0.4557c-0.2859,0.0526-0.5504-0.0701-0.587-0.2665   c-0.0354-0.2031,0.1716-0.4066,0.4573-0.4592C-1141.233,1702.4846-1140.9722,1702.6036-1140.9351,1702.8052L-1140.9351,1702.8052z    M-1140.9351,1702.8052"></path>
                        </g>
                    </svg>
                </a>
        </ul>
    </div>
</div>

How to create a Profile 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 create a Profile Card component

  • w-full
  • h-screen
  • flex
  • bg-gray-200
  • relative
  • w-96
  • h-auto
  • bg-gray-400
  • pt-24
  • pb-8
  • px-4
  • flex-col
  • absolute
  • bg-gray-100
  • w-28
  • h-28
  • p-2
  • z-10
  • -top-8
  • bg-black
  • h-full
  • overflow-auto
  • text-gray-100
  • text-lg
  • text-center
  • text-gray-200
  • mt-2
  • flex-row
  • gap-2
  • mt-4
  • h-10
  • w-10
  • text-gray-300
  • hover:text-gray-100

34 steps to create a Profile Card component with Tailwind CSS

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

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

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

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

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

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

  7. Use h-auto to set an element to a fixed height(auto).

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

  9. Control the padding on top side of an element to 6rem using the pt-24 utilities.

  10. Control the padding on bottom side of an element to 2rem using the pb-8 utilities.

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

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

  13. 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.

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

  15. Use w-28 to set an element to a fixed width(7rem).

  16. Use h-28 to set an element to a fixed height(7rem).

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

  18. Control the stack order (or three-dimensional positioning) of an element to 10 in Tailwind, regardless of order it has been displayed, using the z-10 utilities.

  19. Use the -top-8 utilities to set the top position of a positioned element to -2rem.

  20. Control the background color of an element to black using the bg-black utilities.

  21. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  22. Use overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

  23. Control the text color of an element to gray-100 using the text-gray-100 utilities.

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

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

  26. Control the text color of an element to gray-200 using the text-gray-200 utilities.

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

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

  29. To specify the width between columns, you can use the gap-2 utilities.

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

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

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

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

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

Conclusion

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