jsvigneshkanna / tailwind_ui_components Goto Github PK

An open-source website made for Tailwind CSS UI components. Here we can find almost all UI components made with tailwind CSS which can be used in different languages.

Home Page: https://tailwindcsscomponents.vercel.app/

License: MIT License

JavaScript 97.13% CSS 2.87%

2022 hacktoberfest hacktoberfest-2022 javascript nextjs tailwindcss css

tailwind_ui_components's Introduction

TailwindCSS UI Component

This is the right place to play around with UI components build under TailwindCSS

Repo's Traffic since October 14th 2022🚀🚀🚀

Homepage

Components selection page

Codepen page

Motivation

We do know tailwind css is an emerging CSS framework which makes our website/ app unique without styling compared to other market bootstraps Yeah? but there is still a hindrance to start with tailwind CSS as it is somewhat complex to other competitors and we don't have enough free resources to learn or play with these utility based classes.

Solution

If you are searching for an answer for above question/ rant, then this website is best suitable for you all. Here we can get almost all layouts and components built under Tailwind CSS, and the best part is we can play around with them in inbuilt code editor and copy the codebase too for your projects.

Like to contribute to us by code/ design?

Please follow the contributing guide for this repo. Anything that is not followed will not be entertained as contribution.

Like to contribute us by money?

This contribution is not forced but welcomed, as this will help us run this software for long time

Getting started to contribute/use

Fork the repository from Repository. Just click at fork icon to create a fork-repository in your GitHub. In your local machine clone the forked repository with command and go to your repository
```
 git clone https://github.com/<username>/tailwind_ui_components.git
 cd tailwind_ui_components
```
After you choose the issue create new branch. (Use issue specifying either documentation, bug or feature than issue number and what should be done)
```
git checkout -b <branch_name> 
```
Install dependencies
```
npm install
```
Run code locally
```
npm run dev
```
Go to localhost:3000
Make the changes in code and test these. (NextJS and tailwind/plain CSS)

After changes are ready, commit the changes:

git add <changed_file> 
git commit -m "commit message"

Push the changes to origin
```
git push origin <branch_name>
```
After that create new Pull Request in your GitHub account. (It should appear after commits were pushed)

Contributors 🎉

These people are sole backbone for this software. Want to get place in below hall of fame? join our community

Show some ❤️ by starring this awesome repository!

tailwind_ui_components's People

Contributors

Stargazers

Watchers

Forkers

amanpachori sayan2908 virginielemaire najeebkp akshayrs3 biohazard2117 jsvkanna ferrorenan mpeiffer chibuike-19 beakman saroshfarhan shrutilenka itsmenikhill rohitsaini7 iamkennis zainbinfurqan ved142 kabiirk ahmed-sudani kuldeepmangla anuran12 pranshunayak sahilarora02 hamdrive ashishk1331 rancho2002 hondachan14 raazseth thecyberera gaurcoder streetcodec uttampandit yordaniss ankur2606 anubhakri13 muhammad-shahid-jamal alkhimch tanishagupta0811 rakicodes udaykahar afpedreros harsh0620 nitoc mnosov622 eddybruv deepaksuthar40128 fahadashiq12 anniedebbie richardnikolas rakshapawar108 krishnansh5 kiritocode1 sarvesh2902 viren0602 timmotal utkarsh299-tech hammadkhaan ribhavkhanna mcctrix athi223 munyanezaarmel owengaspard ashutosh-rath02 kaartik2611 dheerajchhatanidc amanjain18 abirhasanohi roadsidekoder imohitkumar1610 21givenchy roshaanali mahich123 pratikshaekbote irvrivera jaybob007 developer-diganta slashgk srijoy-paul tarekzaki1 vallaripatil19 afidegnum vishal-gori

tailwind_ui_components's Issues

[FEATURE]: Amazon store button in tailwind

Description

Need to create code for Google play store button as per below image.

