added labels to all fields

[saini-g]

Description:

• added labels to fields in the following sections for light and dark mode
  • Contact
  • CTA
  • Footer
  • Hero
• Field label style is "In field top aligned labels"

[cahva]

I'm not sure about labels being inside the input / textareas..

I mean without them being inside it looks just as good to me:

Generated html for that is:

<label for="email" class="text-sm text-gray-600 mb-1">Email</label>
<input id="email" class="bg-white rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2 mb-4" type="email">
<label for="message" class="text-sm text-gray-600 mb-1">Message</label>
<textarea id="message" class="bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-indigo-500 text-base px-4 py-2 mb-4 resize-none"></textarea>

I know this is strictly a personal preference but I thought I'll give my view on this as I opened the issue https://github.com/mertJF/tailblocks/issues/11 :)

[mertJF]

Hi @saini-g, thank you so much for your effort.

I've found two issues;

1. The input field is disappearing when the label text is long.

   

2. The textarea's line-height is too large.

   

[saini-g]

Thanks for pointing out the long label issue @mertJF , I haven't thought of that. Do you have any suggestions as to what might work best in this scenario?? 🤔 I'm thinking text ellipsis with hover title.

RE: I'm not sure about labels being inside the input / textareas..

@cahva I took inspiration from here, I was also quite skeptical about the in-field labels, but after using them I feel very comfortable. Again, just like you said it's a matter of personal preference.

[saini-g]

Hi @mertJF Updates

• moved the labels out of the form fields to resolve the long labels issue
• reduced line height for all <textarea> tags

[mertJF]

Hi @saini-g, Could you please resolve the conflicts and create a new pull request. Thanks.