├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── ISSUE-TEMPLATE.yml │ ├── REQUEST-REPO-FEATURE-REQUEST.yml │ ├── TAILWIND-COMPONENT-FEATURE-REQUEST.yml │ └── config.yml └── pull_request_template.md ├── .gitignore ├── .gitpod.yml ├── .prettierrc.js ├── ABOUT_HACKTOBERFEST.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── components ├── aboutUs.js ├── codepen.js ├── contributor.js ├── contributors.js ├── document.js ├── faqs.js ├── footer.js ├── gitstats.js ├── homebanner.js ├── license.js ├── navbar.js ├── privacyPolicyComp.js └── socialbuttons.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── aboutUs.js ├── api │ └── github.js ├── components │ ├── alert.js │ ├── badges.js │ ├── buttons.js │ ├── contact_forms.js │ ├── feature_card.js │ ├── forms.js │ ├── index.js │ ├── navbars.js │ ├── pricing_cards.js │ ├── store_buttons.js │ └── testimonial_card.js ├── contributors.js ├── documentation.js ├── faqs.js ├── index.js └── legal │ ├── license.js │ └── privacypolicy.js ├── postcss.config.js ├── public ├── MIT_license.png ├── Screen Shot 2022-10-21 at 21.05.02.png ├── alert_component.png ├── badge_component.png ├── badges_component_img.png ├── button_component_img.png ├── contact_component.png ├── favi-tailwind.png ├── favicon │ ├── android-chrome-192x192.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── favicon.png │ └── site.webmanifest ├── feature_card_component.png ├── form_component.png ├── home_banner.png ├── logo-w.svg ├── logo.svg ├── nav_logo.png ├── nav_logo_transparent.png ├── navbar_component.png ├── pricing_card_component.png ├── store_button_component.png ├── tailwind_bootstrap_docs.mkv ├── tailwind_img_logo.png ├── testimonial_cards.png └── vercel.svg ├── styles ├── components.css ├── components │ ├── codepen.css │ ├── gitstats.css │ ├── homebanner.css │ └── navbar_style.css └── globals.css ├── tailwind.config.js ├── tailwind_components ├── alerts │ ├── alarm_alert.jsx │ ├── collection.js │ ├── info_alert.jsx │ ├── not_allowed_alert.jsx │ ├── report_alert.jsx │ ├── sample_alert.jsx │ ├── test_file.jsx │ └── tick_alert.jsx ├── badges │ ├── card_badge.jsx │ ├── close_badge.jsx │ ├── collection.js │ ├── colorful_badge.jsx │ └── icon_badge.jsx ├── buttons │ ├── collection.js │ ├── delete_button.jsx │ ├── download_now1.jsx │ ├── get_started_button.jsx │ ├── paly_buttons.jsx │ ├── rectangle_dropdown_button.jsx │ ├── rectangle_setting.jsx │ ├── report_button.jsx │ ├── rounded_scroll_button.jsx │ ├── search_test_icon_button1.jsx │ ├── see_more1.jsx │ ├── simple_text_button.jsx │ ├── single_button.jsx │ ├── solid_arrow_buttons.jsx │ └── solid_social_button1.jsx ├── contact_forms │ ├── collection.js │ ├── image_contact_form.jsx │ ├── standard_contact_form.jsx │ ├── subscription_contact_form.jsx │ └── vertical_contact_form.jsx ├── feature_cards │ ├── basic_card.jsx │ ├── brand_card.jsx │ ├── card_with_button_button1.jsx │ ├── collection.js │ ├── learn_more_card.jsx │ ├── presentation_card.jsx │ └── product_card1.jsx ├── forms │ ├── checkbox.jsx │ ├── choose_file_input.jsx │ ├── collection.js │ ├── multi_form_horizontal_progress.jsx │ ├── radio_button.jsx │ ├── search_input_form.jsx │ ├── simple_input_form.jsx │ ├── slider_input_form.jsx │ ├── test_file.jsx │ └── toggle_switch.jsx ├── navbars │ ├── animated_navbar.jsx │ ├── center_dropdown_navbar.jsx │ ├── collection.js │ ├── hover_navbar.jsx │ ├── mobile_nav_dropdown.jsx │ ├── mobile_nav_icons.jsx │ ├── navbar_social_icons.jsx │ ├── search_navbar.jsx │ ├── standard_logo_navbar.jsx │ ├── standard_mobile_navbar.jsx │ └── test_file.jsx ├── pricing_cards │ ├── collection.js │ ├── pricing_card_ribbon.jsx │ ├── pricing_with_button.jsx │ ├── small_pricing_card.jsx │ ├── standard_pricing.jsx │ └── vertical_pricing.jsx ├── store_buttons │ ├── amazon_store_button.jsx │ ├── apple_store_button1.jsx │ ├── collection.js │ ├── google_store_button.jsx │ └── windows_store_button.jsx └── testimonial_cards │ ├── collection.js │ ├── horizontal_testimonial.jsx │ ├── photo_star_testimonial.jsx │ ├── social_link_testimonial.jsx │ └── vertical_testimonial.jsx └── webpack.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/ISSUE-TEMPLATE.yml: -------------------------------------------------------------------------------- 1 | name: Bug Issue Template 2 | description: File a Bug Issue Report 3 | title: "[Bug]: " 4 | labels: [ 5 | "hacktoberfest", 6 | "hacktoberfest-accepted" 7 | ] 8 | body: 9 | - type: input 10 | id: bug-title 11 | attributes: 12 | label: Bug Title 13 | placeholder: ex. [BUG] title 14 | validations: 15 | required: true 16 | - type: textarea 17 | id: description 18 | attributes: 19 | label: Description of BUG 20 | placeholder: Description of the BUG 21 | validations: 22 | required: true 23 | - type: input 24 | id: url 25 | attributes: 26 | label: Reporduction URL of bug 27 | placeholder: URL where we can find the bug 28 | validations: 29 | required: false 30 | - type: dropdown 31 | id: issue-type 32 | attributes: 33 | label: Bug Issue Type 34 | description: Which type of bug issue? 35 | options: 36 | - Frontend 37 | - Backend 38 | - Documentation 39 | validations: 40 | required: true 41 | - type: textarea 42 | id: screenshot 43 | attributes: 44 | label: Screenshot of the issue if in UI/ Document 45 | validations: 46 | required: false 47 | - type: input 48 | id: taking-issue 49 | attributes: 50 | label: Are you taking this issue fix 51 | placeholder: Yes/ No 52 | validations: 53 | required: true 54 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/REQUEST-REPO-FEATURE-REQUEST.yml: -------------------------------------------------------------------------------- 1 | name: Feature Issue Template 2 | description: File a Feature issue report 3 | title: "[Feature]: " 4 | labels: [ 5 | "hacktoberfest", 6 | "hacktoberfest-accepted" 7 | ] 8 | body: 9 | - type: input 10 | id: feature-title 11 | attributes: 12 | label: Feature Title 13 | placeholder: ex. FEATURE Title 14 | validations: 15 | required: true 16 | - type: textarea 17 | id: Description 18 | attributes: 19 | label: Description 20 | placeholder: Description of the FEATURE 21 | validations: 22 | required: true 23 | - type: textarea 24 | id: Motivation 25 | attributes: 26 | label: Motivation 27 | placeholder: Motivation of the FEATURE 28 | validations: 29 | required: true 30 | - type: dropdown 31 | id: issue-type 32 | attributes: 33 | label: Issue Type 34 | description: Which type of issue? 35 | options: 36 | - Backend 37 | - Frontend 38 | - Documentation 39 | validations: 40 | required: true 41 | - type: textarea 42 | id: screenshot 43 | attributes: 44 | label: Screenshot of the feature if done ? 45 | validations: 46 | required: false 47 | - type: input 48 | id: implementaion 49 | attributes: 50 | label: Are you taking this fetaure implementaion 51 | placeholder: Yes/ No 52 | validations: 53 | required: true 54 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/TAILWIND-COMPONENT-FEATURE-REQUEST.yml: -------------------------------------------------------------------------------- 1 | name: Tailwind Component Feature Template 2 | description: File a Feature issue report 3 | title: "[FEATURE]: " 4 | body: 5 | - type: textarea 6 | id: Description 7 | attributes: 8 | label: Description 9 | placeholder: Description of the TAILWIND COMPONENT FEATURE 10 | validations: 11 | required: true 12 | - type: textarea 13 | id: screenshot 14 | attributes: 15 | label: Screenshot of the tailwind component 16 | validations: 17 | required: true 18 | - type: input 19 | id: implementaion 20 | attributes: 21 | label: Are you taking this fetaure implementaion 22 | placeholder: Yes/ No 23 | validations: 24 | required: true 25 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## PR Title 2 | 3 | The purpose of this Pull Request is to fix # 4 | 5 | ## Description 6 | 7 | 8 | ## How you solved 9 | 10 | 11 | ### Screenshots 12 | 13 | 14 | 15 | ## Checklist 16 | - [ ] I have Made this contribution as per the CONTRIBUTING guide in this repo 17 | - [ ] I have tested in local Environment. 18 | - [ ] I have made the fix as per issue converstaion 19 | - [ ] I have starred the repository ⭐ 20 | 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | .env 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | .vscode -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | tasks: 6 | - init: npm install --legacy-peer-deps && npm run build 7 | command: npm run dev 8 | 9 | 10 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: false, 5 | trailingComma: "all", 6 | arrowParens: "always", 7 | tabWidth: 2, 8 | semi: true, 9 | }; 10 | -------------------------------------------------------------------------------- /ABOUT_HACKTOBERFEST.md: -------------------------------------------------------------------------------- 1 | # Hey 👋, **Welcome** to TailwindCSS UI Component Repo. This is right place to play around on UI components build under TailwindCSS 2 | 3 | Hacktoberfest2022 Banner 4 | 5 | # 📝 About Hacktoberfest: 6 | 7 | ## What is Hacktoberfest? 8 | 9 | [Hacktoberfest](https://hacktoberfest.digitalocean.com) is a month-long celebration of open source software run by DigitalOcean in partnership with GitHub and Dev. 10 | 11 | - Hacktoberfest is open to everyone in our global community! 12 | - Four quality pull requests must be submitted to public GitHub repositories. 13 | - You can sign up anytime between October 1 and October 31. 14 | 15 | # Hacktoberfest Swag List: 16 | 17 | [As the official website states](https://hacktoberfest.com/#prepare-to-hack), Hacktoberfest is a time for everyone to celebrate open-source and come together to make meaningful contributions towards software and organizations you love. Whether this is your first Hacktoberfest or your 9th, everyone can contribute to making open-source software even better! 18 | 19 | ## Swag List: 20 | **The Original - DigitalOcean, Appwrite, and Docker** 21 | * Swag: T-shirt, stickers 22 | * Requirements: 4 pull requests in any eligible repository 23 | * How to sign up: Hacktoberfest Website(https://hacktoberfest.com/) 24 | * Notes: For your PR to count it must be: 25 | Submitted in a public repo, AND The PR is labelled as hacktoberfest-accepted by a maintainer, OR Submitted in a repo labelled hacktoberfest, AND Merged, OR Approved 26 | 27 | #### [Click here to be taken to the 2022 Hacktoberfest Swag List!](https://hacktoberfestswaglist.com/list) 28 | 29 | ## Where to find repositories? 30 | 31 | All the repositories with the topic hactoberfest on GitHub or GitLab have opted to hacktoberfest. 32 | You can also check on the following links: 33 | * For GitHub (https://github.com/topics/hacktoberfest) 34 | * For GitLab (https://gitlab.com/explore/projects?topic=hacktoberfest) 35 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing guide 2 | 3 | Thank you for investing your time in contributing to this project! 4 | Please follow this steps :smiley: 5 | 6 | ## 1. Issues 7 | 8 | ### Check if an issue exists 9 | 10 | If you spot a problem, please [search if an issue already exists](https://github.com/jsvigneshkanna/tailwind_ui_components/issues). If nobody is assigned to this issue, comment the issue to get assigned from maintainers. 11 | 12 | ### Create a new issue 13 | 14 | If it doesn't, you can open a new issue using the [new issue form](https://github.com/jsvigneshkanna/tailwind_ui_components/issues/new/choose) specifying if it's about a bug, a feature, documentation or anything else. 15 | 16 | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/jsvigneshkanna/tailwind_ui_components.git) 17 | 18 | ## 2. Fork this repository 19 | 20 | Once assigned to an issue, you can fork this repo. 21 | 22 |
23 | Show me how to fork a repository 24 | Click the **Fork** button on the top right of this repository page 25 | 26 | ![screenshot of Fork button](https://docs.github.com/assets/cb-23088/images/help/repository/fork_button.png) 27 | 28 | It will create a copy of this repository into your account. 29 | 30 | Select the owner for the forked repository 31 | ![GitHub example](https://docs.github.com/assets/cb-151543/images/help/repository/fork-choose-owner.png) 32 | 33 | Choose to **copy only the master branch** and click **Create fork** 34 |
35 | 36 | 37 | ## 3. Clone the fork 38 | 39 | Go to your fork repository and clone : 40 | 1. `git clone [your repo url goes here]` 41 | 2. change directory to your cloned repo `cd [your repo name]` 42 | 43 | ## 4. Create a new branch and code 44 | 45 | **Don't code on the master branch** 46 | 47 | Run `git checkout -b [your branch name goes here]` to create your new branch 48 | 49 | Make your edits with you favorite IDE 50 | 51 | ## 5. Save and push 52 | 53 | Run `git add .` 54 | 55 | Run `git commit -m 'Commit message goes here'` :warning: please commit with an descriptive message for the convenience of reviewer 56 | 57 | Finally, run `git push origin [your branch name goes here]` 58 | 59 | ## 6. Create a pull request (PR) 60 | 61 | - Go to your repository in browser and click on compare and pull requests. 62 | - Then add a suitable and crisp title and description to your pull request that explains your contribution. 63 | - Follow the PR template without compromising anything. 64 | - Mention anyone of the reviewers (jsvigneshkanna) 65 | - Voila! Your Pull Request has been submitted and will be reviewed by the moderators and merged.🥳 66 | 67 | ## 7. Star this repo 68 | 69 | Please star this repo to make this project cooler 70 | 71 | Happy contributing ! 72 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 J S Vignesh Kanna 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | # TailwindCSS UI Component 7 | 8 | This is the right place to play around with UI components build under TailwindCSS 9 | 10 | [![Repo view count from Oct-27th 9PM](https://hits.dwyl.com/jsvigneshkanna/tailwind_ui_components.svg)](http://hits.dwyl.com/jsvigneshkanna/tailwind_ui_components) 11 | 12 | ## Repo's Traffic since October 14th 2022🚀🚀🚀 13 | ![image](https://user-images.githubusercontent.com/42484705/198340953-94338bdb-0313-40ca-bfae-e4701f79e048.png) 14 | 15 | 16 | [![GitHub issues](https://img.shields.io/github/issues/jsvigneshkanna/tailwind_ui_components?logo=github)](https://github.com/jsvigneshkanna/tailwind_ui_components/issues) [![GitHub forks](https://img.shields.io/github/forks/jsvigneshkanna/tailwind_ui_components?logo=github)](https://github.com/jsvigneshkanna/tailwind_ui_components/network/members) [![GitHub stars](https://img.shields.io/github/stars/jsvigneshkanna/tailwind_ui_components?logo=github)](https://github.com/jsvigneshkanna/tailwind_ui_components/stargazers) 17 | 18 | 19 |
20 | 21 | --- 22 | 23 | **Homepage** 24 | ![image](https://user-images.githubusercontent.com/42484705/197696692-560c05b1-5207-41c7-adc9-d10fe403ece2.png) 25 | 26 | **Components selection page** 27 | ![image](https://user-images.githubusercontent.com/42484705/197696771-9aaf4f6d-1928-4d66-9d2b-01ad479d289a.png) 28 | 29 | **Codepen page** 30 | ![image](https://user-images.githubusercontent.com/42484705/197697009-132c44c8-29b3-40f7-98d0-c54f0aa8a33b.png) 31 | 32 | --- 33 | 34 | # Motivation 35 | 36 | We do know tailwind css is an emerging CSS framework which makes our website/ app unique without styling compared to other market bootstraps 37 | 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 38 | free resources to learn or play with these utility based classes. 39 | 40 | # Solution 41 | 42 | 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. 43 | 44 | # Like to contribute to us by code/ design? 45 | 46 | Please follow the [contributing guide](./CONTRIBUTING.md) for this repo. Anything that is not followed will not be entertained as contribution. 47 | 48 | # Like to contribute us by money? 49 | 50 | This contribution is not forced but welcomed, as this will help us run this software for long time 51 |

52 | 53 |

54 | 55 | 56 | # Getting started to contribute/use 57 |
58 | 59 | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/jsvigneshkanna/tailwind_ui_components.git) 60 | 61 | OR 62 |
63 | 64 | 65 | 1. Fork the repository from [Repository](https://github.com/jsvigneshkanna/tailwind_ui_components). 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 66 | ``` sh 67 | git clone https://github.com//tailwind_ui_components.git 68 | cd tailwind_ui_components 69 | ``` 70 | 2. After you choose the issue create new branch. (Use issue specifying either documentation, bug or feature than issue number and what should be done) 71 | ```sh 72 | git checkout -b 73 | ``` 74 | 3. Install dependencies 75 | ``` 76 | npm install 77 | ``` 78 | 4. Run code locally 79 | ``` 80 | npm run dev 81 | ``` 82 | 5. Go to `localhost:3000` 83 | 6. Make the changes in code and test these. (NextJS and tailwind/plain CSS) 84 | 7. After changes are ready, commit the changes: 85 | ``` sh 86 | git add 87 | git commit -m "commit message" 88 | ``` 89 | 8. Push the changes to origin 90 | ``` sh 91 | git push origin 92 | ``` 93 | 9. After that create new Pull Request in your GitHub account. (It should appear after commits were pushed) 94 | 95 | # Contributors 🎉 96 | 97 | These people are sole backbone for this software. Want to get place in below hall of fame? join our community 98 | 99 | 100 | 101 | 102 | 103 |
104 |
105 | Show some ❤️ by starring this awesome repository! 106 |
107 | -------------------------------------------------------------------------------- /components/codepen.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import { 3 | PrefillEmbed, 4 | PrefillLang, 5 | useCodePenEmbed, 6 | } from "react-codepen-prefill-embed"; 7 | 8 | const Codepen = ({htmlText}) => { 9 | useCodePenEmbed(); 10 | return ( 11 |
12 | 24 | } 25 | scripts={["https://cdn.tailwindcss.com"]}> 26 | {htmlText} 27 | 28 |
29 | ); 30 | }; 31 | 32 | export default Codepen; 33 | -------------------------------------------------------------------------------- /components/contributor.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import {useEffect, useState} from "react"; 3 | 4 | function Contributor(props) { 5 | const [socials, setSocials] = useState({}); 6 | 7 | useEffect(() => { 8 | fetch(`https://api.github.com/users/${props.contributor.login}`) 9 | .then((res) => res.json()) 10 | .then((contributor) => setSocials(contributor)); 11 | }, []); 12 | 13 | return ( 14 |
15 | contributor-logo 20 | 21 |
{socials.login}
22 | 23 |
24 | 25 | 31 | {" "} 32 | 33 | 34 | 35 | {socials["twitter-username"] && ( 36 | 37 | 43 | {" "} 44 | 45 | 46 | 47 | )} 48 | 49 | {socials["blog"] && ( 50 | 51 | 57 | {" "} 58 | 59 | 60 | 61 | )} 62 |
63 | 64 |
65 | ); 66 | } 67 | 68 | export default Contributor; 69 | -------------------------------------------------------------------------------- /components/contributors.js: -------------------------------------------------------------------------------- 1 | import {useState, useEffect} from "react"; 2 | import Contributor from "./contributor"; 3 | import {BallTriangle} from "react-loader-spinner"; 4 | 5 | const Contributors = () => { 6 | const [loading, setloading] = useState(true); 7 | const [contributors, setContributors] = useState([]); 8 | 9 | useEffect(() => { 10 | setTimeout(() => { 11 | setloading(false); 12 | }, 600); 13 | 14 | fetch( 15 | "https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors", 16 | ) 17 | .then((res) => res.json()) 18 | .then((contributors) => setContributors(contributors)); 19 | }, []); 20 | 21 | return ( 22 |
23 | {loading ? ( 24 |
32 | 38 |
39 | ) : ( 40 |
41 |
42 |

43 | Our contributors: 44 |

45 |
46 |
49 | {console.log("checking, ", contributors)} 50 | {contributors.map((contributor, idx) => ( 51 | 52 | ))} 53 |
54 |
55 |
56 | )} 57 |
58 | ); 59 | }; 60 | 61 | export default Contributors; 62 | -------------------------------------------------------------------------------- /components/document.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Link from "next/link"; 3 | 4 | const Document = () => { 5 | return ( 6 |
7 |

8 | Documentation 📝 9 |

10 |
11 |

12 | 1. Feature video 📺 13 |

14 | 19 |
20 | 21 |
22 |

23 | 2. Type of components 💾 24 |

25 |

26 | Currently we have around 10 different types of components 27 |

28 |

29 | Please check 30 | 31 | 32 | here 33 | 34 | 35 |

36 |
37 | 38 |
39 |

40 | 3. How to use this website ⚡ 41 |

42 |
43 |

44 | - You can search some of the required components like 'Buttons, 45 | Forms, Navbars, Alerts' from the components page. 46 |

47 |

48 | - Go to the required component page and try different UI code from 49 | embeded codepen. 50 |

51 |

52 | - For specific components like 'Navbars' you can open/ 53 | close the HTML tab to simulate the mobile responsiveness 54 |

55 |

56 | - In addition to that, we can open the specific codepen in a new tab 57 | by clicking 'EDIT ON CODEPEN' 58 |

59 |

60 | 🚀 NOTE: It may take 2-3 seconds for the codepen page to load due to 61 | the page is heavy in size. Any contributors who can solve this issue 62 | can connect by Github 63 |

64 |
65 |
66 |
67 | ); 68 | }; 69 | 70 | export default Document; 71 | -------------------------------------------------------------------------------- /components/footer.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | /* eslint-disable @next/next/no-html-link-for-pages */ 3 | 4 | import Link from "next/link"; 5 | 6 | const Footer = () => { 7 | return ( 8 |
9 | 89 |
90 | ); 91 | }; 92 | 93 | export default Footer; 94 | -------------------------------------------------------------------------------- /components/gitstats.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-html-link-for-pages */ 2 | import React from "react"; 3 | import {TbGitFork} from "react-icons/tb"; 4 | import {BsStarFill} from "react-icons/bs"; 5 | import cn from 'classnames'; 6 | import useSWR from "swr"; 7 | 8 | async function fetcher(...arg) { 9 | const res = await fetch(...arg); 10 | 11 | return res.json(); 12 | } 13 | const GitStats = (props) => { 14 | const {className} = props; 15 | const {data} = useSWR("/api/github", fetcher); 16 | 17 | return ( 18 | 22 |
23 | 24 |

{data ? data.forks : "Loading"}

25 |
26 |
27 | 28 |

{data ? data.stars : "Loading"}

29 |
30 | 31 | ); 32 | }; 33 | 34 | export default GitStats; 35 | -------------------------------------------------------------------------------- /components/homebanner.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import {useState, useEffect} from "react"; 3 | import {BallTriangle} from "react-loader-spinner"; 4 | import Link from "next/link"; 5 | 6 | const Homebanner = () => { 7 | const [loading, setloading] = useState(true); 8 | useEffect(() => { 9 | setTimeout(() => { 10 | setloading(false); 11 | }, 600); 12 | }, []); 13 | return ( 14 |
15 | {loading ? ( 16 |
24 | 30 |
31 | ) : ( 32 |
33 |
34 |
35 |
36 |

37 | This is one stop for frontend developers (sorry 🙏 fullstack 38 | developers) who are designing and building their website with 39 | tailwind css. 40 |

41 |

42 | Here you can find all UI components and layouts built 43 | exclusively in tailwind CSS. 44 |

45 |

46 | Additional point, checkout components page - dont say this to 47 | your competitors 😆{" "} 48 | 49 | 50 | learn more ➡️ 51 | 52 | 53 |

54 |
55 |
56 |
57 | banner 58 |
59 |
60 |
61 | )} 62 |
63 | ); 64 | }; 65 | 66 | export default Homebanner; 67 | -------------------------------------------------------------------------------- /components/license.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const LicenseContent = () => { 3 | return ( 4 |
5 |
6 |
7 |
8 |

MIT License

9 |

10 | Copyright (c) 2022 - Now J S Vignesh Kanna 11 |

12 |

13 | Permission is hereby granted, free of charge, to any person 14 | obtaining a copy of this software and associated documentation 15 | files (the "Software"), to deal in the Software without 16 | restriction, including without limitation the rights to use, copy, 17 | modify, merge, publish, distribute, sublicense, and/or sell copies 18 | of the Software, and to permit persons to whom the Software is 19 | furnished to do so, subject to the following conditions: 20 |

21 | 22 |

23 | The above copyright notice and this permission notice shall be 24 | included in all copies or substantial portions of the Software. 25 |

26 | 27 |

28 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 29 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE 30 | WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE 31 | AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 32 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 33 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 34 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 35 | DEALINGS IN THE SOFTWARE. 36 |

37 |
38 |
39 |
40 | license 45 |
46 |
47 |
48 | ); 49 | }; 50 | 51 | export default LicenseContent; 52 | -------------------------------------------------------------------------------- /components/navbar.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-html-link-for-pages */ 2 | import Image from "next/image"; 3 | import Link from "next/link"; 4 | import {MdMenu} from "react-icons/md"; 5 | import {AiOutlineClose} from "react-icons/ai"; 6 | import {useState} from "react"; 7 | import {useRouter} from "next/router"; 8 | 9 | const Navbar = () => { 10 | const [isMenuOpen, setIsMenuOpen] = useState(false); 11 | const router = useRouter(); 12 | 13 | const showMenu = () => { 14 | setIsMenuOpen((prev) => !prev); 15 | }; 16 | const displayMenu = () => { 17 | if (isMenuOpen) { 18 | return "flex small-screen-header flex-col justify-center items-center gap-2 my-2"; 19 | } else { 20 | return "hidden"; 21 | } 22 | }; 23 | return ( 24 |
25 | 52 | 53 |
54 |
55 | Components 56 |
57 |
58 | Documentation 59 |
60 |
61 | About Us 62 |
63 |
64 | FAQs 65 |
66 |
67 |
68 | ); 69 | }; 70 | 71 | export default Navbar; 72 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind_ui_components", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@fortawesome/fontawesome-svg-core": "^6.2.0", 13 | "@fortawesome/free-brands-svg-icons": "^6.2.0", 14 | "@fortawesome/free-solid-svg-icons": "^6.2.0", 15 | "@fortawesome/react-fontawesome": "^0.2.0", 16 | "@octokit/rest": "^19.0.5", 17 | "classnames": "^2.3.2", 18 | "font-awesome": "^4.7.0", 19 | "install-peerdeps": "^3.0.3", 20 | "next": "^12.3.1", 21 | "nextjs": "0.0.3", 22 | "prettier": "^2.7.1", 23 | "react": "^18.2.0", 24 | "react-codepen-prefill": "^0.3.0", 25 | "react-codepen-prefill-embed": "0.0.2", 26 | "react-dom": "^18.2.0", 27 | "react-icons": "^4.6.0", 28 | "react-loader-spinner": "^5.3.4", 29 | "swr": "^1.3.0" 30 | }, 31 | "devDependencies": { 32 | "autoprefixer": "^10.4.12", 33 | "eslint": "8.25.0", 34 | "eslint-config-next": "12.3.1", 35 | "file-loader": "^6.2.0", 36 | "postcss": "^8.4.18", 37 | "tailwindcss": "^3.1.8" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | import "../styles/components/navbar_style.css"; 3 | import "../styles/components/homebanner.css"; 4 | import "../styles/components/codepen.css"; 5 | import "../styles/components.css"; 6 | import "../styles/components/gitstats.css"; 7 | function MyApp({Component, pageProps}) { 8 | return ; 9 | } 10 | 11 | export default MyApp; 12 | -------------------------------------------------------------------------------- /pages/aboutUs.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | 3 | import Navbar from "../components/navbar"; 4 | import AboutUs from "../components/aboutUs"; 5 | import Footer from "../components/footer"; 6 | import SocialButtons from "../components/socialbuttons"; 7 | import Contributors from "../components/contributors"; 8 | 9 | export default function Home() { 10 | return ( 11 | <> 12 | 13 | Tailwind Bootstrap | About US 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 28 | 29 | 33 | 34 | 38 | 39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
48 | 49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /pages/api/github.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | const {Octokit} = require("@octokit/rest"); 3 | 4 | export default async (req, res) => { 5 | const octokit = new Octokit({ 6 | auth: process.env.GITHUB_AUTH_TOKEN, 7 | }); 8 | const repo = await octokit.request( 9 | "/repos/jsvigneshkanna/tailwind_ui_components", 10 | ); 11 | const forksCount = repo.data.forks; 12 | const starsCount = repo.data.watchers; 13 | return res.status(200).json({stars: starsCount, forks: forksCount}); 14 | }; 15 | -------------------------------------------------------------------------------- /pages/components/alert.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import alertCollections from "../../tailwind_components/alerts/collection"; 6 | import Footer from "../../components/footer"; 7 | 8 | const Alert = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Alerts 13 | 14 | 15 | 16 | 17 |
18 |

19 | Alerts are used in website due user actions 💭 20 |

21 | {alertCollections.map((alert, index) => { 22 | return ( 23 |
24 |

{alert.componentName}

25 | 26 |
27 | ); 28 | })} 29 |
30 |
31 |
32 | ); 33 | }; 34 | export default Alert; 35 | -------------------------------------------------------------------------------- /pages/components/badges.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import badgeCollection from "../../tailwind_components/badges/collection"; 6 | import Footer from "../../components/footer"; 7 | 8 | const Badge = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Badges 13 | 14 | 15 | 16 | 17 |
18 |

19 | How cool is to have coloured and meaningful badges near your image/ 20 | cards/ testimonials. Sounds interesting, then why waiting to check 21 | inside 😎 22 |

23 | {badgeCollection.map((badge, index) => { 24 | return ( 25 |
26 |

{badge.componentName}

27 | 28 |
29 | ); 30 | })} 31 |
32 |
33 |
34 | ); 35 | }; 36 | export default Badge; 37 | -------------------------------------------------------------------------------- /pages/components/buttons.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import Footer from "../../components/footer"; 6 | import buttonCollections from "../../tailwind_components/buttons/collection"; 7 | 8 | const Buttons = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Buttons 13 | 14 | 15 | 16 | 17 | 18 |
19 |

