 UI challenge](https://res.cloudinary.com/practicaldev/image/fetch/s--WeTdkrI7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3aal2w2dl3ngu9hbzg0.png)
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, make new friends and sometimes even future colleagues. This is possible through Friend Requests.
Together, we are going to build an awesome Friend Request component, that you can include in your next project, or maybe in the next biggest social media you will build.
Let’s get started !
Understanding the Task
This is actually easy than you think. Our component has one major part, that is replicated multiple time. You can see it as having a template friend request, in which data is added to it per the person doing the request.
Structure of Code
We can structure our code as thus
<body>
<div>
<div>
<!-- Friend Request sub-component-->
<div class="friendRequest"></div>
.
.
.
</div>
</div>
</body>
As we can see, it is just a single sub component, repeated multiple times. Let’s work on this sub-component.
Friend Request Sub component
<div>
<div>
<!-- Profile Image -->
<div><img src="/public/assets/Dec 13, 2022/Bradon.jpg" alt=""></div>
<div>
<!-- Person Name -->
<h2>Mbianou Bradon</h2>
<!-- Number of Mutual Friends -->
<p>7 mutual friends</p>
</div>
</div>
<!-- Confirm Button-->
<div class="bg-white hover:text-white hover:bg-[#ff7575] cursor-pointer transition-all ease-linear duration-300">
<h2>Confirm</h2>
</div>
</div>
I believe we can clearly see the different constituent of our friend request sub-component now. Basic styling are applied to it (it is not really visible now because a general style was applied from the parent component. But don’t bother, it will make sense in few lines down).😉
Now ! Let’s add some extra request sub components and enclose them in one parent container
<div class="px-6 py-16 rounded-md shadow-md shadow-[#ff7575] relative overflow-hidden">
<!-- Friend Request Header -->
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Friend Requests</h2>
<p class="text-slate-500 cursor-pointer hover:text-white hover:underline transition-all ease-linear duration-200">View All</p>
</div>
<!-- Parent Container containing all the friend request subcomponent -->
<div class="[&>*div>div>h2]:rounded-sm [&>*div>div>h2]:shadow-md [&>*div>div>h2]:px-6 [&>*div>div>h2]:py-2 [&>*>div>div>img]:rounded-full
[&>*>div>div>img]:aspect-square [&>*>div>div>img]:object-cover [&>*>div>div>img]:object-center [&>*>div>div>img]:h-14 [&>*>div>div>img:hover]:scale-125
[&>*>div>div>img:hover]:transition-all [&>*>div>div>img:hover]:ease-linear [&>*>div>div>img:hover]:duration-300 [&>*>div>div>img] [&>*div>div>div>h2]:text-lg [&>*div>div>div>h2]:font-bold [&>*div>div>div>p]:text-slate-600 [&>*>div]:flex [&>*>div]:items-center [&>*>div]:gap-2 [&>*]:flex [&>*]:items-center [&>*]:justify-between [&>*]:my-10">
<!-- First subcomponent -->
<div>
<div>
<!-- Profile Image -->
<div><img src="/public/assets/Dec 13, 2022/Bradon.jpg" alt=""></div>
<div>
<!-- Person Name -->
<h2>Mbianou Bradon</h2>
<!-- Number of Mutual Friends -->
<p>7 mutual friends</p>
</div>
</div>
<!-- Confirm Button-->
<div class="bg-white hover:text-white hover:bg-[#ff7575] cursor-pointer transition-all ease-linear duration-300">
<h2>Confirm</h2>
</div>
</div>
<!-- Second subcomponent -->
<div>
<div>
<!-- Profile Image -->
<div><img src="/public/assets/Dec 13, 2022/marienzale.jpeg" alt=""></div>
<div>
<!-- Person Name -->
<h2>Marie Nzale</h2>
<!-- Number of Mutual Friends -->
<p>3 mutual friends</p>
</div>
</div>
<!-- Confirm Button-->
<div class="bg-white hover:text-white hover:bg-[#ff7575] cursor-pointer transition-all ease-linear duration-300">
<h2>Confirm</h2>
</div>
</div>
<!-- Third subcomponent -->
<div>
<div>
<!-- Profile Image -->
<div><img src="/public/assets/Dec 13, 2022/lovette.jpeg" alt=""></div>
<div>
<!-- Person Name -->
<h2>Kimboh Lovette</h2>
<!-- Number of Mutual Friends -->
<p>8 mutual friends</p>
</div>
</div>
<!-- Confirm Button-->
<div class="bg-white hover:text-white hover:bg-[#ff7575] cursor-pointer transition-all ease-linear duration-300">
<h2>Confirm</h2>
</div>
</div>
</div>
After this, your work should look pretty much like this
It doesn’t look bad at all, but it’s kinda too plain for me. Let’s add those before rounded circles to this. 🤓
<body class="bg-[#f8f5f5] flex items-center justify-center min-h-screen">
<div class="bg-white w-[23rem] sm:w-[30rem] relative overflow-hidden shadow-md shadow-[#ff7575]">
[NEW] <!-- Upper circle-->
<div class="w-[24rem] px-72 py-64 bg-gradient-to-r from-[#ff7575] to-[#ff9a50] rounded-[10rem] absolute -right-96 -top-56 rotate-[16deg]"></div>
<div class="px-6 py-16 rounded-md shadow-md shadow-[#ff7575] relative overflow-hidden">
<!-- Friend Request Header-->
<div></div>
<!-- Parent Container containing all the friend request subcomponent-->
<div></div>
</div>
[NEW] <!-- Lower circle-->
<div class="bg-[#ff7575] w-[20rem] p-52 rounded-full absolute -left-32"></div>
</div>
</body>
We just added the two circles in our component, and position them absolutely then place them in the position see using left and right properties
You can easily identify this component by looking at [NEW] in the above code.
And that’s pretty much it. 😍
We just designed a responsive Friend Request Component !
Conclusion
We just built a simple and responsive Friend Request component without opening our CSS file😃. Thanks to Tailwindcss.
Many employers will need such components to be added to their website, and right now you should be proud that you are one those few who knows how to build it in less than 5mins, and you can do that without even leaving you HTML document 😎.
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 additions styling you added to you cart item.
If you have any worries or suggestions, don’t hesitate to leave it in the comment section! 😊
See ya ! 👋
Top comments (0)