The final code should be placed under path tailwind_components/store_buttons with file name as amazon_store_button.jsx
The file as to be imported to tailwind_components/store_buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Tailwind download button

Description

Need to create code for download now text+icon button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as download_now1.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[Feature]: new CODE OF CONDUCT file

Feature Title

add code_of_conduct file

Description

Add new file CODE_OF_CONDUCT.md under root directory which has standard rules to be followed in open source

Please add [email protected] email ID wherever required in contact details in above file

Motivation

This file will help to bring standard behavior among the contributors

Issue Type

Documentation

Screenshot of the feature if done ?

No response

Are you taking this fetaure implementaion

No, this is up for grabs

PR Requirement:

Please check the above requirements are met
Always create new branch on forked repo from master to avoid and error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

[FEATURE]: Search input form in tailwindcss

Description

Need to create code for simple input form as per below image.

The final code should be placed under path tailwind_components/forms with file name as search_input_form.jsx
The file as to be imported to tailwind_components/store_buttons/forms.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Play button in tailwind

Description

Need to create code for play buttons with different size and shape as per below image.

The final code should be placed under path tailwind_components/buttons with file name as paly_buttons.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: rectangle dropdown button in tailwindcss

Description

Need to create code for rectangle dropdown button button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as rectangle_dropdown_button.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Info alert in tailwind

Description

Need to create code for Info alert as per below image.

The final code should be placed under path tailwind_components/alerts with file name as info_alert.jsx
The file as to be imported to tailwind_components/alert/collection.js file as per example and added to the alertCollections list
The alert should close on clicking cross icon
Post these process, go to components tab (components/alert) in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

PR Template

Description:
As this is a new repository, we need PR GitHub template. The template should be new PRs and should have below mentioned input fields

PR template Requirement:

PR title should start with - [what_type_of_fix]< title>
Description of the Fix
Issue number in hastag
Screenshot of the Fix (desktop and mobile view)
checklist (tested in local dev, made the fix as per issue conversation, starred the rep 😜)

new file format - .github/pull_request_template.md

Give the file name a proper standardised one

Reference: https://github.com/stevemao/github-issue-templates

PR Requirement:

Please check the above requirements are met
Always create new branch on forked repo from master to avoid and error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

[BUG]: Contributors list in readme not getting updated

Description

The contributors list in bottom of README file not getting updated dynamically when new contributors come.

Motivation

This should be fixed as contributors are sole backbone of this cool project

Issue Type

Documentation

Are you taking this fetaure implementaion

No, This is up for grabs

Hey can update the Readme File according to the new changes

@jsvigneshkanna

[FEATURE]: Apple store button tailwind

Description

Need to create code for Apple store button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as apple_store_button1.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[Feature]: contact us page

Feature Title

Description

Need to build new contact us page for this repos website in nextjs and to be linked to navbar

Should have form with name,email and text area

Should also contain social media icons

Should be creative in styling and color scheme

Motivation

Issue Type

Frontend

Screenshot of the feature if done ?

Nill

Are you taking this fetaure implementaion

Delete button tailwind design

Feature Title

Delete button tailwind design

Description

Need to create code for delete text+icon button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as delete_button.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Scroll button in tailwind

Description

Need to create code for scroll button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as rounded_scroll_button.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/63/files

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Not-allowed alert in tailwind

Description

Need to create code for Not-allowed alert as per below image.

The final code should be placed under path tailwind_components/alerts with file name as not_allowed_alert.jsx
The file as to be imported to tailwind_components/alerts/collection.js file as per example and added to the alertCollections list
The alert should close on clicking cross icon
Post these process, go to components tab (components/alert) in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[Feature]: footer for website

Feature Title

Website footer

Description

This website requires footer and it has to new component which should be imported in every pages

The footer should contain below things

Logo
Footer links to different pages
Copyright text
Privacy, terms of issue, contribute guide links

Motivation

Footer is main component of cool project

Issue Type

Frontend

Screenshot of the feature if done ?

No response