20 | Buttons, widely called CTAs in tech are backbones for engineers to 21 | make user interact easily and navigate different section with a click 22 | 👆 23 |

24 | {buttonCollections.map((button, index) => { 25 | return ( 26 |
27 |

28 | {index + 1}. {button.componentName} 29 |

30 | 31 |
32 | ); 33 | })} 34 |
35 |
36 |
37 | ); 38 | }; 39 | export default Buttons; 40 | -------------------------------------------------------------------------------- /pages/components/contact_forms.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import Footer from "../../components/footer"; 6 | import contactFormsCollection from "../../tailwind_components/contact_forms/collection"; 7 | 8 | const contactForms = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Contact Forms 13 | 14 | 15 | 16 | 17 | 18 |
19 |

20 | As someone in facebook posted 'Helps you connect and share with 21 | people using contact forms', we are helping you with best 22 | designed contact forms in tailwindCSS 🍽️ 23 |

24 | {contactFormsCollection.map((contactForm, index) => { 25 | return ( 26 |
27 |

28 | {index + 1}. {contactForm.componentName} 29 |

30 | 31 |
32 | ); 33 | })} 34 |
35 |
36 |
37 | ); 38 | }; 39 | export default contactForms; 40 | -------------------------------------------------------------------------------- /pages/components/feature_card.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import Footer from "../../components/footer"; 6 | import featureCardColletion from "../../tailwind_components/feature_cards/collection"; 7 | 8 | const FeatureCards = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Feature Card 13 | 14 | 15 | 16 | 17 | 18 |
19 |

