Label Colors

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-lg mx-auto space-y-5">
    <!-- Default Color Label -->
    <div>
      <label for="default-input" class="block text-sm font-medium text-gray-700 mb-1">
        Default Label
      </label>
      <input
        type="text"
        id="default-input"
        placeholder="Default text input"
        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500"
      />
    </div>

    <!-- Primary Color Label -->
    <div>
      <label for="primary-input" class="block text-sm font-medium text-blue-700 mb-1">
        Primary Label
      </label>
      <input
        type="text"
        id="primary-input"
        placeholder="Primary text input"
        class="w-full px-3 py-2 border border-blue-300 rounded-md shadow-sm placeholder-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
    </div>

    <!-- Success Color Label -->
    <div>
      <label for="success-input" class="block text-sm font-medium text-green-700 mb-1">
        Success Label
      </label>
      <input
        type="text"
        id="success-input"
        placeholder="Success text input"
        class="w-full px-3 py-2 border border-green-300 rounded-md shadow-sm placeholder-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
      />
    </div>

    <!-- Warning Color Label -->
    <div>
      <label for="warning-input" class="block text-sm font-medium text-yellow-700 mb-1">
        Warning Label
      </label>
      <input
        type="text"
        id="warning-input"
        placeholder="Warning text input"
        class="w-full px-3 py-2 border border-yellow-300 rounded-md shadow-sm placeholder-yellow-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
      />
    </div>

    <!-- Danger Color Label -->
    <div>
      <label for="danger-input" class="block text-sm font-medium text-red-700 mb-1">
        Danger Label
      </label>
      <input
        type="text"
        id="danger-input"
        placeholder="Danger text input"
        class="w-full px-3 py-2 border border-red-300 rounded-md shadow-sm placeholder-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500"
      />
    </div>

    <!-- Info Color Label -->
    <div>
      <label for="info-input" class="block text-sm font-medium text-indigo-700 mb-1">
        Info Label
      </label>
      <input
        type="text"
        id="info-input"
        placeholder="Info text input"
        class="w-full px-3 py-2 border border-indigo-300 rounded-md shadow-sm placeholder-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
      />
    </div>
  </div>
</section>