Are you taking this fetaure implementaion

[Feature]: design about us page

Feature Title

Design about us page

Description

The new page should be under nextjs standard of pages
The color schema can be taken from navbar and homepage banner

This page should have below points considered

What is tailwind bootstrap
Where you find us
Why we doing this project

Motivation

About us page will give bigger picture of the project

Issue Type

Frontend

Screenshot of the feature if done ?

No response

Are you taking this fetaure implementaion

[FEATURE]: Window store button in tailwind

Description

Need to create code for Window store button as per below image.

The final code should be placed under path tailwind_components/store_buttons with file name as windows_store_button.jsx
The file as to be imported to tailwind_components/store_buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[Feature]: hamburger navmenu in mobile view

Feature Title

Hamburger navmenu

Description

Website need hamburger nav bar in mobile view
The final design is open for creativity

Motivation

Mobile view navbar doesnt look as cool as desktops

Issue Type

Frontend

Screenshot of the feature if done ?

Nill

Are you taking this fetaure implementaion

[FEATURE]: Simple form in tailwindcss

Description

Need to create code for simple input form as per below image.

The final code should be placed under path tailwind_components/forms with file name as simple_input_form.jsx
The file as to be imported to tailwind_components/store_buttons/forms.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Get started button in tailwind

Description

Need to create code for Get started button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as rounded_get_started_button.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/63/files

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Setting button tailwind

Description

Need to create code for SETTING button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as rectangle_setting.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: alarm alert in tailwind

Description

Need to create code for alarm alert as per below image.

The final code should be placed under path tailwind_components/alerts with file name as alarm _alert.jsx
The file as to be imported to tailwind_components/alert/collection.js file as per example and added to the alertCollections list
The alert should close on clicking cross icon
Post these process, go to components tab (components/alert) in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Search button in tailwind

Description

Need to create code for social+icon button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as search_test_icon_button1.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[Bug]: nav logo not redirecting

Bug Title

Non redirecting logo

Description of BUG

Logo in navbar should redirect to homepage on click

Reporduction URL of bug

Homepage

Bug Issue Type

Frontend

Screenshot of the issue if in UI/ Document

Nill

Are you taking this issue fix

[Feature]: Style the component page

Feature Title

Component page styling

Description

We have added new component page where we embed codepen and this page needs styling as there would be multiple codepens in single page

URL - https://tailwindcsscomponents.vercel.app/components

Motivation

As component page is sole for our website, this requires proper styling

Issue Type

Frontend

Screenshot of the feature if done ?

Nill

Are you taking this fetaure implementaion

[Bug]: Codepen prefill embed not working

Bug Title

Codepen prefill embed not working

Description of BUG

Codepen prefill embed not loading after page refresh

Reporduction URL of bug

https://tailwindcsscomponents.vercel.app/components

Bug Issue Type

Frontend

Screenshot of the issue if in UI/ Document

Are you taking this issue fix

[Feature]: nice logo for our website

Feature Title

Logo design

Description

We need new logo for our website
it should be in standard with existing brandkit colors
should look cooler and simple
logo title : tailwind bootstrap

Motivation

As this projectgetting cooler with more contributors and users coming in, its necessary to have good logo

Issue Type

Frontend

Screenshot of the feature if done ?

Nill

Are you taking this fetaure implementaion

No - up for grabs

[Feature]: User card with message button

Feature Title

User card with message button

Description

This will have card using tailwind css and will have a button for users to message

Motivation

Just wanted to try out something with cards and buttons.

Issue Type

Frontend

Screenshot of the feature if done ?

Final PR will look like below

@jsvigneshkanna let me know if this is fine for a PR.

Are you taking this fetaure implementaion

Yes

[FEATURE]: see-more tailwind button

Description

Need to create code for see more button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as see_more1.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Slider Input in tailwindcss

Description

Need to create code for Slider range Input as per below image.

The final code should be placed under path tailwind_components/forms with file name as slider_input_form.jsx
The file as to be imported to tailwind_components/store_buttons/forms.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

