React Tailwind Components

A react app used to demonstrate some common components using tailwind css without any external Components library.

Note:

• This project uses Vitejs as the front end build tool (i.e., module bundler).
• The project was bootstrapped using the command npm init vite

Table of Contents

• Components
• Tools and Technologies
• Installation and setup
• Useful Links
• Contact

Components

• Accordion
• Alerts
• Animated Form
• Animated Multilevel Dropdown
• Autocomplete
• Breadcrumbs
• Carousel
• Checkbox
• Chips
• Circular Menu
• Circular Rotating List
• Command Palette
• Content Editable
• Datepicker
• Drawer
• Dropdown
• FAQ
• Footer
• Form
• Image Hover effects
• Image Uploader
• List hover effects
• Loader
• Masonry
• Mega Menu
• Modal
• Multiselect Menu
• Multistep Form
• Navbar
• Notification Badges
• Popconfirm
• Popover
• Pricing
• Progress
• Radio button
• Rating
• Resizable
• Ribbon
• Ripple
• Scroll Indicator
• Scrollspy
• Scroll back to top button
• Select Menu
• Sidebar
• Sidebar with Submenus
• Slider
• Sortable List
• Speed Dial
• Stats Section
• Switch
• Table
• Tabs
• Testimonials
• Timeline
• Toast
• Tooltip
• Tree View
• Typewriter

Tools and Technologies

• HTML
• CSS
• Javascript
• Tailwind CSS
• Node.js
• React

Installation and Setup

1. Install dependencies

   npm install

2. Start the application

   npm run dev

3. Go to http://localhost:3000

Useful Links

• This project

  • Github Repo: https://github.com/aayush301/React-tailwind-components

• References

  • Tailwind Elements: https://tailwind-elements.com/
  • Tailwind Components: https://tailwindcomponents.com/
  • Material UI: https://mui.com
  • Ant Design: https://ant.design/components/overview/

• Official Docs

  • Tailwind CSS docs: https://tailwindcss.com/
  • Reactjs docs: https://reactjs.org/docs/getting-started.html
  • npmjs docs: https://docs.npmjs.com/
  • Github docs: https://docs.github.com/en/get-started/quickstart/hello-world

• Youtube tutorials

  • Tailwind CSS: https://youtu.be/lZp4salRFFc
  • React: https://youtu.be/EHTWMpD6S_0

• Download links

  • Nodejs download: https://nodejs.org/
  • VS Code download: https://code.visualstudio.com/

• Cheatsheets

  • Git cheatsheet: https://education.github.com/git-cheat-sheet-education.pdf
  • VS Code keyboard shortcuts: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
  • CSS Selectors Cheatsheet: https://frontend30.com/css-selectors-cheatsheet/

Contact

For any queries or suggestions, contact at:

• Email: [email protected]
• Linkedin: https://www.linkedin.com/in/aayush12/