Develop

Dialog (Modal)
Dialog (Modal)

Created: Dialog box open on click

+ html
+ tailwind
+ headless ui
+ react

View Code: Dialog (Modal)

Switch (Toggle)
Switch (Toggle)

Created: A toggle between enabled and not enabled.

+ html
+ tailwind
+ headless ui
+ react

View Code: Switch (Toggle)

Testimonials
Testimonials

Created: Four testimonial designs: basic, vertical, horizontal, quote bubble

+ html
+ tailwind

View Code: Testimonials

Cards
Cards

Created: Three cards: basic, horizontal, and vertical

+ html
+ tailwind

View Code: Cards

Buttons
Buttons

Created: Five Button Types: tags, outline, sizes, grid

+ html
+ tailwind

View Code: Buttons

Badges
Badges

Created: 5 Badges: inline, pill, button, corner, and indicator

+ html
+ tailwind

View Code: Badges

Alert Boxes
Alert Boxes

Created: Alert box headers, content, divider, icons

+ html
+ tailwind

View Code: Alert Boxes

Circles
Circles

Created: Four Circles: simple, quote, image, notification

+ html
+ tailwind

View Code: Circles

3D Button
3D Button

Created: 3D keyboard-like button

+ html
+ tailwind

View Code: 3D Button

Code Cards

Image Change on Hover
Image Change on Hover

Created: Avatar's eyes will close while hovering.

+ html
+ css
+ javascript
Print Page on Click
Print Page on Click

Created: Print options will appear after clicking the button.

+ html
+ css
+ javascript
Background Color Change
Background Color Change

Created: Background color change using CSS.

+ html
+ css
Alert Box on Load
Alert Box on Load

Created: An alert box will appear after the page loads.

+ html
+ javascript
+ tailwind
Alert Box on Click
Alert Box on Click

Created: An alert box will pop-up after clicking the button.

+ html
+ javascript
+ tailwind
Image Change on Hover
Image Change on Hover

Created: Avatar's eyes will close while hovering.

+ html
+ css
Alert Box on Submit
Alert Box on Submit

Created: Alert box with name entered when clicking Submit.

+ html
+ javascript
+ tailwind
Countdown
Countdown

Created: A countdown to my birthday!

+ html
+ javascript
+ tailwind

View Code: Countdown

Random Number
Random Number

Created: Generate a random number each time you refresh the page.

+ html
+ javascript
+ tailwind

View Code: Random Number

Image Change on Click
Image Change on Click

Created: Toggle the Avatar's eyes open and close.

+ html
+ javascript
+ tailwind
Solving Formulas
Solving Formulas

Created: Conversion from milliliters to ounces.

+ html
+ javascript
+ tailwind

View Code: Solving Formulas

Text Change on Click
Text Change on Click

Created: Answer is shown after clicking button.

+ html
+ javascript
+ tailwind
Background Change
Background Change

Created: A background image using CSS.

+ html
+ css

This portfolio was designed and developed with 🖤 by me using Next.js and Tailwind CSS.