Add contributors list to Readme

Description:
As this repo is solely built by open source contributors, we need to thank them by highlighting them in Repo's Readme

Embed contributors list to readme with help of https://contrib.rocks/preview?repo=jsvigneshkanna%2Ftailwind_ui_components

PR Requirement:

Please check the above requirements are met
Always create new branch on forked repo from master to avoid and error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

[FEATURE]: Google play button in tailwind

Description

Need to create code for Google play store button as per below image.

The final code should be placed under path tailwind_components/store_buttons with file name as google_store_button.jsx
The file as to be imported to tailwind_components/store_buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

Chore Issue template

Description:
As this is a new repository, we need bug issue GitHub template. The template should be new tailwind component feature issue alone and should have below mentioned input fields

Tailwind Component Feature template Requirement:

Issue title should start with - [TCF]< title>
Description of the Tailwind component
Screenshot of the tailwind component
Are you taking this tailwind component design

The template should be under .github/ISSUE_TEMPLATE/TAILWIND-COMPONENT-FEATURE-REQUEST.yml

Reference: https://github.com/stevemao/github-issue-templates

PR Requirement:

Please check the above requirements are met
Always create new branch on forked repo from master to avoid and error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

Feature Issue Template

Description:
As this is a new repository, we need Feature Issue Template for new feature tickets alone. The template should have below mentioned input fields

Feature Issue template Requirement:

Feature title should start with - [FEATURE]
Description of the FEATURE
Motivation for this new feature
Frontend/ backend issue
Screenshot of the feature if done
Are you taking this feature implementation

The template should be under .github/ISSUE_TEMPLATE/REQUEST-REPO-FEATURE-REQUEST.yml

Reference: https://github.com/stevemao/github-issue-templates

PR Requirement:

Please check the above requirements are met
Always create new branch on forked repo from master to avoid and error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

Add about Hacktoberfest md file

Description:

We need a new markdown file named ABOUT_HACKTOBERFEST and this file should have below mentioned points

Welcome quote
Hacktoberfest-2022 banner
what is hacktoberfest
swags
where to find repos

PR Requirement:

Please check the above requirements are met
Always create new branch on forked repo from master to avoid and error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

[FEATURE]: Arrow buttons in tailwind

Description

Need to create code for ARROW button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as solid_arrow_buttons.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: Report alert in tailwindcss

Description

Need to create code for Report alert as per below image.

The final code should be placed under path tailwind_components/alerts with file name as report_alert.jsx
The file as to be imported to tailwind_components/alert/collection.js file as per example and added to the alertCollections list
The alert should close on clicking cross icon
Post these process, go to components tab (components/alert) in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

Bug Issue Template

Description:
As this is a new repository, we need a bug issue GitHub template. The template should have a bug issue alone and should have the below-mentioned input fields

Bug Issue template Requirement:

Issue title should start with - [BUG]
Description of the bug
Reproduction URL
Frontend/ backend issue
Screenshot of the issue if UI
Are you taking this issue fix

The template should be under .github/ISSUE_TEMPLATE/ISSUE-TEMPLATE.yml

Reference: https://github.com/stevemao/github-issue-templates

PR Requirement:

Please check the above requirements are met
Always create a new branch on the forked repo from the master to avoid an error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

Bug issue template

Description:
As this is a new repository, we need a bug issue GitHub template. The template should have a bug issue alone and should have the below-mentioned input fields

Bug Issue template Requirement:

Issue title should start with - [BUG]
Description of the bug
Reproduction URL
Frontend/ backend issue
Screenshot of the issue if UI
Are you taking this issue fix

The template should be under .github/ISSUE_TEMPLATE/ISSUE-TEMPLATE.yml

Reference: https://github.com/stevemao/github-issue-templates

PR Requirement:

Please check the above requirements are met
Always create a new branch on the forked repo from the master to avoid an error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

