My goal is to make my div stretch or go full width similar to the table on my page. I have experimented with max-w-full, w-screen, and w-full, but the div is not extending all the way...
https://i.stack.imgur.com/8BJnI.png
This is the code for my page.
SampleTest.js
import React, { useState } from "react";
function SampleTest() {
const [getValue, setValue] = useState();
return (
<>
<div className="w-full overflow-x-auto shadow-md sm:rounded-lg">
// this is the div that does not stretch up until the end or does not affect ``w-full``
<div className="max-w-full p-4 bg-white dark:bg-gray-800">
<label
htmlFor="countries"
className="mb-2 text-sm font-medium text-gray-900 dark:text-white px-2"
>
Filter
</label>
<select
id="countries"
defaultValue={"DEFAULT"}
value={getValue}
onChange={(e) => {
setValue(e.target.value);
}}
placeholder="select me"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option value="DEFAULT" disabled>
Choose Filter
</option>
<option value="Verified">Verified</option>
<option value="Pending">Pending</option>
<option value="Disabled">Disabled</option>
</select>
</div>
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="p-4"></th>
<th scope="col" className="px-6 py-3">
Name
</th>
<th scope="col" className="px-6 py-3">
Position
</th>
<th scope="col" className="px-6 py-3">
Status
</th>
<th scope="col" className="px-6 py-3">
Action
</th>
</tr>
</thead>
<tbody>
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td className="w-4 p-4"></td>
<th
scope="row"
className="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white"
>
<img
className="w-10 h-10 rounded-full"
src="https://fakeimg.pl/350x200/?text=World&font=lobster"
alt="Jese image"
/>
<div className="pl-3">
<div className="text-base font-semibold">Neil Sims</div>
<div className="font-normal text-gray-500">
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac4cfc3c684d9c3c7d9eaccc6c5ddc8c3decf84c9c5c7">[email protected]</a>
</div>
</div>
</th>
<td className="px-6 py-4">React Developer</td>
<td className="px-6 py-4">
<div className="flex items-center">
<div className="h-2.5 w-2.5 rounded-full bg-green-500 mr-2"></div>{" "}
Online
</div>
</td>
<td className="px-6 py-4">
<a
href="#"
type="button"
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit user
</a>
</td>
</tr>
</tbody>
</table>
</div>
</>
);
}
export default SampleTest;
I believe my meta tag is already correctly set.
This is my meta tag
<meta name="viewport" content="width=device-width, initial-scale=1" />