20 | In late 90s, we do have visiting cards to showcase our portfolio. But 21 | now, we are in 20th century where 240px X 240px of div is enough for 22 | showcasing our portfolio 💳 23 |

24 | {featureCardColletion.map((featureCard, index) => { 25 | return ( 26 |
27 |

28 | {index + 1}. {featureCard.componentName} 29 |

30 | 31 |
32 | ); 33 | })} 34 |
35 |
36 |
37 | ); 38 | }; 39 | export default FeatureCards; 40 | -------------------------------------------------------------------------------- /pages/components/forms.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import Footer from "../../components/footer"; 6 | import formCollections from "../../tailwind_components/forms/collection"; 7 | 8 | const Forms = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Forms 13 | 14 | 15 | 16 | 17 |
18 |

19 | Forms are vital in website/ apps where these helps end users to 20 | interact with the website smoothly and increase user experience 📝 21 |

22 | {formCollections.map((form, index) => { 23 | return ( 24 |
25 |

{form.componentName}

26 | 27 |
28 | ); 29 | })} 30 |
31 |
32 |
33 | ); 34 | }; 35 | export default Forms; 36 | -------------------------------------------------------------------------------- /pages/components/navbars.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import Footer from "../../components/footer"; 6 | import navbarCollections from "../../tailwind_components/navbars/collection"; 7 | 8 | const NavbarComponent = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | navbar 13 | 14 | 15 | 16 | 17 | 18 |
19 |

