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

[nikohoffren]

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

Create a Responsive Pricing Table Using 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 medium directory and index.html file inside of it.

---

Description

The goal of this task is to design a responsive pricing table using Tailwind CSS. A pricing table typically displays different pricing tiers or plans for a service or product, with details about each plan. The table should be responsive, adjusting its layout for various screen sizes.

Requirements

• Use Tailwind CSS classes for styling.
• Create at least three pricing tiers (e.g., Basic, Standard, Premium) with different features and prices.
• Ensure that the pricing table is visually appealing and easy to read.
• Implement responsive design to adapt to different screen sizes (e.g., mobile, tablet, desktop).
• Include clear call-to-action (CTA) buttons for each pricing tier.

Task Details

• Create an HTML structure for the pricing table.
• Apply Tailwind CSS classes to style the table, pricing cards, and buttons.
• Populate the pricing tiers with sample data, including plan names, prices, and features.
• Implement responsive design using Tailwind CSS utilities to ensure the table looks good on various devices.
• Add hover effects or other interactive elements to enhance the user experience.

---

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 page 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!

[4hbab]

Hey, could i be assigned to this issue? Thanks

[nikohoffren]

Hey, could i be assigned to this issue? Thanks

Hi, go ahead!
As it says on the description:
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!