This is an example project using Styled Components to convert a form built with Tailwindcss https://codepen.io/Spasmodic/live/d4e0e79f5cf9055f639a0ddeb16d4fa0

Looking at repetition in the form layout we can see that there are sections Profile, Personal Information and Notifications. So we have a Section directory which contains the shared components/styled. Then a directory for Profile which has the custom components for Profile.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.