Design comparison
Solution retrospective
Hello i just finished learning some basic tailwind principle but i am still very young in tailwind and i was not able to add the border radius and make the border radius change responsively but apart from that everything else is perfect so drop a rating and i you know you can teach me how to do it pls drop it down below thank you for your time
Community feedback
- @MelvinAguilarPosted about 1 year ago
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
In Tailwind CSS, you can create borders with the
roundedutility class by using responsive prefixes likesm,md,lg, etc.Here are the common border radius values you can use with the rounded utility class:
rounded-sm: Small border radius.rounded-md: Medium border radius.rounded-lg: Large border radius.rounded-full: Full border radius, making the element like a circle.
-
For your component, you can create it using one of the
roundedclasses and utilizeoverflow-hidden(overflow: hiddenin CSS) to clip any excess parts.Here's an example of how you can use it:
<div class="main-container rounded-lg overflow-hidden flex justify-center max-[857px]:flex-col w-auto my-20">
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
0 -
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord