Simple web application made with React.js styled with TailwindCSS. Instead of clasical header I have created this one that looks like Apple's dynamic island on new iPhones. It expands when user hovers over it and displays additional information or controls. I have also added animations, shortcuts, styling and login form, that doesnt have the database implemented yet.
CTRL + CMD + T - MacOS
CTRL + B - Windows
You can easily implement this into your project by coyping the component and then just styling the whole component with given options. Also you need to have TailwindCSS installed for it to work
<div className="pt-4 sticky top-0 z-10 ">
<DynamicIsland/>
</div>You can find the source code for DynamicIsland here
- Dynamic island header
- Dark mode
- Keyboard shortcut to toggle on/off dark mode
- Scroll Progress bar (you can find source code for it here)
- scroll down button
- login and register form (only styling)
- The header displays all hidden element when hovering away from browser (for example to menubar)
This project is licensed under the Apache license 2.0 Link to LICENSE.md
- Ondrej Losensky
- Link to React: https://reactjs.org/
- Link to Tailwind CSS: https://tailwindcss.com/
- Link to Icons8.com https://icons8.com/
- Created on: 19.2.2024
1.1.2.