Issue - Input Element UI CSS

[chandansomani]

I have encounter a issue in Input Element
Steps to reproducde :

1. Go To : https://www.material-tailwind.com/docs/react/modal
2. Open Add Product Model :
3. Fill 1st Inputbox box with some text, ( or fill values in input text box )
4. Move focus to other element

The Top border of Input Element Text box, border goes hidden, the input label is causing issue. It can we seen happing for each instance of input box.

[tman16]

Same issue

the culprit is global.css applying

.border-t-transparent {
border-top-color: #0000 !important;
}

Make sure you don't use a class applied to top only i.e. border-t-blue-gray-200, if you have this use without the "-t-" for example: border-blue-gray-200

For the focus its the otherway round you must include the "-t-" so use for example focus:border-t-gray-900, if you don't specify the "-t-" it will be transparent

In full try this
className="w-full placeholder:opacity-100 focus:border-t-gray-900 border-blue-gray-200"

[chandansomani]

Same issue

the culprit is global.css applying

.border-t-transparent { border-top-color: #0000 !important; }

Make sure you don't use a class applied to top only i.e. border-t-blue-gray-200, if you have this use without the "-t-" for example: border-blue-gray-200

For the focus its the otherway round you must include the "-t-" so use for example focus:border-t-gray-900, if you don't specify the "-t-" it will be transparent

In full try this className="w-full placeholder:opacity-100 focus:border-t-gray-900 border-blue-gray-200"

This didnt help,
i would like to elaborate the issue is the Label text of the Component,
Just set label={"Some text"} and remove labelProps
You can see the culprit, this child label

[chandansomani]

Found one issue :
1] The Scrollbar of overflow has a bug, also CardHeader has wired behaviour

2] The Card Component has a default Padding , not configurable :

[sanwalsulehri]

what if i done this