search

acm-ucr / highlander-gloves-website

The official boxing club at UCR
https://acm-ucr.github.io/highlander-gloves-website/
1 stars 0 forks source link

Example Component #16

Closed SafeDuck closed 6 days ago

SafeDuck commented 2 weeks ago

image

Instructions:

  1. Go to Example.tsx in the components folder
  2. Make the component look as similar to the screenshot as possible
  3. Go to page.tsx in the app folder to change the props

Tips/Hints:

  1. Learn Flexbox by watching the youtube videos in the resources channel on discord 1.2. Flexbox is used to center and position elements in rows or columns
  2. Look at documentation on Flexbox and padding on the tailwind docs 2.2. https://tailwindcss.com/docs/justify-content 2.3. https://tailwindcss.com/docs/align-items 2.4. https://tailwindcss.com/docs/padding (Hint: apply padding to the outside div on line 3