Skip to content

Latest commit

 

History

History
45 lines (25 loc) · 1.9 KB

README.md

File metadata and controls

45 lines (25 loc) · 1.9 KB
Raw

🏡 Welcome to Marvelous Mansions - A one stop shop to your dream property!

The estate agents 'Marvelous Mansions' recently lost their lead developer half way through their new website design - which has left them in a 'realestate'! 😱

(Uh... "in a real state"... get it?! Nevermind... 🙈)

They have finished their HTML and React, but they ran out of time to work on the visual design.

🗺️ The Task

Your mission is to help Marvelous Mansions get their website looking good as rapidly as possible using Tailwind

You will need to install Tailwind (see 'Get started' in the Tailwind documentation): https://tailwindcss.com/docs/guides/vite

Note: you can skip step 1 as your Vite app is already created for you

  • You will then need to apply Tailwind classes to the existing React files 🙌

Getting Started

👉 fork & clone this repository

👉 npm install

👉 npm run dev

Tips & Tricks

  • You will not need to create any CSS files for this task - yay! 🎉

  • You're not required to change the React component structure, but feel free to create new components wherever you see fit or move things around! For example, in card.tsx it might make sense to create separate components for elements such as a heading component, an image component, etc. It's up to you!

  • You can use this utility class cheat sheet to help you: https://tailwindcomponents.com/cheatsheet/

  • You can also add the VSCode extension Tailwind CSS IntelliSense for autocomplete and Tailwind support

  • Bonus points if you can make the page responsive. Look at using built-in screen breakpoints, like this:

// red on mobile, blue on small screens, green on large screens
<SomeComponent className="text-red sm:text-blue lg:text-green" />
  • Don't forget to check the docs! Tailwind has great documentation - search for the CSS or effect you want to achieve here