Interactive “Resize Me” Demo ✅

by tailkits

HTML

<!-- Include Tailwind via CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<div id="demo" class="mt-6 mx-auto rounded-lg border-4 border-gray-300 p-8 text-center
  bg-red-200 sm:bg-green-200 md:bg-blue-200 lg:bg-yellow-200 xl:bg-purple-200 2xl:bg-pink-200
  transition-colors duration-300">
  <p class="font-mono text-xl">Viewport width: <span id="width">?</span>px</p>
  <p class="mt-2">Resize your browser to see the background change!</p>
</div>

<script>
  const widthEl = document.getElementById('width');
  function updateWidth() {
    widthEl.textContent = window.innerWidth;
  }
  window.addEventListener('resize', updateWidth);
  updateWidth();
</script>

CSS

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

JavaScript

<!-- 3️⃣  Tiny script -->
<script>
  // Tailwind size utilities in order
  const sizes = [
    'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl',
    'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl',
    'text-6xl', 'text-7xl', 'text-8xl', 'text-9xl'
  ];

  const range   = document.getElementById('fontRange');
  const label   = document.getElementById('sizeLabel');
  const preview = document.getElementById('previewText');

  function update() {
    // remove any previous size class, then apply the new one
    preview.classList.remove(...sizes);
    const cls = sizes[parseInt(range.value, 10)];
    preview.classList.add(cls);
    label.textContent = cls;
  }

  range.addEventListener('input', update);
  update(); // initialize on load
</script>