Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fork, Commit, Merge - Easy Issue (Tailwind CSS) #108

Closed
nikohoffren opened this issue Aug 8, 2023 · 3 comments
Closed

Fork, Commit, Merge - Easy Issue (Tailwind CSS) #108

nikohoffren opened this issue Aug 8, 2023 · 3 comments

Comments

@nikohoffren
Copy link
Member

Fork, Commit, Merge - Easy Issue (Tailwind CSS)

Create a Simple Card Component with Tailwind CSS

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

Navigate to the tasks/tailwind directory from the root of the project.
Then install all the necessary dependencies by running npm i in Terminal.
Also just in case, run npm run watch to make sure that Tailwind CSS is built correctly every time changes are made.
After that you can open the easy directory and index.html file inside of it.


The goal of this task is to create a simple card component using Tailwind CSS.

This card component includes:

  • An image
  • A title
  • A subtitle
  • Some body text
  • A call to action button

Some divs already have Tailwind classes added to them, you don't need to modify them.

Acceptance Criteria:

  • The card must be styled using Tailwind CSS utilities.
  • It should be responsive and adapt well to different screen sizes.
  • The image should be on the left side and all the text and button on the right.

Note: You are only required to modify the classes in the index.html file.


If you are using VS Code and have for example Live Server extension, you can simply open index.html with the server and check how the card looks. After the card is done, you are ready to make a pull request!
If you do not have Live Server extension, you'll find information about installing and how to use it here.

Check out README.md for more instructions and how to make a pull request.

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!

@Vidhanvyrs
Copy link
Contributor

hey @nikohoffren I have created the tailwind-CSS card and has already send the PR for review, as this being my first PR so I feel excited for a feedback in the code if any!

@Vidhanvyrs
Copy link
Contributor

so i have recommited it and now This time it passed the bot for not being extra large due to node module So yeah i think now you can take a look at my PR

@nikohoffren
Copy link
Member Author

so i have recommited it and now This time it passed the bot for not being extra large due to node module So yeah i think now you can take a look at my PR

Thanks for contributing! That's looking good now, im merging it in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants