Incense Meditation

material used to produce a fragrant odor when burned.

This tailwind example is contributed by Augustin, on 22-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Modal

Author Augustin

Tailwind v3.4 1.3k 7

Fork Fullscreen

</head>
<body class="bg-amber-50 flex items-center justify-center h-screen text-center">

<div class="bg-white p-8 rounded-2xl shadow-xl max-w-md w-full space-y-4">
    <h1 class="text-3xl font-semibold text-amber-700">🕯️ Incense Meditation</h1>
    <p class="text-gray-600">Let the fragrance fill your mind. Timer ends with peace.</p>
    
    <div id="timer" class="text-5xl font-mono text-amber-600">05:00</div>
    
    <button onclick="startTimer()" class="mt-4 px-6 py-2 bg-amber-600 text-white rounded-xl hover:bg-amber-700 transition">
      Start Incense
    </button>
  </div>

function startTimer() {
      clearInterval(timerInterval);
      let duration = 5 * 60; // 5 minutes
      const display = document.getElementById('timer');

timerInterval = setInterval(() => {
        const minutes = Math.floor(duration / 60);
        const seconds = duration % 60;
        display.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        if (--duration < 0) {
          clearInterval(timerInterval);
          display.textContent = "🧘 Done";
          alert("Your incense session is complete. Breathe in peace.");
        }
      }, 1000);
    }
  </script>

Related Examples

Confirmation modal with blurred background

Orion.c

3 years ago

14.8k
Responsive modal popup

I.P. Leroy

3 years ago

14.9k
PROCESS SELECTOR
Created was one shot generated using https://inspi.me

yogourt

8 months ago

468
iOS 16 Popup
iOS 16 Popup — Alpine.js

Omer fils ELENGA

9 months ago

452
Error popup modal

Jindřich Stoklasa

1 year ago

2.5k
Tailwind CSS Modal

Krishna Gudpalle

4 years ago

12.8k
Confirmation model

Mr Robot

4 years ago

13.6k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2k
Modal with background overlay
Reduce the opacity of the page content to bring the focus to the modal.

Abigail

3 years ago

12.6k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

2 years ago

18.3k
Login screen
Reward login screen

ehmasuk

1 year ago

867
Confirmation Dialog Box

Anonymous

3 years ago

17.2k