<!-- Form group -->
<div class="flex flex-col gap-y-1.5">
    <!-- Input label -->
    <label for="fullName" class="font-semibold text-xs">نام و نام خانوادگی:</label>
    <!-- Text input field -->
    <input type="text" name="fullName" id="fullName"
        class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
</div>
<!-- end Form group -->

<!-- Form group -->
<div
    class="flex flex-col bg-background border border-input rounded-md shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50">
    <!-- Input label -->
    <label for="fullName" class="block font-semibold text-xs px-3 py-2">نام و نام
        خانوادگی:</label>
    <!-- Text input field -->
    <input type="text" name="fullName" id="fullName"
        class="block w-full h-12 bg-transparent border-0 font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-muted-foreground/70 px-3 py-1" />
</div>
<!-- end Form group -->

<!-- Form group -->
<div class="relative">
    <!-- Input label -->
    <label for="fullName" class="absolute -top-2 start-1.5 bg-background rounded-lg font-semibold text-xs px-2">نام
        و نام
        خانوادگی:</label>
    <!-- Text input field -->
    <input type="text" name="fullName" id="fullName"
        class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
</div>
<!-- end Form group -->