responsive Todo List - how to deal with rem in tailwind

As a react exercice I am trying to implement a todo list app with react.

The todo list is almost done, but for some reasons, i want it to display nicely also on mobile and fit the content accordingly to the screen size.

My problem is my checkboxes are sized with Rems - 6 rems in height and width. But in mobile devices, rems are not equivalent to their original size and the width of my checkboxes shrinks.

Do you have any idea to overcome this resizing ? See screen captures below

Large	Mobile
	[

you can see the code of the todo List at https://github.com/freddy-turtle/todo-list

the code of the checkboxes is

<input
          type="checkbox"
          name="checked-demo"
          className="form-tick appearance-none flex-initial bg-white bg-check h-6 w-6 min-w-6 border border-gray-300 rounded-md checked:bg-blue-500 checked:border-transparent focus:outline-none"
        />