How to Create the Social Media Profile For Different Screens Using TailwindCSS

Social media are interactive technologies that facilitate the creation and sharing of information, ideas, interests, and other forms of expression through virtual communities and networks.

One of the amazing features social media offers is the ability to connect with people, and make new friends and sometimes even future colleagues. But Generally, before becoming friends or getting to know each other, they generally get an idea of who you are through what is called Your Social Media Profile.

This feature allows you to tell the world more about you, what you like, what you like etc. All social media offer this feature, you can see it on Facebook, Twitter, LinkedIn etc.

Together, we are going to build one of this Social Media Profile components, that you can include in your next project, or maybe in the next biggest social media you will build.😏

Let's go!

Understanding the Task

This is actually easy than you think. It is actually one component, that has different forms based on the size of the screen. Amazing right?

But in this tutorial we won't make it like that, we will just focus on building the different views, then in a different session, we will make it one.

Let's name the different views;

Mobile-View
Tablet-View
Desktop-View

Structure of Code

We can structure our code thus

<body>

 <div>
  <div>
            <!-- Mobile View-->
          <div></div>
           <!-- Tablet View-->
          <div></div>   
           <!-- Desktop View-->
          <div></div>  
  </div>
 </div>

</body>

Mobile View

This is the easiest one. Just straight forward

<div class="w-[20rem] py-10 flex flex-col items-center gap-y-5">
        <!--Profile Image-->
    <div>
      <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
    </div>
     <!--Profile Details-->
    <div>
        <h2 class="text-xl font-semibold">Mbianou Bradon</h2>
        <p class="text-slate-500">@mbianou_bradon</p>
    </div>
     <!--Follow Button-->
    <div class="rounded-3xl border px-7 py-2 hover:bg-[#0e192c] hover:text-white transition-all ease-linear duration-300 cursor-pointer"><h2>Following</h2></div>

</div>

We have a Profile Image, profile details and the call to action button.

Profile Image: Gave a width of w-16, with a border-radius of rounded-full. we also made it responsive with aspect-square object-center object-cover . We also added the effect of scale-125 on hover.
Profile Details: Basic styling was applied, just gave them font-size of text-xl for the name and the color of text-slate-500 to the handle.
Follow button: Nothing extraordinary here, padding-inline px-7 padding-block py-2 border and hover effect on both the text and background-color.

Easy right? isn't it?😁

Tablet View

This view has more information than the mobile view. This is how it looks like.

<div class="w-[25rem] px-6 py-10 col-span-2 col-start-3">
   <div class="flex items-center justify-between">
        <!--Profile Image-->
      <div>
        <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
        </div>
        <!--Follow Button-->
   <div class="rounded-3xl border px-7 py-2 hover:bg-[#0e192c] hover:text-white transition-all ease-linear duration-300 cursor-pointer"><h2>Following</h2></div>
   </div>
        <!--Profile Details-->
  <div>
     <h2 class="text-xl font-semibold">Mbianou Bradon</h2>
     <p class="text-slate-500">@mbianou_bradon</p>
   </div>
        <!--Profile About-->
  <div class="font-bold"><p>Software developer trainee at @ikniteSpace. Working on @Bradtek in my free time.</p></div>
  </div>

Compared to the Mobile view, we have a new part, that's the Profile About. It is simply a paragraph with a font-weight of font-bold. 👌

Desktop View

This view is pretty much similar to the Tablet view, just that it has an extra more detail that the tablet view doesn't have.

<div class="w-[30rem] px-6 py-10 col-span-4 place-self-center">
  <div class="flex items-center justify-between">
        <!--Profile Image-->
    <div>
        <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
      </div>
        <!--Follow Button -->
     <div class="rounded-3xl px-7 py-2 bg-[#0e192c] text-white hover:border hover:bg-white hover:text-black transition-all ease-linear duration-300 cursor-pointer"><h2>follow</h2></div>
</div>
        <!--Profile IDetails-->
<div>
    <h2 class="text-xl font-semibold">Mbianou Bradon</h2>
    <p class="text-slate-500">@mbianou_bradon</p>
</div>
        <!--Profile About-->
  <div class="font-bold">
    <p>Software developer trainee at @ikniteSpace. Working on @Bradtek in my free time.</p>
  </div>
        <!--Profile System Details -->
  <div class="[&>*>h2>span]:font-semibold [&>*>h2>span]:text-black flex items-center text-slate-600">
      <div><h2><span>15K</span> Followers</h2></div>
       <div class="flex items-center gap-1 mx-1">
          <div class="text-sm">
             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2z"/></svg>
           </div>
        <h2><span>7K</span> Following</h2>
 </div>
 <div class="flex items-center gap-1">
      <div class="text-sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2z"/></svg>
      </div>
   <h2>Since September 30, 2020</h2>
    </div>
  </div>

</div>

I couldn't find a better name than Profile System Details, hope you don't mind. 😅

This section just tells you more about the number of connections the profile has, and when s/he joined the platform.

And that's it!

Conclusion

As earlier mention, we will just build individual views, I will for sure make a session where we will join everything together as one. Better still, you can take it as a challenge, and join it together as one. Trust me it is not difficult. But it is not easy either.

You can have a Live preview on Codepen or find the code on GitHub.

Don't hesitate to share with me if you were able to complete the tutorial on your end, I'd be happy to see any additional styling you added.

If you have any worries or suggestions, don't hesitate to leave them in the comment section! 😊

See ya! 👋