Learn Tailwind-css - 10 Code Examples & CST Typing Practice Test
Tailwind CSS is a utility-first CSS framework that provides low-level, composable classes to build custom designs without writing custom CSS. It emphasizes speed, consistency, and developer productivity.
View all 10 Tailwind-css code examples →
Tailwind CSS Simple CounterTailwind CSS Counter with StepTailwind CSS Counter with Min/MaxTailwind CSS Auto Increment CounterTailwind CSS Counter with Double IncrementTailwind CSS Counter with Even/Odd IndicatorTailwind CSS Counter with LocalStorageTailwind CSS Counter with Color ThemesTailwind CSS Animated CounterTailwind CSS Counter with Progress Bar
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.
Frequently Asked Questions about Tailwind-css
What is Tailwind-css?
Tailwind CSS is a utility-first CSS framework that provides low-level, composable classes to build custom designs without writing custom CSS. It emphasizes speed, consistency, and developer productivity.
What are the primary use cases for Tailwind-css?
Modern web applications. Design systems and component libraries. Rapid prototyping. Landing pages and marketing websites. Custom dashboards and admin panels
What are the strengths of Tailwind-css?
High productivity and fast prototyping. Consistency across projects. No need to write most custom CSS. Small final CSS bundle with Purge. Works seamlessly with component frameworks
What are the limitations of Tailwind-css?
Learning curve for beginners used to traditional CSS. Verbose HTML with many utility classes. Design logic spread across markup. Requires build process for optimal CSS size. Not opinionated: requires designer judgment
How can I practice Tailwind-css typing speed?
CodeSpeedTest offers 10+ real Tailwind-css code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.