Just starting out with tailwind CSS and struggling a bit with the design aspect due to my lack of CSS skills. Need some assistance troubleshooting my layout, particularly in making sure the div container stretches to fit the screen size properly.
https://i.sstatic.net/ZIyA0.png
The specific issue I'm facing is wanting the content within the div where the table resides to stretch up until the red line.
See below for the relevant code snippets:
<div className='min-h-screen bg-bgSecondary'>
<Head>
<title>{title}</title>
</Head>
{/* Top Navigation Header */}
<Header />
<Annoucement />
{/* Body Content */}
<div>
{children}
</div>
</div>
Announcement.tsx
<div>
<div className='flex w-full bg-yellow-400 shadow-bgTertiary shadow-sm px-4 py-4'>
<div className='flex flex-1 max-w-7xl mx-auto uppercase text-sm font-semibold text-gray-700 space-x-10 md:space-x-5 space-between items-center'>
<div className='flex-1'>
<p>Please refrain from <span className='underline font-bold'>sharing your password</span> to anyone.</p>
</div>
<div className='cursor-pointer' onClick={() => setShowAnnoucement(false)}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
</div>
</div>
index.tsx
<Layout>
<div className='flex max-w-7xl mx-auto'>
<div className='py-5 px-5 lg:px-3 2xl:px-0'>
<div className='text-2xl uppercase font-bold'>
<h1>Appointments</h1>
</div>
<div className='flex flex-col space-y-4 mt-3 outline-none'>
<Tab.Group>
<Tab.List className="flex space-x-3">
<Tab as={Fragment}>
{({ selected }) => (
<button
className={
(selected ? 'bg-gray-500 text-white px-3 py-2 rounded-md font-bold' : 'bg-gray-700 px-3 py-2 rounded-md font-bold')
}
>
Approved
</button>
)}
</Tab>
<Tab as={Fragment}>
{({ selected }) => (
<button
className={
(selected ? 'bg-gray-500 text-white px-3 py-2 rounded-md font-bold' : 'bg-gray-700 px-3 py-2 rounded-md font-bold')
}
>
Waiting for approval
</button>
)}
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>
<table className='border-collapse border border-slate-500 table-auto '>
<thead>
<tr>
<th className='border border-slate-600 p-3'>Song</th>
<th className='border border-slate-600 p-3'>Artist</th>
<th className='border border-slate-600 p-3'>Year</th>
</tr>
</thead>
<tbody>
<tr >
<td className='border border-slate-600 p-3'>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td className='border border-slate-600 p-3'>Malcolm Lockyer</td>
<td className='border border-slate-600 p-3'>1961</td>
</tr>
<tr>
<td className='border border-slate-600 p-3'>Witchy Woman</td>
<td className='border border-slate-600 p-3'>The Eagles</td>
<td className='border border-slate-600 p-3'>1972</td>
</tr>
<tr>
<td className='border border-slate-600 p-3'>Shining Star</td>
<td className='border border-slate-600 p-3'>Earth, Wind, and Fire</td>
<td className='border border-slate-600 p-3'>1975</td>
</tr>
</tbody>
</table>
</Tab.Panel>
<Tab.Panel>Content 2</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</div>
</div>
</Layout>