Form: Input

<div class="mb-6">
    <label for="text" class="block font-bold">Text input label <span class="text-red-500">*</span></label>
    <div class="mt-3">
        <input type="text" name="text" id="text" class="block w-full border-dark/40 rounded px-5 py-3 focus:outline-none focus:ring-0 focus:shadow-lg focus:border-blue" placeholder="Input placeholder" required>
    </div>
</div>

<div class="mb-6">
    <label for="text-error" class="block font-bold">Text input label</label>
    <div class="mt-3">
        <input type="text" name="text-error" id="text-error" class="block w-full border-red-500 rounded px-5 py-3 focus:outline-none focus:ring-0 focus:shadow-lg focus:border-red-500" placeholder="Input placeholder" value="Entered text" aria-invalid="true" aria-describedby="email-error">
    </div>
    <p class="mt-2 text-sm text-red-600" id="email-error">Error message</p>
</div>