20 | Guess, IRL where no navbars in website which has 20 pages. This would 21 | rather increase the memory power in memorizing all the URLs 🤪 22 |

23 |

24 | NOTE: Kindly make the codepen result screen view port to 0.5x in 25 | mobile devices 26 |

27 | {navbarCollections.map((navbar, index) => { 28 | return ( 29 |
30 |

31 | {index + 1}. {navbar.componentName} 32 |

33 | 34 |
35 | ); 36 | })} 37 |
38 |
39 |
40 | ); 41 | }; 42 | export default NavbarComponent; 43 | -------------------------------------------------------------------------------- /pages/components/pricing_cards.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import Footer from "../../components/footer"; 6 | import pricingCardsCollections from "../../tailwind_components/pricing_cards/collection"; 7 | 8 | const PricingCards = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Pricing Cards 13 | 14 | 15 | 16 | 17 | 18 |
19 |

20 | Have cool product (Not having? believe you have) but not sure how can 21 | you sell/ market those pricings. Our developers have designed the best 22 | pricing templates, Just tweak the text and you are good to go 💰 23 |

24 | {pricingCardsCollections.map((pricingCard, index) => { 25 | return ( 26 |
27 |

28 | {index + 1}. {pricingCard.componentName} 29 |

30 | 31 |
32 | ); 33 | })} 34 |
35 |
36 |
37 | ); 38 | }; 39 | export default PricingCards; 40 | -------------------------------------------------------------------------------- /pages/components/store_buttons.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import Footer from "../../components/footer"; 6 | import storeButtonCollections from "../../tailwind_components/store_buttons/collection"; 7 | 8 | const Forms = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Store Buttons 13 | 14 | 15 | 16 | 17 |
18 |

19 | These components can be used in footer and contact pages to showcase 20 | your social/ company cards 😎 21 |

