In this tutorial we will create calculator UI using Tailwind CSS. Also we will covers various styles for a Tailwind CSS calculator and guides you through building a fully functional calculator using Tailwind CSS and JavaScript, Alpinejs.
Design a calculator UI using Tailwind CSS
<div class="bg-gray-200 min-h-screen flex items-center justify-center">
<div class="bg-white shadow-lg rounded-lg p-6 w-80">
<div class="mb-4">
<input type="text" readonly class="w-full bg-gray-100 text-right text-xl px-2 py-3 rounded-lg focus:outline-none"
value="0">
</div>
<div class="grid grid-cols-4 gap-4">
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">7</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">8</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">9</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none">/</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">4</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">5</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">6</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none">*</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">1</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">2</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">3</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none">-</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">0</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">.</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none">=</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none">+</button>
</div>
</div>
</div>
calculator ui tailwind css
Build a functional calculator using Tailwind CSS and JavaScript
<body class="bg-gray-200 min-h-screen flex items-center justify-center">
<div class="bg-white shadow-lg rounded-lg p-6 w-80">
<div class="mb-4">
<input type="text" id="display" readonly
class="w-full bg-gray-100 text-right text-xl px-2 py-3 rounded-lg focus:outline-none" value="0" />
</div>
<div class="grid grid-cols-4 gap-4">
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('7')">
7
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('8')">
8
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('9')">
9
</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('/')">
/
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('4')">
4
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('5')">
5
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('6')">
6
</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('*')">
*
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('1')">
1
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('2')">
2
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('3')">
3
</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('-')">
-
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('0')">
0
</button>
<button class="bg-gray-200 text-xl font-bold px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('.')">
.
</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none"
onclick="calculate()">
=
</button>
<button class="bg-yellow-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none"
onclick="appendToDisplay('+')">
+
</button>
</div>
<div class="mt-4">
<button class="bg-red-500 text-xl font-bold text-white px-4 py-2 rounded-lg focus:outline-none"
onclick="deleteLast()">
DEL
</button>
</div>
</div>
<script>
function appendToDisplay(value) {
document.getElementById("display").value += value;
}
function calculate() {
try {
document.getElementById("display").value = eval(
document.getElementById("display").value
);
} catch (error) {
document.getElementById("display").value = "Error";
}
}
function deleteLast() {
var display = document.getElementById("display");
display.value = display.value.slice(0, -1);
}
</script>
</body>
tailwind functional calculator and javascript
Build a functional responsive calculator using Tailwind CSS and AlpineJS
<body class="bg-gray-200 h-screen flex items-center justify-center">
<div x-data="calculator()" class="bg-white p-12 rounded shadow-md">
<div class="mb-4">
<input x-model="expression" type="text" class="w-full p-2 border border-gray-300 rounded">
</div>
<div class="grid grid-cols-4 gap-2">
<button @click="appendToExpression('7')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">7</button>
<button @click="appendToExpression('8')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">8</button>
<button @click="appendToExpression('9')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">9</button>
<button @click="appendToExpression('/')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">/</button>
<button @click="appendToExpression('4')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">4</button>
<button @click="appendToExpression('5')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">5</button>
<button @click="appendToExpression('6')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">6</button>
<button @click="appendToExpression('*')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">*</button>
<button @click="appendToExpression('1')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">1</button>
<button @click="appendToExpression('2')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">2</button>
<button @click="appendToExpression('3')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">3</button>
<button @click="appendToExpression('-')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">-</button>
<button @click="appendToExpression('0')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">0</button>
<button @click="appendToExpression('.')" class="text-xl px-4 py-2 rounded-lg focus:outline-none">.</button>
<button @click="calculate()"
class="text-xl font-bold px-4 py-2 rounded-lg focus:outline-none bg-blue-500 text-white">=</button>
<button @click="appendToExpression('+')"
class="text-xl font-bold px-4 py-2 rounded-lg focus:outline-none">+</button>
</div>
</div>
<script>
function calculator() {
return {
expression: '',
appendToExpression(value) {
this.expression += value;
},
calculate() {
try {
this.expression = String(eval(this.expression));
} catch (error) {
this.expression = 'Error';
}
}
};
}
</script>
</body>
tailwind functional calculator and alpinejs
