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

Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

2 months ago

86
images games
images games

Bonimater

1 year ago

722
Animated modal with Tailwind Css and alpinejs

Michael Andreuzza

2 years ago

3.8k
Confirmation model

Mr Robot

4 years ago

13.6k
Simple Alret Modal
Minimal Modal

_Amar_

4 years ago

12.7k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

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

Ti To

2 years ago

9k
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Indra

1 year ago

1.1k
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Sameer Sultana

3 years ago

15.8k
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k
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

Ti To

2 years ago

7.8k
Modal
Responsive model

inbarajan P

2 years ago

3.7k