22 | {storeButtonCollections.map((storeButton, index) => { 23 | return ( 24 |
25 |

{storeButton.componentName}

26 | 27 |
28 | ); 29 | })} 30 |
31 |
32 |
33 | ); 34 | }; 35 | export default Forms; 36 | -------------------------------------------------------------------------------- /pages/components/testimonial_card.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import Head from "next/head"; 3 | import Navbar from "../../components/navbar"; 4 | import Codepen from "../../components/codepen"; 5 | import Footer from "../../components/footer"; 6 | import testimonialCardsCollections from "../../tailwind_components/testimonial_cards/collection"; 7 | 8 | const TestimonialCards = () => { 9 | return ( 10 |
11 | 12 | Tailwind UI | Testimonial Cards 13 | 14 | 15 | 16 | 17 |
18 |

19 | Still Guessing how can you showcase your testimonials(You do have 🤪). 20 | Dont worry if don't have testimonials or have no idea how to 21 | design it, click this card 22 |

23 | {testimonialCardsCollections.map((testimonialCard, index) => { 24 | return ( 25 |
26 |

{testimonialCard.componentName}

27 | 28 |
29 | ); 30 | })} 31 |
32 |
33 |
34 | ); 35 | }; 36 | export default TestimonialCards; 37 | -------------------------------------------------------------------------------- /pages/contributors.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | 3 | import Navbar from "../components/navbar"; 4 | import Footer from "../components/footer"; 5 | import SocialButtons from "../components/socialbuttons"; 6 | import Contributors from "../components/contributors"; 7 | 8 | export default function Home() { 9 | return ( 10 | <> 11 | 12 | Tailwind Bootstrap | Contributors 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 27 | 28 | 32 | 33 | 37 | 38 | 39 |
40 | 41 | 42 |
43 | 44 |
45 |
46 |
47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /pages/documentation.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Navbar from "../components/navbar"; 3 | import Footer from "../components/footer"; 4 | import Document from "../components/document"; 5 | 6 | const Documentation = () => { 7 | return ( 8 | <> 9 | 10 | Tailwind Bootstrap | Documentation 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 25 | 26 | 30 | 31 | 35 | 36 | 37 |
38 | 39 | 40 |
41 |
42 | 43 | ); 44 | }; 45 | export default Documentation; 46 | -------------------------------------------------------------------------------- /pages/faqs.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | 3 | import Navbar from "../components/navbar"; 4 | import FAQs from "../components/faqs"; 5 | import Footer from "../components/footer"; 6 | 7 | export default function Home() { 8 | return ( 9 | <> 10 | 11 | Tailwind Bootstrap 12 | 13 | 14 | 15 | 16 | 17 | 21 | 22 | 26 | 27 | 31 | 32 | 36 | 37 | 38 |
39 | 40 | 41 |
42 |
43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Navbar from "../components/navbar"; 3 | import Homebanner from "../components/homebanner"; 4 | import Footer from "../components/footer"; 5 | import SocialButtons from "../components/socialbuttons"; 6 | import GitStats from "../components/gitstats"; 7 | 8 | export default function Home() { 9 | return ( 10 | <> 11 | 12 | Tailwind Bootstrap 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 27 | 31 | 32 | 36 | 37 | 38 |
39 | 40 | 41 | 42 |
43 | 44 |
45 |
46 |
47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /pages/legal/license.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | 3 | import Navbar from "../../components/navbar"; 4 | import Homebanner from "../../components/homebanner"; 5 | import Footer from "../../components/footer"; 6 | import SocialButtons from "../../components/socialbuttons"; 7 | import LicenseContent from "../../components/license"; 8 | 9 | export default function License() { 10 | return ( 11 | <> 12 | 13 | Tailwind Bootstrap | Legal 14 | 15 | 19 | 20 | 21 | 22 | 23 | 27 | 28 | 32 | 33 | 37 | 38 | 42 | 43 | 44 |
45 | 46 | 47 |
48 |
49 | 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /pages/legal/privacypolicy.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Navbar from "../../components/navbar"; 3 | import Footer from "../../components/footer"; 4 | import SocialButtons from "../../components/socialbuttons"; 5 | import PrivacyPolicyComp from "../../components/privacyPolicyComp"; 6 | 7 | export default function PrivacyPolicy() { 8 | return ( 9 | <> 10 | 11 | Tailwind Bootstrap | Privacy Policy 12 | 13 | 14 | 15 | 16 | 17 | 21 | 22 | 26 | 27 | 31 | 32 | 36 | 37 | 38 |
39 | 40 | 41 |
42 |
43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/MIT_license.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/MIT_license.png -------------------------------------------------------------------------------- /public/Screen Shot 2022-10-21 at 21.05.02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/Screen Shot 2022-10-21 at 21.05.02.png -------------------------------------------------------------------------------- /public/alert_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/alert_component.png -------------------------------------------------------------------------------- /public/badge_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/badge_component.png -------------------------------------------------------------------------------- /public/badges_component_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/badges_component_img.png -------------------------------------------------------------------------------- /public/button_component_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/button_component_img.png -------------------------------------------------------------------------------- /public/contact_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/contact_component.png -------------------------------------------------------------------------------- /public/favi-tailwind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/favi-tailwind.png -------------------------------------------------------------------------------- /public/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/favicon/favicon.ico -------------------------------------------------------------------------------- /public/favicon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/favicon/favicon.png -------------------------------------------------------------------------------- /public/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /public/feature_card_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/feature_card_component.png -------------------------------------------------------------------------------- /public/form_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/form_component.png -------------------------------------------------------------------------------- /public/home_banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/home_banner.png -------------------------------------------------------------------------------- /public/logo-w.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | tailwindBOOTSTRAP 70 | -------------------------------------------------------------------------------- /public/nav_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/nav_logo.png -------------------------------------------------------------------------------- /public/nav_logo_transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/nav_logo_transparent.png -------------------------------------------------------------------------------- /public/navbar_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/navbar_component.png -------------------------------------------------------------------------------- /public/pricing_card_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/pricing_card_component.png -------------------------------------------------------------------------------- /public/store_button_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/store_button_component.png -------------------------------------------------------------------------------- /public/tailwind_bootstrap_docs.mkv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/tailwind_bootstrap_docs.mkv -------------------------------------------------------------------------------- /public/tailwind_img_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/tailwind_img_logo.png -------------------------------------------------------------------------------- /public/testimonial_cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsvigneshkanna/tailwind_ui_components/4e1b35348a44bef1caf11c816615a985ff5d5c53/public/testimonial_cards.png -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /styles/components.css: -------------------------------------------------------------------------------- 1 | .component_page { 2 | width: 100%; 3 | background: linear-gradient(220deg, #1f002d 0%, #00002d 100%); 4 | height: max-content; 5 | padding-top: 14vh; 6 | padding-bottom: 8vh; 7 | color: white; 8 | font-family: Arial, sans-serif; 9 | } 10 | 11 | .component_container { 12 | justify-content: space-evenly; 13 | width: 85%; 14 | margin: 0 auto; 15 | } 16 | 17 | .component_card { 18 | background-color: #030324; 19 | position: relative; 20 | width: 310px; 21 | height: 400px; 22 | border-radius: 20px; 23 | padding: 12px; 24 | box-sizing: border-box; 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: flex-start; 28 | align-items: center; 29 | cursor: pointer; 30 | transition: 10s smooth ease-in-out; 31 | box-shadow: 4px 5px 6px 0px rgba(141, 5, 239, 0.525); 32 | } 33 | 34 | .new_ribbon { 35 | position: absolute; 36 | top: -24px; 37 | right: -20px; 38 | background-color: rgb(1, 18, 253); 39 | color: snow; 40 | padding: 12px; 41 | font-weight: 600; 42 | border-radius: 20px; 43 | } 44 | 45 | .in_dev_ribbon { 46 | position: absolute; 47 | top: -24px; 48 | right: -20px; 49 | background-color: rgb(245, 106, 1); 50 | color: snow; 51 | padding: 12px; 52 | font-weight: 600; 53 | border-radius: 20px; 54 | } 55 | 56 | .container_card_img { 57 | width: 100%; 58 | border-radius: 20px; 59 | overflow: hidden; 60 | height: 45%; 61 | border: 2px solid snow; 62 | object-fit: cover; 63 | } 64 | 65 | .component_name { 66 | font-size: 22px; 67 | font-weight: bolder; 68 | padding-top: 20px; 69 | transition: 2s smooth; 70 | text-align: center; 71 | } 72 | 73 | .component_name:hover { 74 | color: rgb(235, 204, 7); 75 | } 76 | 77 | .component_brief { 78 | text-align: center; 79 | padding-top: 16px; 80 | color: #06b4f3; 81 | font-weight: 600; 82 | } 83 | .component_card:hover { 84 | /* font-size: 25px; */ 85 | transform: scale(105%); 86 | background-color: #131a28; 87 | box-shadow: 4px 5px 10px 0px rgba(5, 42, 226, 0.679); 88 | } 89 | 90 | .in_dev_component { 91 | cursor: not-allowed; 92 | } 93 | @media (max-width: 900px) { 94 | .component_page { 95 | padding-top: 10vh; 96 | } 97 | 98 | .component_card { 99 | margin-bottom: 54px; 100 | box-shadow: 2px 3px 10px 0px rgb(136, 149, 224); 101 | /* width: 280px; */ 102 | } 103 | .new_ribbon { 104 | position: absolute; 105 | top: -15px; 106 | right: -15px; 107 | background-color: rgb(6, 41, 242); 108 | color: white; 109 | padding: 10px; 110 | font-weight: 500; 111 | border-radius: 20px; 112 | } 113 | 114 | .in_dev_ribbon { 115 | position: absolute; 116 | top: -15px; 117 | right: -15px; 118 | background-color: rgb(218, 99, 8); 119 | color: white; 120 | padding: 10px; 121 | font-weight: 500; 122 | border-radius: 20px; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /styles/components/codepen.css: -------------------------------------------------------------------------------- 1 | .codepen_page { 2 | width: 100%; 3 | background: linear-gradient(90deg, #1b0023 0%, #010130 100%); 4 | height: max-content; 5 | padding-top: 18vh; 6 | color: snow; 7 | font-family: Arial, sans-serif; 8 | } 9 | 10 | .codepen_container { 11 | padding-bottom: 5vh; 12 | width: 90%; 13 | margin: 0 auto; 14 | } 15 | 16 | .codepen_brief { 17 | text-align: center; 18 | font-weight: 600; 19 | font-size: 18px; 20 | } 21 | 22 | .codepen_name { 23 | font-size: 22px; 24 | font-weight: bolder; 25 | text-transform: uppercase; 26 | padding-bottom: 24px; 27 | margin-left: 5%; 28 | width: 90%; 29 | border-radius: 4px; 30 | } 31 | 32 | .codepen_name:hover { 33 | color: rgb(249, 164, 7); 34 | background-color: #370244; 35 | } 36 | 37 | @media (max-width: 900px) { 38 | .codepen_container { 39 | padding-bottom: 3vh; 40 | width: 94%; 41 | } 42 | .codepen_name { 43 | font-size: 18px; 44 | margin-left: 3%; 45 | width: 94%; 46 | } 47 | .codepen_brief { 48 | font-size: 14px; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /styles/components/gitstats.css: -------------------------------------------------------------------------------- 1 | .gitstats_box { 2 | display: flex; 3 | flex-direction: row; 4 | position: absolute; 5 | top: 15vh; 6 | left: 10vw; 7 | max-width: 100%; 8 | min-width: 120px; 9 | width: auto; 10 | } 11 | .gitstats_fork, 12 | .gitstats_star { 13 | display: flex; 14 | flex-direction: row; 15 | justify-content: space-between; 16 | align-items: center; 17 | padding: 8px; 18 | } 19 | .gitstats_fork { 20 | background: rgb(238, 113, 3); 21 | color: white; 22 | border-radius: 40px 0px 0px 40px; 23 | } 24 | .gitstats_star { 25 | color: rgb(238, 113, 3); 26 | background: white; 27 | border-radius: 0px 40px 40px 0px; 28 | } 29 | @media (max-width: 900px) { 30 | .gitstats_box { 31 | display: none; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /styles/components/homebanner.css: -------------------------------------------------------------------------------- 1 | .banner { 2 | background: linear-gradient(135deg, #1e0b5e 0%, #420212 50%, #4e0649 100%); 3 | /* min-height: 80vh; */ 4 | width: 100%; 5 | font-family: Arial, sans-serif; 6 | padding-top: 22vh; 7 | padding-bottom: 10vh; 8 | } 9 | .bannerfaq{ 10 | padding-top: 14vh !important; 11 | } 12 | 13 | .banner_container { 14 | width: 80%; 15 | margin: 0 auto; 16 | display: flex; 17 | justify-content: space-between; 18 | align-items: center; 19 | gap: 10rem; 20 | z-index: 10; 21 | } 22 | 23 | .left_container { 24 | width: 100%; 25 | } 26 | 27 | .what_is { 28 | font-weight: bolder; 29 | color: rgb(249, 164, 7); 30 | text-decoration: underline; 31 | text-underline-offset: 8px; 32 | padding-bottom: 24px; 33 | font-size: 20px; 34 | letter-spacing: 6px; 35 | } 36 | 37 | .what_is_ans { 38 | /* color: #195cab; */ 39 | color: white; 40 | font-size: 20px; 41 | line-height: 1.8; 42 | } 43 | 44 | .what_is_ans p { 45 | margin-bottom: 12px; 46 | } 47 | 48 | .right_container { 49 | width: 100%; 50 | text-align: center; 51 | } 52 | 53 | .right_container img { 54 | width: 100%; 55 | height: 100%; 56 | display: flex; 57 | justify-content: center; 58 | object-fit: contain; 59 | } 60 | 61 | @media (max-width: 900px) { 62 | .banner { 63 | font-family: "poppins"; 64 | padding-top: 10vh !important; 65 | padding-bottom: 5vh; 66 | } 67 | .banner_container { 68 | flex-direction: column; 69 | gap: 3rem; 70 | width: 95%; 71 | padding: 16px; 72 | } 73 | .what_is { 74 | font-size: 20px; 75 | letter-spacing: 2px; 76 | text-align: center; 77 | } 78 | 79 | .what_is_ans { 80 | /* color: #195cab; */ 81 | color: white; 82 | font-size: 18px; 83 | line-height: 1.8; 84 | text-align: center; 85 | } 86 | 87 | .right_container img { 88 | width: 100%; 89 | text-align: center; 90 | height: 100%; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /styles/components/navbar_style.css: -------------------------------------------------------------------------------- 1 | .nav_container { 2 | width: 80%; 3 | background: linear-gradient( 4 | 90deg, 5 | rgb(238, 113, 3) 0%, 6 | rgb(226, 10, 96) 100% 7 | ); 8 | padding: 8px 0 8px 0; 9 | position: fixed; 10 | top: 24px; 11 | left: 10%; 12 | border-radius: 40px; 13 | color: white; 14 | box-shadow: 4px 5px 10px 0px rgba(225, 148, 5, 0.479); 15 | z-index: 100000; 16 | font-family: Arial, sans-serif; 17 | } 18 | 19 | nav { 20 | display: flex; 21 | justify-content: space-between; 22 | align-items: center; 23 | padding: 0px 20px 0px 20px; 24 | } 25 | 26 | .right_contents { 27 | display: flex; 28 | align-items: center; 29 | gap: 22px; 30 | font-weight: bold; 31 | font-size: large; 32 | color: white; 33 | } 34 | 35 | .nav_links { 36 | padding: 12px; 37 | font-weight: 600; 38 | } 39 | 40 | .nav_links:hover, 41 | .nav_links:focus { 42 | /* text-decoration: underline; 43 | text-underline-offset: 8px; 44 | text-underline-position: above; */ 45 | background-color: rgba(118, 14, 216, 0.501); 46 | border-radius: 40px; 47 | } 48 | @media (max-width: 899px) { 49 | .right_contents { 50 | display: none; 51 | } 52 | } 53 | 54 | @media (max-width: 899px) { 55 | .nav_links { 56 | padding: 12px; 57 | font-weight: normal; 58 | /* margin-bottom: 24px; */ 59 | } 60 | .nav_links:nth-child(1) { 61 | /* margin-top: 5vh; */ 62 | } 63 | .nav_container { 64 | width: 96%; 65 | top: 24px; 66 | left: 2%; 67 | box-shadow: 2px 1px 0 2px rgba(225, 148, 5, 0.479); 68 | } 69 | .nav_container nav { 70 | flex-direction: row; 71 | } 72 | } 73 | @media (max-width: 1024px) { 74 | .nav_links { 75 | padding: 12px; 76 | font-size: 16px; 77 | } 78 | } 79 | @media (max-width: 960px) { 80 | .nav_links { 81 | padding: 12px; 82 | font-size: 13px; 83 | } 84 | } 85 | @media (max-width: 899px) { 86 | .nav_container nav div { 87 | flex-direction: column; 88 | gap: 8px; 89 | } 90 | } 91 | 92 | @media (min-width: 899px) { 93 | .hamburger { 94 | display: none; 95 | } 96 | } 97 | 98 | @media (min-width: 899px) { 99 | .small-screen-header { 100 | display: none; 101 | } 102 | } -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | footer { 6 | font-family: Arial, sans-serif; 7 | } 8 | 9 | .legal_container { 10 | font-family: Arial, sans-serif; 11 | } 12 | 13 | .documentation_page { 14 | font-family: Arial, sans-serif; 15 | } 16 | 17 | .privacy_page { 18 | font-family: Arial, sans-serif; 19 | } 20 | 21 | /* style scroll bar */ 22 | 23 | ::-webkit-scrollbar { 24 | width: 10px; 25 | } 26 | 27 | ::-webkit-scrollbar-track { 28 | background: #000057; 29 | } 30 | 31 | ::-webkit-scrollbar-thumb { 32 | background: linear-gradient( 33 | 90deg, 34 | rgb(238, 113, 40) 0%, 35 | rgb(226, 10, 100) 100% 36 | ); 37 | } 38 | 39 | ::-webkit-scrollbar-thumb:hover { 40 | background: linear-gradient(rgb(238, 113, 3) 0%, rgb(226, 10, 96) 100%); 41 | } 42 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx}", 5 | "./components/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | minWidth: { 9 | 500: "500px", 10 | }, 11 | boxShadow: { 12 | wrap: "0 15px 25px rgba(0, 0, 50, 0.3)", 13 | }, 14 | extend: { 15 | transitionProperty: { 16 | mh: "max-height", 17 | }, 18 | transitionDuration: { 19 | 1000: "1s", 20 | 650: "650ms", 21 | }, 22 | width: { 23 | 45: "45%", 24 | 0.6: "0.6rem", 25 | }, 26 | height: { 27 | 90: "90%", 28 | }, 29 | screens: { 30 | md9: "900px", 31 | }, 32 | colors: { 33 | "alert-text": "#d4975c", 34 | faq1: "#8ffcff", 35 | }, 36 | fontFamily: { 37 | poppins: ["poppins"], 38 | }, 39 | }, 40 | }, 41 | plugins: [], 42 | }; 43 | -------------------------------------------------------------------------------- /tailwind_components/alerts/alarm_alert.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const alarmAlert = stripIndent` 4 |
5 |
6 |
11 |
12 | 21 | 26 | 27 |
28 |
Just a Alarm Baby
29 |
30 | 39 | 44 | 45 |
46 |
47 |
48 | 53 |
54 | 55 | `; 56 | 57 | export default alarmAlert; 58 | -------------------------------------------------------------------------------- /tailwind_components/alerts/collection.js: -------------------------------------------------------------------------------- 1 | import not_allowed_alert from "./not_allowed_alert"; 2 | import infoAlert from "./info_alert"; 3 | import tickAlert from "./tick_alert"; 4 | import report_alert from "./report_alert"; 5 | import alarmAlert from "./alarm_alert"; 6 | import sample_alert from "./sample_alert"; 7 | 8 | const alertCollections = [ 9 | {componentName: "Info Alert", component: infoAlert}, 10 | {componentName: "Tick Alert", component: tickAlert}, 11 | {componentName: "Report Alert", component: report_alert}, 12 | {componentName: "Not-Allowed Alert", component: not_allowed_alert}, 13 | {componentName: "Alarm Alert", component: alarmAlert}, 14 | ]; 15 | export default alertCollections; 16 | -------------------------------------------------------------------------------- /tailwind_components/alerts/info_alert.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const infoAlert = stripIndent` 4 |
5 |
6 | 7 | 8 | 9 | 10 | This is just a Information alert 11 | 12 | 18 |
19 |
20 | 29 | `; 30 | 31 | export default infoAlert; 32 | -------------------------------------------------------------------------------- /tailwind_components/alerts/not_allowed_alert.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const not_allowed_alert = stripIndent` 4 |
5 |
6 |
9 | 17 | 22 | 23 | 24 |

This is just a not allowed alert!

25 | 26 | 34 | 40 | 41 |
42 |
43 |
44 | `; 45 | 46 | export default not_allowed_alert; 47 | -------------------------------------------------------------------------------- /tailwind_components/alerts/report_alert.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const check_box = stripIndent` 4 |
5 |
6 |
9 | 17 | 22 | 23 | 24 |

This is just a Report Alert ❤️‍🔥🧑‍🚒

25 | 26 | 34 | 40 | 41 |
42 |
43 |
44 | `; 45 | 46 | export default check_box; 47 | -------------------------------------------------------------------------------- /tailwind_components/alerts/sample_alert.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const sample_alert = stripIndent` 4 |
5 |
6 |
7 | ALERT! 8 | an error occoured 9 |
10 |
11 | 16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 | Warning! 24 |
25 |
26 | 31 |
32 |
33 |
34 | 35 | 45 | `; 46 | 47 | export default sample_alert; -------------------------------------------------------------------------------- /tailwind_components/alerts/test_file.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const test = stripIndent`
4 |
5 |

6 | Ready to dive in? 7 | Start your free trial today. 8 |

9 |
10 |
11 | 14 | Get started 15 | 16 |
17 |
18 | 21 | Learn more 22 | 23 |
24 |
25 |
26 |
`; 27 | 28 | export default test; 29 | -------------------------------------------------------------------------------- /tailwind_components/badges/card_badge.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const CardBadge = stripIndent` 4 |
5 |
8 | New 12 | 13 | VK tailwind Bootstrap 18 |
19 |
Welcome to VK tailwind Bootstrap
20 |

21 | Best part of card badge is to have a badge above a card. Nothing else 😆 22 |

23 |
24 |
25 |
26 | `; 27 | export default CardBadge; 28 | -------------------------------------------------------------------------------- /tailwind_components/badges/close_badge.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const closeBadge = stripIndent` 4 | 5 | 14 |
15 | 19 | Small 20 | 40 | 41 | 42 | 46 | Large 47 | 67 | 68 |
69 | 83 | `; 84 | 85 | export default closeBadge; 86 | -------------------------------------------------------------------------------- /tailwind_components/badges/collection.js: -------------------------------------------------------------------------------- 1 | import exampleBadges from "./colorful_badge"; 2 | import closeBadge from "./close_badge"; 3 | import CardBadge from "./card_badge"; 4 | import iconBadges from "./icon_badge"; 5 | 6 | const badgeCollection = [ 7 | {componentName: "Normal Badges", component: exampleBadges}, 8 | {componentName: "Badges with Dot", component: iconBadges}, 9 | {componentName: "Closing Badge", component: closeBadge}, 10 | {componentName: "Card Badge", component: CardBadge}, 11 | ]; 12 | 13 | export default badgeCollection; 14 | -------------------------------------------------------------------------------- /tailwind_components/badges/colorful_badge.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const badgeExample = stripIndent` 4 |
5 |
8 |
9 |
10 |
11 |
Small
12 |
13 | 19 | Badge rounded-full 20 | 21 | 27 | Badge rounded-md 28 | 29 | 35 | Badge rounded-xs 36 | 37 |
38 |
39 |
Base
40 |
41 | 47 | Badge rounded-full 48 | 49 | 55 | Badge rounded-md 56 | 57 | 63 | Badge rounded-xs 64 | 65 |
66 |
67 |
Large
68 |
69 | 75 | Badge rounded-full 76 | 77 | 83 | Badge rounded-md 84 | 85 | 91 | Badge rounded-xs 92 | 93 |
94 |
95 |
96 |
97 |
98 | `; 99 | 100 | export default badgeExample; 101 | -------------------------------------------------------------------------------- /tailwind_components/buttons/collection.js: -------------------------------------------------------------------------------- 1 | import test1 from "./simple_text_button"; 2 | import dropdownButton from "./rectangle_dropdown_button"; 3 | import see_more1 from "./see_more1"; 4 | import downloadnow from "./download_now1.jsx"; 5 | import deleteButton from "./delete_button"; 6 | import solidArrowButtons from "./solid_arrow_buttons"; 7 | import settingButton from "./rectangle_setting"; 8 | import roundedScrollButton from "./rounded_scroll_button"; 9 | import playButton from "./paly_buttons"; 10 | import searchButton from "./search_test_icon_button1.jsx"; 11 | import singleButton from "./single_button"; 12 | import socialButton from "./solid_social_button1.jsx"; 13 | import reportButton from "./report_button"; 14 | import getStartedButton from "./get_started_button.jsx"; 15 | 16 | const buttonCollections = [ 17 | {componentName: "Simple Button with above text", component: test1}, 18 | {componentName: "drop down button", component: dropdownButton}, 19 | {componentName: "See more button", component: see_more1}, 20 | {componentName: "Delete button", component: deleteButton}, 21 | {componentName: "Download now button", component: downloadnow}, 22 | {componentName: "Setting button", component: settingButton}, 23 | {componentName: "Rounded scroll button", component: roundedScrollButton}, 24 | {componentName: "Play Button", component: playButton}, 25 | {componentName: "Search Button", component: searchButton}, 26 | {componentName: "Single Button", component: singleButton}, 27 | {componentName: "Social Button", component: socialButton}, 28 | {componentName: "Report Button", component: reportButton}, 29 | {componentName: "Get Started Button", component: getStartedButton}, 30 | {componentName: "Solid Arrow Buttons", component: solidArrowButtons}, 31 | ]; 32 | 33 | export default buttonCollections; 34 | -------------------------------------------------------------------------------- /tailwind_components/buttons/delete_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const deleteButton = stripIndent` 4 |
5 |
6 |
7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | Delete 15 | 16 |
17 |
18 | Learn more 19 |
20 |
21 |
22 |
23 | `; 24 | 25 | export default deleteButton; 26 | -------------------------------------------------------------------------------- /tailwind_components/buttons/download_now1.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const downloadnow = stripIndent` 4 |
5 |
6 |
7 | 13 |
14 |
15 |
16 | 17 | `; 18 | 19 | export default downloadnow; 20 | -------------------------------------------------------------------------------- /tailwind_components/buttons/get_started_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const getStartedButton = stripIndent` 4 |
5 |
8 | 39 |
40 |
41 | `; 42 | 43 | export default getStartedButton; 44 | -------------------------------------------------------------------------------- /tailwind_components/buttons/paly_buttons.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const playButton = stripIndent` 4 | 5 | 6 | 7 | 8 |
9 |
10 | 13 |
14 |
15 | 18 |
19 |
20 | 21 | `; 22 | 23 | export default playButton; 24 | -------------------------------------------------------------------------------- /tailwind_components/buttons/rectangle_dropdown_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const dropdownButton = stripIndent` 4 | 36 | 37 | 58 | `; 59 | 60 | export default dropdownButton; 61 | -------------------------------------------------------------------------------- /tailwind_components/buttons/rectangle_setting.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const rectangleSettingButton = stripIndent` 4 |
5 |
6 |
7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | Setting 15 | 16 |
17 |
18 |
19 |
20 | `; 21 | 22 | export default rectangleSettingButton; 23 | -------------------------------------------------------------------------------- /tailwind_components/buttons/report_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const reportButton = stripIndent` 4 |
5 |
8 |
9 |
10 | 14 | 15 | 22 | 26 | 27 | 28 | Report 29 | 30 |
31 |
32 |
33 |
34 | `; 35 | 36 | export default reportButton; 37 | -------------------------------------------------------------------------------- /tailwind_components/buttons/rounded_scroll_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const roundedScrollButton = stripIndent` 4 |
5 |
6 |
7 |
8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
Scroll Down
19 | 20 |
21 |
22 |
23 |
24 | 25 | `; 26 | 27 | export default roundedScrollButton; 28 | -------------------------------------------------------------------------------- /tailwind_components/buttons/search_test_icon_button1.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const searchButton = stripIndent` 4 |
5 |
6 |
7 | 8 |
9 | 12 | 13 | 14 |
15 |
16 |
17 | `; 18 | 19 | export default searchButton; 20 | -------------------------------------------------------------------------------- /tailwind_components/buttons/see_more1.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const seemore = stripIndent` 4 |
5 |
6 | 25 |
26 |
27 | 28 | `; 29 | 30 | export default seemore; 31 | -------------------------------------------------------------------------------- /tailwind_components/buttons/simple_text_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const test1 = stripIndent`
4 |
7 |

8 | Sample text 9 | Simple paragragh. 10 |

11 |
12 |
13 | 17 | Click here 18 | 19 |
20 |
21 | 25 | Click here too, why waiting 26 | 27 |
28 |
29 |
30 |
31 | `; 32 | 33 | export default test1; 34 | -------------------------------------------------------------------------------- /tailwind_components/buttons/single_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const singleButton = stripIndent` 4 |
5 |
8 |
9 |
10 | 14 | Learn More 15 | 16 |
17 |
18 |
19 |
20 | 21 | `; 22 | 23 | export default singleButton; 24 | -------------------------------------------------------------------------------- /tailwind_components/buttons/solid_arrow_buttons.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const solidArrowButtons = stripIndent` 4 |
5 | 6 | 7 |
8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 |
40 | 41 |
42 | `; 43 | 44 | export default solidArrowButtons; 45 | -------------------------------------------------------------------------------- /tailwind_components/buttons/solid_social_button1.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const socialButton = stripIndent` 4 | 5 | 9 | 10 | 11 |
14 |
15 |
18 |
21 | 24 |
25 | 32 | Github 33 | 35 |
36 | 37 |
40 |
43 | 46 |
47 | 54 | Linkedin 55 | 57 |
58 |
59 |
60 | `; 61 | 62 | export default socialButton; 63 | -------------------------------------------------------------------------------- /tailwind_components/contact_forms/collection.js: -------------------------------------------------------------------------------- 1 | import VerticalContactForm from "./vertical_contact_form"; 2 | import contactForm from "./standard_contact_form"; 3 | import SubsriptionContactForm from "./subscription_contact_form"; 4 | import ImageContactForm from "./image_contact_form"; 5 | 6 | const contactFormsCollection = [ 7 | {componentName: "Vertical contact form", component: VerticalContactForm}, 8 | {componentName: "Sample Contact form", component: contactForm}, 9 | { 10 | componentName: "Subscription Contact form", 11 | component: SubsriptionContactForm, 12 | }, 13 | { 14 | componentName: "Image Contact form", 15 | component: ImageContactForm, 16 | }, 17 | ]; 18 | 19 | export default contactFormsCollection; 20 | -------------------------------------------------------------------------------- /tailwind_components/contact_forms/image_contact_form.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const ImageContactForm = stripIndent` 4 |
5 |
6 |
7 |
8 | img 13 |
14 |
15 |
16 |

17 | Book Appointment 18 |

19 |
20 | 21 | 26 |
27 |
28 | 29 | 34 |
35 |
36 | 37 | 47 |
48 |
49 | 50 | 60 |
61 | 62 | 68 |
69 |
70 |
71 |
72 |
73 | `; 74 | export default ImageContactForm; 75 | -------------------------------------------------------------------------------- /tailwind_components/contact_forms/standard_contact_form.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const contactForm = stripIndent` 4 |
5 |
6 |
7 |
8 | Contact Us 9 |
10 |

Make an Appointment

11 |
12 | 18 | 24 | 33 | 42 |
43 | 48 | 54 | 60 |
61 |
62 |
63 | `; 64 | 65 | export default contactForm; 66 | -------------------------------------------------------------------------------- /tailwind_components/contact_forms/subscription_contact_form.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {stripIndent} from "react-codepen-prefill-embed"; 3 | 4 | const SubsriptionContactForm = stripIndent` 5 |
8 |
11 |
12 |

15 | Subscribe for latest newsletter 16 |

17 |
21 | 27 | 33 |
34 |
35 |
36 |
37 | `; 38 | 39 | export default SubsriptionContactForm; 40 | -------------------------------------------------------------------------------- /tailwind_components/contact_forms/vertical_contact_form.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const contactForm = stripIndent` 4 |
5 |
6 |
7 |
8 | Contact Us 9 |
10 |

Book your Appointment

11 |
12 | 17 | 23 | 28 | 34 | 39 | 48 | 53 | 62 |
63 | 69 |
70 |
71 |
72 | `; 73 | 74 | export default contactForm; 75 | -------------------------------------------------------------------------------- /tailwind_components/feature_cards/basic_card.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const basicCard = stripIndent` 4 |
5 |
6 | 7 | 8 | 9 | 10 | 11 |

People come here for cool tailwind CSS UI components

12 | 13 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore at ex aliquid ipsa praesentium magnam quia molestiae sint, eveniet soluta autem ipsam fuga maiores nostrum velit unde natus placeat ea.

14 |
15 |
16 | 17 | `; 18 | 19 | export default basicCard; 20 | -------------------------------------------------------------------------------- /tailwind_components/feature_cards/brand_card.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const brandCard = stripIndent` 4 |
5 |
6 |
9 | 14 | 19 | 20 |
21 | 26 |
27 | At your fingertips 28 |
29 | 30 |

31 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos 32 | voluptate magni error fugiat beatae veritatis inventore natus, minima 33 | velit illum numquam, voluptatum, voluptas obcaecati similique libero. 34 | Aperiam natus delectus porro? 35 |

36 | 42 | Read more 43 | 56 | 57 |
58 |
59 |
60 |
61 | `; 62 | 63 | export default brandCard; 64 | -------------------------------------------------------------------------------- /tailwind_components/feature_cards/card_with_button_button1.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const cardWithButton = stripIndent` 4 |
5 |
8 | Woman's Face 13 |
14 |
15 |

J S Vignesh Kanna

16 |

Software Engineer

17 |
18 | 23 |
24 |
25 |
26 | `; 27 | 28 | export default cardWithButton; 29 | -------------------------------------------------------------------------------- /tailwind_components/feature_cards/collection.js: -------------------------------------------------------------------------------- 1 | import cardWithButton from "./card_with_button_button1"; 2 | import brandCard from "./brand_card"; 3 | import productCard from "./product_card1"; 4 | import basicCard from "./basic_card"; 5 | import learnmoreCard from "./learn_more_card"; 6 | import presentationCards from "./presentation_card"; 7 | 8 | const featureCardColletion = [ 9 | { componentName: "Portfolio card", component: cardWithButton }, 10 | { componentName: "Brand Card", component: brandCard }, 11 | { componentName: "Product Card", component: productCard }, 12 | { componentName: "Basic Card", component: basicCard }, 13 | { componentName: "Learn More card", component: learnmoreCard }, 14 | { componentName: "Presentation Cards", component: presentationCards } 15 | ]; 16 | 17 | export default featureCardColletion; 18 | -------------------------------------------------------------------------------- /tailwind_components/feature_cards/learn_more_card.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const learnmoreCard = stripIndent` 4 |
5 |
9 |
13 | 24 | 29 | 30 |
31 |

The quick

32 |

over the lazy dog

33 |
34 |
35 | 36 |
46 |
50 | - The best products start with Figma 51 |
52 |
56 | - Design with real data 57 |
58 |
62 | - Lightning fast prototyping 63 |
64 |
68 | - Fastest way to organize 69 |
70 |
74 | - Work at the speed of thought. 75 |
76 |
80 | Learn More 87 |
88 |
89 |
90 | `; 91 | export default learnmoreCard; 92 | -------------------------------------------------------------------------------- /tailwind_components/feature_cards/presentation_card.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const presentationCards = stripIndent` 4 |
5 |
9 |
15 |
18 |

21 | Mountain View 22 |

23 |

26 | Check out all of these gorgeous mountain trips with beautiful views 27 | mountains 28 |

29 | 34 |
35 |
36 | 37 |
43 |
46 |

49 | To the Beach 50 |

51 |

54 | Plan your next beach trip with these fabulous destinations 55 |

56 | 61 |
62 |
63 |
64 |
65 | `; 66 | 67 | export default presentationCards; 68 | -------------------------------------------------------------------------------- /tailwind_components/feature_cards/product_card1.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const productCard = stripIndent` 4 |
5 |
8 | 13 | 14 |
15 | 20 | 21 |
24 | 32 | 37 | 38 |
39 |
40 | At your fingertips 41 |
42 |

43 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt in 44 | commodi ullam rem explicabo est quas quidem dolorum quae? Blanditiis 45 | similique nesciunt nobis cum dolorum sapiente, quia odit repellendus 46 | magnam? 47 |

48 | 53 | 57 |
58 |
59 |
60 | `; 61 | 62 | export default productCard; 63 | -------------------------------------------------------------------------------- /tailwind_components/forms/checkbox.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const Checkbox = stripIndent` 4 |
5 |
6 |
7 | 13 | 19 |
20 |
21 | 27 | 33 |
34 |
35 | 41 | 47 |
48 |
49 | 55 | 61 |
62 |
63 |
64 | `; 65 | 66 | export default Checkbox; 67 | -------------------------------------------------------------------------------- /tailwind_components/forms/choose_file_input.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const fileInput = stripIndent` 4 |
5 |
6 | 11 | 17 |

18 | SVG, PNG, JPG or GIF (MAX. 800x400px). 19 |

20 |
21 |
22 | `; 23 | 24 | export default fileInput; 25 | -------------------------------------------------------------------------------- /tailwind_components/forms/collection.js: -------------------------------------------------------------------------------- 1 | import sliderInputForm from "./slider_input_form"; 2 | import Checkbox from "./checkbox"; 3 | import searchInput from "./search_input_form"; 4 | import inputForm from "./simple_input_form"; 5 | import fileInput from "./choose_file_input"; 6 | import Radio_button from "./radio_button"; 7 | import ToggleSwitch from "./toggle_switch"; 8 | import HorizontalProgress from "./multi_form_horizontal_progress"; 9 | 10 | const formCollections = [ 11 | {componentName: "Range Slider", component: sliderInputForm}, 12 | {componentName: "Check Box", component: Checkbox}, 13 | {componentName: "Search Input", component: searchInput}, 14 | {componentName: "Input Form", component: inputForm}, 15 | {componentName: "Choose File Input", component: fileInput}, 16 | {componentName: "Radio Button", component: Radio_button}, 17 | {componentName: "Toggle Switch", component: ToggleSwitch}, 18 | { 19 | componentName: "Multi Step Horizontal Progress", 20 | component: HorizontalProgress, 21 | }, 22 | ]; 23 | 24 | export default formCollections; 25 | -------------------------------------------------------------------------------- /tailwind_components/forms/multi_form_horizontal_progress.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const horizontalProgress = stripIndent` 4 |
5 |
6 |
7 |
10 | 16 | 21 | 22 |
23 |
26 | Description 1 27 |
28 |
29 |
32 |
33 |
34 |
35 |
38 | 2 39 |
40 |
43 | Description 2 44 |
45 |
46 |
47 |
48 |
49 |
50 |
53 | 3 54 |
55 |
58 | Description 3 59 |
60 |
61 |
62 |
63 | `; 64 | 65 | export default horizontalProgress; 66 | -------------------------------------------------------------------------------- /tailwind_components/forms/radio_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const Radio_button = stripIndent` 4 |
5 |
6 |
7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 | `; 21 | 22 | export default Radio_button; 23 | -------------------------------------------------------------------------------- /tailwind_components/forms/search_input_form.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const searchInput = stripIndent` 4 |
5 |
6 |
7 | 8 |
9 | 12 | 13 | 14 |
15 |
16 |
17 | `; 18 | 19 | export default searchInput; 20 | -------------------------------------------------------------------------------- /tailwind_components/forms/simple_input_form.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const inputForm = stripIndent` 4 |
7 |
8 |
9 | 15 | 18 | 21 | 22 |
23 | 29 |
30 | 31 | 40 |
41 | `; 42 | 43 | export default inputForm; 44 | -------------------------------------------------------------------------------- /tailwind_components/forms/slider_input_form.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const slider_input_form = stripIndent` 4 |
5 |
6 | 11 | 12 |
13 |
14 | 19 | 27 |
28 |
29 | `; 30 | 31 | export default slider_input_form; 32 | -------------------------------------------------------------------------------- /tailwind_components/forms/test_file.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const test = stripIndent`
4 |
5 |

6 | Ready to dive in? 7 | Start your free trial today. 8 |

9 |
10 |
11 | 14 | Get started 15 | 16 |
17 |
18 | 21 | Learn more 22 | 23 |
24 |
25 |
26 |
`; 27 | 28 | export default test; 29 | -------------------------------------------------------------------------------- /tailwind_components/forms/toggle_switch.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const ToggleSwitch = stripIndent` 4 |
5 | 8 | 9 | 21 |
22 | `; 23 | 24 | export default ToggleSwitch; 25 | -------------------------------------------------------------------------------- /tailwind_components/navbars/center_dropdown_navbar.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const centerDropdownNav = stripIndent` 4 | 5 |
6 | 111 | 112 |

113 | Kindly make the codepen to 0.5x size to get the feel of navbar 114 |

115 |
116 | 130 | `; 131 | 132 | export default centerDropdownNav; 133 | -------------------------------------------------------------------------------- /tailwind_components/navbars/collection.js: -------------------------------------------------------------------------------- 1 | import animated_navbar from "./animated_navbar"; 2 | import mobile_nav_icons from "./mobile_nav_icons"; 3 | import mobile_nav_dropdown from "./mobile_nav_dropdown"; 4 | import standard_mobile_navbar from "./standard_mobile_navbar"; 5 | import searchNav from "./search_navbar"; 6 | import standardLogoNav from "./standard_logo_navbar"; 7 | import centerDropdownNav from "./center_dropdown_navbar"; 8 | import navbarSocialIcon from "./navbar_social_icons"; 9 | import hovering_navbar from "./hover_navbar"; 10 | 11 | const navbarCollections = [ 12 | {componentName: "Standard Logo Navbar", component: standardLogoNav}, 13 | {componentName: "Animated Navbar", component: animated_navbar}, 14 | {componentName: "Mobile NavBar Icons", component: mobile_nav_icons}, 15 | {componentName: "Standard Mobile Navbar", component: standard_mobile_navbar}, 16 | {componentName: "Search Navbar", component: searchNav}, 17 | {componentName: "Center Dropdown Navbar", component: centerDropdownNav}, 18 | {componentName: "Navbar Social Icons", component: navbarSocialIcon}, 19 | {componentName: "Hovering Navbar", component: hovering_navbar}, 20 | ]; 21 | 22 | export default navbarCollections; 23 | -------------------------------------------------------------------------------- /tailwind_components/navbars/mobile_nav_dropdown.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const mobile_nav_dropdown = stripIndent` 4 |
5 |
6 | 7 |

Brand

8 | 51 |
52 |
53 | `; 54 | 55 | export default mobile_nav_dropdown; 56 | -------------------------------------------------------------------------------- /tailwind_components/navbars/search_navbar.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const searchNav = stripIndent` 4 |
5 | 92 |
93 | `; 94 | 95 | export default searchNav; 96 | -------------------------------------------------------------------------------- /tailwind_components/navbars/standard_logo_navbar.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const standardLogoNav = stripIndent` 4 | 5 | 6 | 7 | 8 | 9 | 84 | 85 | 101 | 102 | `; 103 | export default standardLogoNav; 104 | -------------------------------------------------------------------------------- /tailwind_components/navbars/standard_mobile_navbar.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const standardMobileNavbar = stripIndent` 4 | 116 | `; 117 | 118 | export default standardMobileNavbar; 119 | -------------------------------------------------------------------------------- /tailwind_components/navbars/test_file.jsx: -------------------------------------------------------------------------------- 1 | import { stripIndent } from "react-codepen-prefill-embed"; 2 | 3 | const test = stripIndent`
4 |
5 |

6 | Ready to dive in? 7 | Start your free trial today. 8 |

9 |
10 |
11 | 14 | Get started 15 | 16 |
17 |
18 | 21 | Learn more 22 | 23 |
24 |
25 |
26 |
`; 27 | 28 | export default test; 29 | -------------------------------------------------------------------------------- /tailwind_components/pricing_cards/collection.js: -------------------------------------------------------------------------------- 1 | import standardPricingCard from "./standard_pricing.jsx"; 2 | import verticalPricing from "./vertical_pricing.jsx"; 3 | import smallPricingCard from "./small_pricing_card.jsx"; 4 | import pricingCardRibbon from "./pricing_card_ribbon.jsx"; 5 | import pricingCardWithButton from "./pricing_with_button"; 6 | const pricingCardsCollections = [ 7 | {componentName: "Standard Pricing Card", component: standardPricingCard}, 8 | {componentName: "Vertical Pricing Card", component: verticalPricing}, 9 | {componentName: "Small Pricing Card", component: smallPricingCard}, 10 | {componentName: "Pricing Card with Ribbon", component: pricingCardRibbon}, 11 | {componentName: "Pricing Card with Button", component: pricingCardWithButton}, 12 | ]; 13 | 14 | export default pricingCardsCollections; 15 | -------------------------------------------------------------------------------- /tailwind_components/pricing_cards/small_pricing_card.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const smallPricingCard = stripIndent` 4 |
5 |
8 |
11 |

12 | VK Tailwind Bootsrap Organize across all apps by hand 13 |

14 |

Free

15 |

16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt 17 | consectetur in, soluta illum,... 18 |

19 |
20 |

From

21 |

$1

22 |
23 |
24 |
25 |
26 | `; 27 | 28 | export default smallPricingCard; 29 | -------------------------------------------------------------------------------- /tailwind_components/pricing_cards/standard_pricing.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const samplePricingCard = stripIndent` 4 |
5 |
6 |
7 |
8 |

STANDARD

9 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam quae repellendus ...

10 |
11 |
12 |
13 |
4
14 |
15 |

$

16 |

Per Month

17 |
18 |
19 | 20 | 21 |
22 |
23 |
24 |
25 | `; 26 | 27 | export default samplePricingCard; 28 | -------------------------------------------------------------------------------- /tailwind_components/pricing_cards/vertical_pricing.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const verticalPricing = stripIndent` 4 |
5 |
8 |
9 |
12 | 20 | 25 | 26 |
27 |
Standard
28 |

29 | VK Tailwind Bootsrap 30 |

31 | 32 |
33 |

6

34 |
35 | 43 | 46 | 47 |

Per Month

48 |
49 |
50 |

51 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt 52 | consectetur in, soluta illum,... 53 |

54 | 59 |
60 |
61 |
62 | `; 63 | export default verticalPricing; 64 | -------------------------------------------------------------------------------- /tailwind_components/store_buttons/amazon_store_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const amazonstoreButton = stripIndent` 4 | 5 | 9 | 10 | 11 |
12 |

13 | These store buttons are clones and store images are taken from font-awesome 14 | (no copyright issue 🙌) 15 |

16 |
19 |
20 |
21 | 32 |
33 |
34 | 48 |
49 |
50 |
51 |
52 | `; 53 | 54 | export default amazonstoreButton; 55 | -------------------------------------------------------------------------------- /tailwind_components/store_buttons/apple_store_button1.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const appleStoreButton1 = stripIndent` 4 | 5 | 6 | 7 |
8 |

9 | These store buttons are clones and store images are taken from font-awesome 10 | (no copyright issue 🙌) 11 |

12 |
13 | 14 | 15 | Download on the
App Store

16 | 17 |
18 |
19 | 20 | 21 | Download on the
App Store

22 | 23 |
24 |
25 | `; 26 | 27 | export default appleStoreButton1; 28 | -------------------------------------------------------------------------------- /tailwind_components/store_buttons/collection.js: -------------------------------------------------------------------------------- 1 | import amazonStoreButton from "./amazon_store_button"; 2 | import googleStoreButton from "../store_buttons/google_store_button"; 3 | import windowStoreButton from "./windows_store_button"; 4 | import appleStoreButton1 from "./apple_store_button1.jsx"; 5 | 6 | const storeButtonCollections = [ 7 | {componentName: "Amazon Store Button", component: amazonStoreButton}, 8 | {componentName: "Google Store Button", component: googleStoreButton}, 9 | {componentName: "Windows Store Button", component: windowStoreButton}, 10 | {componentName: "Apple Store Button", component: appleStoreButton1}, 11 | ]; 12 | 13 | export default storeButtonCollections; 14 | -------------------------------------------------------------------------------- /tailwind_components/store_buttons/google_store_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const googlestorebutton = stripIndent` 4 | 5 | 9 | 10 | 11 |
12 |

13 | These store buttons are clones and store images are taken from font-awesome 14 | (no copyright issue 🙌) 15 |

16 |
19 |
20 |
21 | 32 |
33 |
34 | 48 |
49 |
50 |
51 |
52 | `; 53 | 54 | export default googlestorebutton; 55 | -------------------------------------------------------------------------------- /tailwind_components/store_buttons/windows_store_button.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const windowstorebutton = stripIndent` 4 | 5 | 9 | 10 | 11 |
12 |

13 | These store buttons are clones and store images are taken from font-awesome 14 | (no copyright issue 🙌) 15 |

16 |
19 |
20 |
21 | 32 |
33 |
34 | 48 |
49 |
50 |
51 |
52 | `; 53 | 54 | export default windowstorebutton; 55 | -------------------------------------------------------------------------------- /tailwind_components/testimonial_cards/collection.js: -------------------------------------------------------------------------------- 1 | import testimonialCard from "./vertical_testimonial"; 2 | import photoStarTestimonial from "./photo_star_testimonial"; 3 | import horizontalTestimonial from "./horizontal_testimonial"; 4 | import socialLinkTestimonial from "./social_link_testimonial" 5 | 6 | const testimonialCardsCollections = [ 7 | {componentName: "Vertical testimonial card", component: testimonialCard}, 8 | {componentName: "Photo Star Testimonial", component: photoStarTestimonial}, 9 | {componentName: "Horizontal Testimonial", component: horizontalTestimonial}, 10 | {componentName: "Social Link Testimonial", component: socialLinkTestimonial}, 11 | ]; 12 | 13 | export default testimonialCardsCollections; 14 | -------------------------------------------------------------------------------- /tailwind_components/testimonial_cards/social_link_testimonial.jsx: -------------------------------------------------------------------------------- 1 | import {stripIndent} from "react-codepen-prefill-embed"; 2 | 3 | const socialLinkTestimonial = stripIndent` 4 |
5 |
8 |
9 |
10 | 13 |
14 |
    15 |

    SUSAVI

    16 |
      17 |

      Production

      18 |
    19 |
      20 |
      21 | 25 |
      26 |
      27 | 31 |
      32 |
      33 | 37 |
      38 |
    39 |
40 |
41 |
42 |
43 | `; 44 | 45 | export default socialLinkTestimonial; 46 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | module: { 5 | rules: [ 6 | { 7 | test: /\.(png|jpe?g|gif|html)$/i, 8 | use: [ 9 | { 10 | loader: "file-loader", 11 | }, 12 | ], 13 | }, 14 | ], 15 | }, 16 | }; 17 | --------------------------------------------------------------------------------