Textarea Ghost

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Ghost Textarea -->
    <div class="space-y-2">
      <label for="ghost-textarea" class="block text-sm font-medium text-gray-700">Notes</label>
      <textarea id="ghost-textarea" rows="4" placeholder="Enter your notes here..." 
        class="w-full px-4 py-2 bg-transparent border-0 border-b border-gray-300 focus:border-blue-500 focus:ring-0 focus:outline-none"></textarea>
      <p class="text-sm text-gray-500">Minimalist design with no background</p>
    </div>

    <!-- Ghost Textarea with Hover Effect -->
    <div class="space-y-2">
      <label for="ghost-hover-textarea" class="block text-sm font-medium text-gray-700">Ideas</label>
      <textarea id="ghost-hover-textarea" rows="4" placeholder="Share your ideas here..." 
        class="w-full px-4 py-2 bg-transparent border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 focus:ring-0 focus:outline-none transition-colors"></textarea>
    </div>

    <!-- Ghost Textarea with Background on Focus -->
    <div class="space-y-2">
      <label for="ghost-focus-textarea" class="block text-sm font-medium text-gray-700">Feedback</label>
      <textarea id="ghost-focus-textarea" rows="4" placeholder="Share your feedback here..." 
        class="w-full px-4 py-2 bg-transparent border-0 border-b border-gray-300 focus:bg-gray-50 focus:border-blue-500 focus:ring-0 focus:outline-none transition-all"></textarea>
    </div>
  </div>
</section>