https://github.com/danialeyz/spa-app

This is a single page application (SPA) project made with DaisyUI and TailwindCSS, two CSS frameworks that offer multiple themes and interactive features.
https://github.com/danialeyz/spa-app

daisyui dark-mode single-page-app single-page-applications spa tailwindcss theme vanilla-javascript

Last synced: 4 days ago
JSON representation

This is a single page application (SPA) project made with DaisyUI and TailwindCSS, two CSS frameworks that offer multiple themes and interactive features.

• Host: GitHub
• URL: https://github.com/danialeyz/spa-app
• Owner: danialeyz
• License: mit
• Created: 2023-10-29T01:05:00.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-09-28T09:05:18.000Z (4 months ago)
• Last Synced: 2024-12-09T07:37:08.413Z (2 months ago)
• Topics: daisyui, dark-mode, single-page-app, single-page-applications, spa, tailwindcss, theme, vanilla-javascript
• Language: CSS
• Homepage: https://shopping-app-spa.vercel.app/
• Size: 5.56 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SPA Project with DaisyUI and TailwindCSS 🔥

This is a single page application (SPA) project made with DaisyUI and TailwindCSS, two CSS frameworks that offer multiple themes and interactive features. The project includes seven different themes and three different pages that showcase the capabilities of DaisyUI and TailwindCSS.

![](https://github.com/danialeyz/SPA-app/blob/156d261ea01e67e6f28d5ffa4bd6287533826f5d/Screen%20Shot%201402-08-09%20at%2016.06.57.png)

## Pages

- Landing

- Updates

- Contact With us

- Common questions

### Home Page

The home page features a hero section with a call-to-action button that leads to the services page. The page also includes a section with three cards that highlight the main features of the application.

### Services Page

The services page showcases the different services offered by the application. Each service is presented in a card with an icon, a title, and a description. The page also includes a pricing table that compares the different plans available.

### Contact Page

The contact page includes a form that allows users to send a message to the support team. The form includes fields for name, email, subject, and message. There is also a map that shows the location of the company.

## Themes

The project includes seven different themes that can be easily switched using the toggle button in the header. The themes are:

![](https://github.com/danialeyz/SPA-app/blob/156d261ea01e67e6f28d5ffa4bd6287533826f5d/Screen%20Shot%201402-08-09%20at%2016.07.29.png)

![](https://github.com/danialeyz/SPA-app/blob/156d261ea01e67e6f28d5ffa4bd6287533826f5d/Screen%20Shot%201402-08-09%20at%2016.07.43.png)

- Light

- Dark

- Cyberpunk

- Halloween

- Cretro

- Valentine's Day

- ...

Each theme has its own color palette and design elements that match the corresponding holiday or event.

## Interactive Features

The project includes several interactive features that enhance the user experience. These features include:

- A responsive navigation menu that collapses on smaller screens

- A toggle button to switch between themes

- Hover effects on buttons and links

- Smooth scrolling to anchor links

- A form validation script that checks for errors before submitting

- Tailwind animation for adding animations to elements

## Conclusion

This SPA project made with DaisyUI and TailwindCSS offers a modern and engaging user interface with multiple themes and interactive features. The three different pages showcase the versatility of DaisyUI and TailwindCSS and how they can be used to create beautiful and functional applications.