Home
Augustin
Incense Meditation

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 CSS v3. It is responsive. similar terms for this example are popup,dialog

Modal

Author Augustin

421

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

Reward modal
A reward modal with refferal link

Author:
ehmasuk

1 month ago

104
Error popup modal

Author:
Odessa Young

2 years ago

16k
Confirmation model

Author:
Mr Robot

3 years ago

13k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
Blurred Background Modal

Author:
Prem..

2 years ago

13.3k
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

8 months ago

817
Minimalistic Modal with Native Functionality
This modal is built using HTML and Tailwind CSS without requiring JavaScript for basic functionality. It leverages the native <dialog> element, allowing users to open the modal by clicking a button and close it by clicking the ❌ button or clicking outside the modal. The design is clean and responsive, ensuring a smooth user experience with minimal code.

Author:
SHARIFUL ISLAM

8 months ago

1.6k
Sign in Modal
Login to continue modal

Author:
Anonymous

1 year ago

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

Author:
Anonymous

7 months ago

498
Modal with Tailwind CSS

Author:
EliteAI Tools

10 months ago

1.5k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

5.1k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

1 year ago

6.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components