All comments

• 

  Fernando Braga•60

  @feernandobragaSubmitted 2 months ago

  

  Responsive recipe page using tailwind css and react

  1

  30
  

  Jared Peters•120

  @jrddpPosted 2 months ago

  This is really close to the original! Nice job. I love how you used the opacity overlay to compare them, although I would get rid of it for the final version.

  For the mobile version, there appears to be a pink background on the sides when the width is large enough. This can be solved by simply setting the background of the body to white or having the recipe card take up the full screen on smaller media queries.

  1
• 

  Ahmed Eid•170

  @ahmedEid6Submitted 2 months ago

  

  Social Links Profile

  1

  20
  

  Jared Peters•120

  @jrddpPosted 2 months ago

  Looks great!

  Potential improvements:

  • Increase the size of the image to match the original proportions.
  • Use 'font-bold' to make the text bold in the header and location.
  • Use 'transition-colors' on the buttons to create a smooth transition for the hover effect.

  0
• 

  P

  Karsten Løgstrup•90

  @logstrup78Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I dont know what im most proud of. Maybe that it is one of the first with Tailwind

  What challenges did you encounter, and how did you overcome them?

  Remembering all the tailwind shorts

  

  Social links

  1

  40
  

  Jared Peters•120

  @jrddpPosted 3 months ago

  Tailwind is awesome!

  I suggest putting all of the buttons together in a div for easier styling control and better organization. Then, instead of using py-2 to space elements, you can use "gap-y-2" which will automatically add spacing between the elements without having it affect the top or bottom padding.

  1

  This comment has received 1 replyShow
• 

  praistyles•90

  @praistylesSubmitted 3 months ago

  

  html and css

  1

  30
  

  Jared Peters•120

  @jrddpPosted 3 months ago

  If you want to align the secondcontainer, add these to the maincontainer in your CSS:

  • justify-content: center;
  • height: 100vh;

  This will set the maincontainer to take up the full screen and then center the inner items on the y-axis.

  Also, the button colors are grey 700 in the style guide. It seems like every color they use is always one of the ones in the style-guide.md file.

  Nice work 😁

  0
• 

  RiccardoColtrinari•60

  @RiccardoColtrinariSubmitted 3 months ago

  

  Recipe page using Tailwind

  1

  21
  

  Jared Peters•120

  @jrddpPosted 3 months ago

  I used this as a reference to figure out how I could have have styled the ordered list. This looks very close to the original! The code also sufficiently uses semantic elements. Nice job!

  1
• 

  Payman Hoseini•450

  @payman-hoseiniSubmitted 4 months ago

  

  QR code component

  1

  20
  

  Jared Peters•120

  @jrddpPosted 3 months ago

  • use a <main> tag instead of the outermost div to denote the main content
  • use lowercase "Slate" when extending the tailwind theme or use another name to match lowercase convention. (Using "slate" is valid it will simply override the default values)

  Marked as helpful

  0