Learn TAILWIND-CSS with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
Tailwind CSS Simple Counter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind Counter</title>
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div id="container" class="p-8 bg-white rounded shadow text-center">
<h2 class="text-2xl font-bold mb-4">Counter: <span id="count">0</span></h2>
<div class="flex justify-center gap-2 mb-4">
<button id="increment" class="px-4 py-2 bg-blue-500 text-white rounded">+</button>
<button id="decrement" class="px-4 py-2 bg-red-500 text-white rounded">-</button>
<button id="reset" class="px-4 py-2 bg-gray-500 text-white rounded">Reset</button>
</div>
<button id="theme-btn" class="px-4 py-2 bg-yellow-400 text-black rounded">Switch Theme</button>
</div>
<script>
let count=0,isDark=false;const c=document.getElementById('count'),box=document.getElementById('container');
function update(){c.textContent=count;box.classList.toggle('bg-gray-900',isDark);box.classList.toggle('text-white',isDark);box.classList.toggle('bg-white',!isDark);box.classList.toggle('text-black',!isDark);}
document.getElementById('increment').onclick=()=>{count++;update()};document.getElementById('decrement').onclick=()=>{count--;update()};document.getElementById('reset').onclick=()=>{count=0;update()};document.getElementById('theme-btn').onclick=()=>{isDark=!isDark;update()};update();
</script>
</body>
</html>
Basic counter with theme toggle using Tailwind CSS.
2
Tailwind CSS Counter with Step
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>Tailwind Step Counter</title></head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div id="container" class="p-8 bg-white rounded shadow text-center">
<h2 class="text-2xl font-bold mb-4">Counter: <span id="count">0</span></h2>
<div class="flex justify-center gap-2 mb-4">
<button id="increment" class="px-4 py-2 bg-blue-500 text-white rounded">+5</button>
<button id="decrement" class="px-4 py-2 bg-red-500 text-white rounded">-5</button>
<button id="reset" class="px-4 py-2 bg-gray-500 text-white rounded">Reset</button>
</div>
<script>
let count=0,step=5;const c=document.getElementById('count');
document.getElementById('increment').onclick=()=>{count+=step;c.textContent=count};document.getElementById('decrement').onclick=()=>{count-=step;c.textContent=count};document.getElementById('reset').onclick=()=>{count=0;c.textContent=count};
</script>
</div></body></html>
Counter increments and decrements by 5 using Tailwind CSS buttons.
3
Tailwind CSS Counter with Min/Max
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>Tailwind Min Max Counter</title></head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="p-8 bg-white rounded shadow text-center">
<h2 class="text-2xl font-bold mb-4">Counter: <span id="count">0</span></h2>
<div class="flex justify-center gap-2 mb-4">
<button id="increment" class="px-4 py-2 bg-blue-500 text-white rounded">+</button>
<button id="decrement" class="px-4 py-2 bg-red-500 text-white rounded">-</button>
</div>
<p id="message" class="text-sm text-gray-500"></p>
<script>
let count=0,min=0,max=10;const c=document.getElementById('count'),m=document.getElementById('message');
function update(){c.textContent=count;m.textContent=count===max?'Max reached':count===min?'Min reached':'';}
document.getElementById('increment').onclick=()=>{if(count<max){count++;update()}};document.getElementById('decrement').onclick=()=>{if(count>min){count--;update()}};update();
</script>
</div></body></html>
Counter constrained between 0 and 10 with Tailwind styles.
4
Tailwind CSS Auto Increment Counter
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>Auto Counter</title></head><body class="flex items-center justify-center h-screen bg-gray-100"><div class="p-8 bg-white rounded shadow text-center"><h2 class="text-2xl font-bold mb-4">Counter: <span id="count">0</span></h2><button id="toggle" class="px-4 py-2 bg-blue-500 text-white rounded">Start</button><script>let count=0,auto=false,timer;const c=document.getElementById('count'),btn=document.getElementById('toggle');function update(){c.textContent=count;btn.textContent=auto?'Stop':'Start';}btn.onclick=()=>{auto=!auto;if(auto)timer=setInterval(()=>{count++;update()},1000);else clearInterval(timer);update()};update();</script></div></body></html>
Counter automatically increments every second using Tailwind design.
5
Tailwind CSS Counter with Double Increment
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>Double Increment</title></head><body class="flex items-center justify-center h-screen bg-gray-100"><div class="p-8 bg-white rounded shadow text-center"><h2 class="text-2xl font-bold mb-4">Counter: <span id="count">0</span></h2><div class="flex justify-center gap-2"><button id="inc1" class="px-4 py-2 bg-blue-500 text-white rounded">+1</button><button id="inc2" class="px-4 py-2 bg-green-500 text-white rounded">+2</button><button id="reset" class="px-4 py-2 bg-gray-500 text-white rounded">Reset</button></div><script>let c=0;const e=document.getElementById('count');document.getElementById('inc1').onclick=()=>{c++;e.textContent=c};document.getElementById('inc2').onclick=()=>{c+=2;e.textContent=c};document.getElementById('reset').onclick=()=>{c=0;e.textContent=c};</script></div></body></html>
Includes a button that increments by 2 using Tailwind utility classes.
6
Tailwind CSS Counter with Even/Odd Indicator
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>Even Odd Counter</title></head><body class="flex items-center justify-center h-screen bg-gray-100"><div class="p-8 bg-white rounded shadow text-center"><h2 class="text-2xl font-bold mb-4">Counter: <span id="count">0</span></h2><p id="status" class="text-gray-600 mb-4">Even</p><div class="flex justify-center gap-2"><button id="inc" class="px-4 py-2 bg-blue-500 text-white rounded">+</button><button id="dec" class="px-4 py-2 bg-red-500 text-white rounded">-</button></div><script>let count=0;const c=document.getElementById('count'),s=document.getElementById('status');function update(){c.textContent=count;s.textContent=count%2==0?'Even':'Odd';s.className=count%2==0?'text-green-600':'text-pink-600';}document.getElementById('inc').onclick=()=>{count++;update()};document.getElementById('dec').onclick=()=>{count--;update()};update();</script></div></body></html>
Displays whether count is even or odd using Tailwind text colors.
7
Tailwind CSS Counter with LocalStorage
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>LocalStorage Counter</title></head><body class="flex items-center justify-center h-screen bg-gray-100"><div class="p-8 bg-white rounded shadow text-center"><h2 class="text-2xl font-bold mb-4">Counter: <span id="count"></span></h2><div class="flex justify-center gap-2"><button id="inc" class="px-4 py-2 bg-blue-500 text-white rounded">+</button><button id="dec" class="px-4 py-2 bg-red-500 text-white rounded">-</button><button id="reset" class="px-4 py-2 bg-gray-500 text-white rounded">Reset</button></div><script>let c=parseInt(localStorage.getItem('count')||0);const e=document.getElementById('count');function u(){e.textContent=c;localStorage.setItem('count',c);}document.getElementById('inc').onclick=()=>{c++;u()};document.getElementById('dec').onclick=()=>{c--;u()};document.getElementById('reset').onclick=()=>{c=0;u()};u();</script></div></body></html>
Persists count value using localStorage.
8
Tailwind CSS Counter with Color Themes
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>Color Theme Counter</title></head><body class="flex items-center justify-center h-screen bg-gray-100"><div id="box" class="p-8 bg-white rounded shadow text-center"><h2 class="text-2xl font-bold mb-4">Counter: <span id="count">0</span></h2><div class="flex justify-center gap-2 mb-4"><button id="inc" class="px-4 py-2 bg-blue-500 text-white rounded">+</button><button id="dec" class="px-4 py-2 bg-red-500 text-white rounded">-</button></div><button id="theme" class="px-4 py-2 bg-yellow-400 rounded">Next Theme</button><script>let c=0,i=0,colors=['bg-white','bg-gray-800','bg-blue-100','bg-green-100'];const b=document.getElementById('box'),cnt=document.getElementById('count');function update(){cnt.textContent=c;b.className='p-8 rounded shadow text-center '+colors[i];}document.getElementById('inc').onclick=()=>{c++;update()};document.getElementById('dec').onclick=()=>{c--;update()};document.getElementById('theme').onclick=()=>{i=(i+1)%colors.length;update()};update();</script></div></body></html>
Cycles through multiple background color themes.
9
Tailwind CSS Animated Counter
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>Animated Counter</title></head><body class="flex items-center justify-center h-screen bg-gray-100"><div class="p-8 bg-white rounded shadow text-center"><h2 class="text-2xl font-bold mb-4 transition-transform duration-200" id="count">0</h2><div class="flex justify-center gap-2"><button id="inc" class="px-4 py-2 bg-blue-500 text-white rounded">+</button><button id="dec" class="px-4 py-2 bg-red-500 text-white rounded">-</button></div><script>let c=0;const e=document.getElementById('count');function a(){e.textContent=c;e.classList.add('scale-110');setTimeout(()=>e.classList.remove('scale-110'),150);}document.getElementById('inc').onclick=()=>{c++;a()};document.getElementById('dec').onclick=()=>{c--;a()};</script></div></body></html>
Uses Tailwind transitions for smooth animations when updating count.
10
Tailwind CSS Counter with Progress Bar
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.tailwindcss.com"></script><title>Progress Counter</title></head><body class="flex items-center justify-center h-screen bg-gray-100"><div class="p-8 bg-white rounded shadow text-center w-96"><h2 class="text-2xl font-bold mb-4">Counter: <span id="count">0</span></h2><div class="w-full bg-gray-200 h-4 rounded mb-4"><div id="bar" class="h-4 bg-blue-500 rounded transition-all duration-300" style="width:0%"></div></div><div class="flex justify-center gap-2"><button id="inc" class="px-4 py-2 bg-blue-500 text-white rounded">+</button><button id="dec" class="px-4 py-2 bg-red-500 text-white rounded">-</button></div><script>let c=0,max=10;const e=document.getElementById('count'),b=document.getElementById('bar');function u(){e.textContent=c;b.style.width=(c/max*100)+'%';}document.getElementById('inc').onclick=()=>{if(c<max)c++;u()};document.getElementById('dec').onclick=()=>{if(c>0)c--;u()};u();</script></div></body></html>
Counter includes a Tailwind-styled progress bar that fills as count increases.