Textarea With Label

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Textarea with Legend -->
    <fieldset class="border border-gray-300 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-700 px-2">About You</legend>
      <div class="space-y-2">
        <textarea placeholder="Tell us about yourself..." 
          class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500">Optional</span>
          <span class="text-xs text-gray-500">Maximum 200 characters</span>
        </div>
      </div>
    </fieldset>

    <!-- Textarea with Top and Bottom Labels -->
    <div class="space-y-2">
      <div class="flex justify-between items-center">
        <label for="experience-textarea" class="block text-sm font-medium text-gray-700">Work Experience</label>
        <span class="text-xs font-medium text-blue-600">Required</span>
      </div>
      <textarea id="experience-textarea" rows="4" placeholder="Describe your previous work experience..." 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-500">Be specific about your responsibilities</span>
        <span id="experience-counter" class="text-xs text-gray-500">0/500</span>
      </div>
    </div>

    <!-- Textarea with Side Label -->
    <div class="space-y-4">
      <label for="side-label-textarea" class="block text-sm font-medium text-gray-700">Additional Comments</label>
      <div class="flex space-x-4">
        <div class="w-2/3">
          <textarea id="side-label-textarea" rows="4" placeholder="Any other information you'd like to share..." 
            class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
        </div>
        <div class="w-1/3 text-sm text-gray-500">
          <p class="mb-2 font-medium">Guidelines:</p>
          <ul class="list-disc pl-4 space-y-1 text-xs">
            <li>Include any special requirements</li>
            <li>Mention any preferences</li>
            <li>Ask any questions you may have</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Character counter functionality
    const experienceTextarea = document.getElementById('experience-textarea');
    const experienceCounter = document.getElementById('experience-counter');

    experienceTextarea.addEventListener('input', function() {
      const currentLength = this.value.length;
      experienceCounter.textContent = `${currentLength}/500`;
    });
  </script>
</section>