Published on

The Ninja Guide To How To Build A Mobile Social Network Profile Page With Tailwind CSS Better

Tags
PagesWidget
Mobile Social Network Profile Page

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 Mobile Social Network Profile Page ui component

Instagram inspired social network profile page

Why use Tailwind CSS to build a Mobile Social Network Profile Page ui component?

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

The preview of Mobile Social Network Profile Page ui component

Free download of the Mobile Social Network Profile Page's source code

The source code of Mobile Social Network Profile Page ui component

<div class="max-w-2xl mx-auto">

    <div class="px-3 py-2">
      
        <div class="flex flex-col gap-1 text-center">
            <a class="block mx-auto bg-center bg-no-repeat bg-cover w-20 h-20 rounded-full border border-gray-400 shadow-lg" href="" style="background-image: url('https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg')"></a>
            <p class="font-serif font-semibold">Marina Davinchi</p>
            <span class="text-sm text-gray-400">New York, NY - Los Angeles, CA</span>
            <span class="text-sm text-gray-400">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span>
        </div>


   
        <div class="flex justify-center items-center gap-2 my-3">
            <div class="font-semibold text-center mx-4">
                <p class="text-black">102</p>
                <span class="text-gray-400">Posts</span>
            </div>
            <div class="font-semibold text-center mx-4">
                <p class="text-black">102</p>
                <span class="text-gray-400">Followers</span>
            </div>
            <div class="font-semibold text-center mx-4">
                <p class="text-black">102</p>
                <span class="text-gray-400">Folowing</span>
            </div>
        </div>
      

 
        <div class="flex justify-center gap-2 my-5">
            <button class="bg-pink-500 px-10 py-2 rounded-full text-white shadow-lg">Follow</button>
            <button class="bg-white border border-gray-500 px-10 py-2 rounded-full shadow-lg">Message</button>
        </div>
        

     
        
        <div class="flex justify-between items-center">
            <button class="w-full py-2 border-b-2 border-yellow-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                  </svg>
            </button>
            <button class="w-full py-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto 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 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                  </svg>
            </button>
        </div>


           <div class="grid grid-cols-3 gap-2 my-3">
                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/458766/pexels-photo-458766.jpeg')"></a>
                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/247287/pexels-photo-247287.jpeg')"></a>
                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/6169/woman-hand-girl-professional.jpg')"></a>

                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/3851790/pexels-photo-3851790.jpeg')"></a>
                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/3852159/pexels-photo-3852159.jpeg')"></a>
                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/4491173/pexels-photo-4491173.jpeg')"></a>

                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/2294354/pexels-photo-2294354.jpeg')"></a>
                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/6019812/pexels-photo-6019812.jpeg')"></a>
                <a class="block bg-center bg-no-repeat bg-cover h-40 w-full rounded-lg" href="" style="background-image: url('https://images.pexels.com/photos/40751/running-runner-long-distance-fitness-40751.jpeg')"></a>
           </div>

    </div>


    <div class="flex justify-between items-center bg-yellow-600 bg-opacity-20 px-10 py-5 rounded-full text-gray-500">
        <button class="p-2 rounded-full bg-white">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-pink-500" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
              </svg>
        </button>
        <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
        </button>
        <button class="p-2 rounded-full bg-pink-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="text-white h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
              </svg>
        </button>
        <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
        </button>
        <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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>
        </button>
    </div>

</div>

How to build a Mobile Social Network Profile Page 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 Mobile Social Network Profile Page component

  • max-w-2xl
  • mx-auto
  • px-3
  • py-2
  • flex
  • flex-col
  • gap-1
  • text-center
  • block
  • bg-center
  • bg-no-repeat
  • bg-cover
  • w-20
  • h-20
  • border-gray-400
  • text-sm
  • text-gray-400
  • gap-2
  • my-3
  • mx-4
  • text-black
  • my-5
  • bg-pink-500
  • px-10
  • text-white
  • bg-white
  • border-gray-500
  • w-full
  • border-b-2
  • border-yellow-400
  • h-6
  • w-6
  • grid
  • grid-cols-3
  • h-40
  • bg-yellow-600
  • bg-opacity-20
  • py-5
  • text-gray-500
  • p-2
  • h-8
  • w-8
  • text-pink-500

43 steps to build a Mobile Social Network Profile Page component with Tailwind CSS

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

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

  3. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

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

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

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

  7. To specify the width between columns, you can use the gap-1 utilities.

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

  9. Use inline utilities to put the element on its own line and fill its parent.

  10. Control the background color of an element to center using the bg-center utilities.

  11. Control the background color of an element to no-repeat using the bg-no-repeat utilities.

  12. Control the background color of an element to cover using the bg-cover utilities.

  13. Use w-20 to set an element to a fixed width(5rem).

  14. Use h-20 to set an element to a fixed height(5rem).

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

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

  17. Control the text color of an element to gray-400 using the text-gray-400 utilities.

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

  19. Control the vertical margin of an element to 0.75rem using the my-3 utilities.

  20. Control the horizontal margin of an element to 1rem using the mx-4 utilities.

  21. Control the text color of an element to black using the text-black utilities.

  22. Control the vertical margin of an element to 1.25rem using the my-5 utilities.

  23. Control the background color of an element to pink-500 using the bg-pink-500 utilities.

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

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

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

  27. Control the border color of an element to gray-500 using the border-gray-500 utilities.

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

  29. Control the border color of an element to b-2 using the border-b-2 utilities.

  30. Control the border color of an element to yellow-400 using the border-yellow-400 utilities.

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

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

  33. Use grid to create a grid container.

  34. Use grid to create a grid container.

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

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

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

  38. Control the vertical padding of an element to 1.25rem using the py-5 utilities.

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

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

  41. Use h-8 to set an element to a fixed height(2rem).

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

  43. Control the text color of an element to pink-500 using the text-pink-500 utilities.

Conclusion

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