diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7e1e4d4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,49 @@
+<!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>Calculator</title>
+    <style>
+
+        #calculator button {
+            align-self: center;
+            text-align: center;
+            font-size: 10vh;
+            border-radius: 20%;
+            background-color: brown;
+            margin-right: 2vw;
+            margin-left: 2vw;
+        }
+
+    </style>
+</head>
+
+<body class="flex h-screen justify-center items-start m-4">
+    <div id='calculator' class="w-screen grid grid-cols-4 gap-3">
+        <div id="screen" class="p-8 text-white bg-black col-span-4 row-span-4 h-[20vh] rounded-xl">
+            RESULT
+        </div>
+
+        <button class="justify-center bg-slate-300">1</button>
+        <button>2</button>
+        <button>3</button>
+        <button>+</button>
+
+        <button>4</button>
+        <button>5</button>
+        <button>6</button>
+        <button>-</button>
+
+        <button>7</button>
+        <button>8</button>
+        <button>9</button>
+        <button>=</button>
+
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e69de29
