https://github.com/jason89521/tailwindcss-learn
https://github.com/jason89521/tailwindcss-learn
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/jason89521/tailwindcss-learn
- Owner: jason89521
- Created: 2022-03-13T02:45:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-19T07:53:36.000Z (over 4 years ago)
- Last Synced: 2025-01-30T13:42:23.967Z (over 1 year ago)
- Language: TypeScript
- Homepage: tailwindcss-learn.vercel.app
- Size: 3.58 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tailwind CSS learn
This project was built to get familiar with Tailwind CSS. The home page will list all my completed projects in the future. Since the main goal is to get familiar with Tailwind CSS, the following projects will not focus too many on JavaScript.
## Projects list
| Project | Description | Demo | Frontend Mentor |
| ----------------------------- | -------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| profile-card-component | A simple profile card component | [link](https://tailwindcss-learn.vercel.app/profile-card-component) | [link](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ) |
| advice-generator | An app generating rendom advice | [link](https://tailwindcss-learn.vercel.app/advice-generator) | [link](https://www.frontendmentor.io/challenges/advice-generator-app-QdUG-13db) |
| order-summary-component | A simple order summary component | [link](https://tailwindcss-learn.vercel.app/order-summary-component) | [link](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj) |
| sunnyside-agency-landing-page | A landing page | [link](https://tailwindcss-learn.vercel.app/sunnyside-agency-landing-page) | [link](https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef) |
## Where are the corresponding files?
Each project has their own page file in `pages` folder, and the components file are placed in `components/{project-name}` folder. For example, if you want to find the corresponding files of `sunnyside-agency-landing-page`, the page file is `pages/sunnyside-agency-landing-page.tsx` and all the components files will be placed in `components/sunnyside-agency-landing-page` folder.