index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- <script src="script.js"></script> -->
</head>
<body>
    <div class="w-[100vw] h-[100vh] flex flex-col items-center justify-center bg-sky-300 gap-10">
        <div class="font-medium text-[20px]">INCREMENT AND Decerement</div>
        <div class="flex flex-row bg-white text-[25px] rounded-sm gap-12 p-3 px-5">
            <button onclick="dec()" class="border-r-2 ">
                <i class="fa-solid fa-minus"></i>
            </button>
            <div id="counter">
                0
            </div>
            <button onclick="inc()" class="border-l-2">
                <i class="fa-solid fa-plus"></i>
            </button>
        </div>
    </div>
    <script src="script.js"></script>
    <script src="https://kit.fontawesome.com/58a810656e.js" crossorigin="anonymous"></script>
</body>
</html>