[Bug]: make homepage banner responsive to mobile screens

Bug Title

Unresponsive homepage banner

Description of BUG

Unresponsive homepage banner
The responsiveness should for viewport 768px and 460pm
Fix the stylings in respective css file using media query

Reporduction URL of bug

https://tailwindcsscomponents.vercel.app/

Bug Issue Type

Frontend

Screenshot of the issue if in UI/ Document

Nill

Are you taking this issue fix

[FEATURE]: tick alert in tailwind

Description

Need to create code for Report tickas per below image.

The final code should be placed under path tailwind_components/alerts with file name as tick_alert.jsx
The file as to be imported to tailwind_components/alerts/collection.js file as per example and added to the alertCollections list
The alert should close on clicking cross icon
Post these process, go to components tab (components/alert) in website and check whether the codepen is updated

For PR reference - https://github.com/jsvigneshkanna/tailwind_ui_components/pull/76/files

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

single text tailwind button design

Feature Title

single text tailwind button design

Description

Need to create code for single text button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as single_button.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

Screenshot of the tailwind component

Are you taking this fetaure implementaion

Fix grammar in readme file

Observed a few issues with the grammar in the readme. Some articles are missing and sentences would be cleaner and read better with their presence.

Chore issue template

Description:
As this is a new repository, we need bug issue GitHub template. The template should be new tailwind component feature issue alone and should have below mentioned input fields

Tailwind Component Feature template Requirement:

Issue title should start with - [TCF]< title>
Description of the Tailwind component
Screenshot of the tailwind component
Are you taking this tailwind component design

The template should be under .github/ISSUE_TEMPLATE/TAILWIND-COMPONENT-FEATURE-REQUEST.yml

Reference: https://github.com/stevemao/github-issue-templates

PR Requirement:

Please check the above requirements are met
Always create new branch on forked repo from master to avoid and error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

Missing contributing guide

Hi 😃
I saw your message on Hacktoberfest discord. Thanks for sharing your project
In the README you ask to follow the contributing guide but there is no contributing guide 🙈. I can add one and link it on README file if you want ;)

Feature Issue Template

Description:
As this is a new repository, we need Feature Issue Template for new feature tickets alone. The template should have below mentioned input fields

Feature Issue template Requirement:

Feature title should start with - [FEATURE]
Description of the FEATURE
Motivation for this new feature
Frontend/ backend issue
Screenshot of the feature if done
Are you taking this feature implementation

The template should be under .github/ISSUE_TEMPLATE/REQUEST-REPO-FEATURE-REQUEST.yml

Reference: https://github.com/stevemao/github-issue-templates

PR Requirement:

Please check the above requirements are met
Always create new branch on forked repo from master to avoid and error while merging the fix
Please Star this repo while forking as that would increase this repo's visibility

Cheers 🎉

[Bug]: Unresponsive navbar

Bug Title

Unresponsive navbar

Description of BUG

Navbar is unresponsive on mobile devices.

Reporduction URL of bug

No response

Bug Issue Type

Frontend

Screenshot of the issue if in UI/ Document

Are you taking this issue fix

Yes

[FEATURE]: Social media buttons in tailwindcss

Description

Need to create code for social+icon button as per below image.

The final code should be placed under path tailwind_components/buttons with file name as solid_social_button1.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Are you taking this fetaure implementaion

[FEATURE]: new tailwindss buttons

Description

If you have any button design which can be built in tailwindcss, create issue and start working on it

The final code should be placed under path tailwind_components/buttons with file name as <button_name>_button1.jsx
The file as to be imported to tailwind_components/buttons/collection.js file as per example and added to the buttonCollections list
Post these process, go to components tab in website and check whether the codepen is updated

For any issue while creating / importing the component code file, check below sample files
https://github.com/jsvigneshkanna/tailwind_ui_components/tree/master/tailwind_components/buttons

For icons please refer - https://heroicons.com/

Screenshot of the tailwind component

Add screenshot of your button design which you are building