Form

<form>
    <fieldset class="grid grid-cols-1 gap-lgSpace">
        <div class="space-y-lgSpace">
            <!--if input have wrapper : use wrapper__input / if not : use input only-->
            <input type="text" class="wrapper__input input" placeholder="Your Name" />

            <label class="wrapper">
                <span class="wrapper__block">
                    Name
                </span>

                <!--if input have wrapper : use wrapper__input / if not : use input only-->
                <input type="text" class="wrapper__input input" placeholder="Your Name" />

                <span class="wrapper__hint">This is hint</span>
            </label>

            <label class="wrapper">
                <span class="wrapper__block">
                    Select
                </span>

                <select class="text-xs block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select></label>

            <!-- Multiselect -->

            <label class="block">
                <span class="text-tertiary-700 text-xs font-medium">
                    Multiselect
                </span>

                <select class="p-xsSpace !h-auto text-xs block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 [&>option]:p-xsSpace [&>option:checked]:bg-tertiary-200 [&>option:checked]:text-body [&>option:checked]:font-medium" multiple>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </label>

            <label class="block leading-none space-y-2xsSpace">
                <span class="text-tertiary-700 text-xs font-medium">
                    Select Date
                </span>

                <input onfocus="(this.type='date')" type="text" placeholder="(Icon here) Select Date" class="text-xs block w-full rounded-md border-tertiary-300 placeholder:text-tertiary-400 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:!font-semibold">
            </label>

            <label class="block leading-none space-y-2xsSpace">
                <span class="text-tertiary-700 text-xs font-medium">
                    Text Area
                </span>

                <textarea class="form-textarea mt-1 block w-full h-24 text-xs block w-full rounded-md border-tertiary-300 placeholder:text-tertiary-400 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50" rows="3" placeholder="Enter some long form content."></textarea>
            </label>

            <label class="flex items-center space-x-xsSpace">
                <input type="checkbox" class="wrapper__checkbox">

                <span class="text-tertiary-700 text-xs">Checkbox</span>
            </label>

            <label class="flex items-center space-x-xsSpace">
                <input type="radio" class="rounded-full border border-tertiary-300">
                <span class="text-tertiary-700 text-xs">
                    Radio
                </span>
            </label>
        </div>

        <label class="flex items-center space-x-xsSpace">
            <input type="checkbox" class="wrapper__checkbox">

            <span class="text-tertiary-700 text-xs">Checkbox</span>
        </label>

        <!-- Datepicker -->

        <label class="block">
            <span class="text-tertiary-700 text-xs font-medium">Input (date)</span>

            <input type="date" class="
        text-xs
        block
        w-full
        rounded-md
        border-gray-300
        shadow-sm
        focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
        </label>

        <!-- Multiselect -->

        <label class="block">
            <span class="text-tertiary-700 text-xs font-medium">
                Multiselect
            </span>

            <select class="p-xsSpace !h-auto text-xs block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 [&>option]:p-xsSpace [&>option:checked]:bg-tertiary-200 [&>option:checked]:text-body [&>option:checked]:font-medium" multiple>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </label>

        <label class="flex items-center space-x-xsSpace">
            <input type="radio" class="rounded-full border border-tertiary-300">
            <span class="text-tertiary-700 text-xs">
                Radio
            </span>
        </label>

        <label class="wrapper">
            <span class="wrapper__block">
                Select
            </span>

            <select class="text-xs block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select></label>

        <label class="block leading-none space-y-2xsSpace">
            <span class="text-tertiary-700 text-xs font-medium">
                Text Area
            </span>

            <textarea class="form-textarea mt-1 block w-full h-24 text-xs block w-full rounded-md border-tertiary-300 placeholder:text-tertiary-400 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50" rows="3" placeholder="Enter some long form content."></textarea>
        </label>
    </fieldset>
</form>