I am trying to understand TailwindCSS and currently trying to make **responsive employee card**. But the problem i have recently encountered is that my card seems responsive for all breakpoints of tailwind but **only when the height is 900.** Whenever i increase the height i get more space at the bottom and whenever i shrink the window height the contents get overflowed.

**How do i make it responsive for all heights and widths?**

[**Works perfectly only when the height is 900 and within Tailwind Breakpoint Width Range**]  

Here is the [Live Site Preview](https://mustakabsarkhan.github.io/employee_card/)   

Here is the [Github Repo-Code](https://github.com/MustakAbsarKhan/employee_card)

Code -

```
<body class="flex justify-center items-center h-screen w-full">

<div class="main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20">
    <div class="container bg-slate-200 w-8/12 h-4/6 flex flex-col rounded-lg">
        <div class="title py-4 px-5 font-bold">The title of the card here</div>

        <div class="review-date grid grid-cols-2 bg-white w-full h-1/6 items-center p-2 px-4 text-center">
            <div class="review flex justify-center items-center text-xs bg-orange-700 text-white font-semibold p-1 sm:w-10/12 sm:py-1 rounded-full uppercase select-none">
                UNDER REVIEW
            </div>
            <div class="date flex justify-end items-center text-xs font-semibold select-none">
                May 14, 1988
            </div>
        </div>
        <div class="comment bg-white border-t border-slate-100 w-full">
            <p class="commentdata bg-slate-200 text-left text-sm p-3 m-4 rounded-lg select-none">Here is a short comment about this employee.</p>
        </div>

        <div class="employeedata px-4 pt-2 pb-4">
            <div class="employee uppercase">
                <label class="text-xs font-bold text-slate-600">Employee</label>
            </div>
            <div class="employeebar flex mt-2">
                <div class="employee-logo bg-sky-800 text-white text-xs font-bold w-10 h-10 rounded-full flex justify-center items-center">VG</div>
                <div class="employee-info flex flex-col ml-4">
                    <div class="employee-name text-sm font-bold flex pb-0.5">Mohammad Mustak</div>
                    <div class="employee-title text-xs text-slate-600">Web Developer</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

```