Form Layout

<form class="kx-form kx-container kx-container--mob-m">
    <div class="kx-row kx-row--gutters">
        <div class="kx-col kx-col--12">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--89392" type="text" placeholder="Email" required="required" />
    <label class="kx-label" for="--89392">
        Username
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--71005" type="password" placeholder="Minimum 6 characters" required="required" />
    <label class="kx-label" for="--71005">
        Password
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12">
            <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-btn--fluid">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Sign In</span>
    </span>
</button>
        </div>
        <div class="kx-col kx-col--12">
            <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-btn--fluid">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Creat New Account</span>
    </span>
</button>
        </div>
    </div>
</form>

<form class="kx-form kx-container kx-container--tab-m">
    <div class="kx-row kx-row--gutters">
        <div class="kx-col kx-col--12">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--74566" type="email" placeholder="name@example.com" required="required" />
    <label class="kx-label" for="--74566">
        Email Address
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12 kx-col--5@tab-s">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--64556" type="text" required="required" />
    <label class="kx-label" for="--64556">
        First Name
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12 kx-col--7@tab-s">
            <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--23323" type="text" required="required" />
    <label class="kx-label" for="--23323">
        Last Name
    </label>
</div>
        </div>
        <div class="kx-col kx-col--12">
            <fieldset class="kx-fieldset">
                <legend class="kx-label">Telephone number <span class="kx-form__optional">(optional)</span></legend>
                <div class="kx-row kx-row--gutters">
                    <div class="kx-col kx-col--4 kx-col--3@tab-s">

                    </div>
                    <div class="kx-col kx-col--8 kx-col--9@tab-s">
                        <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large" id="--80062" type="tel" />
    <label class="kx-label kx-is-vishidden" for="--80062">
        Phone<span class="kx-form__optional">(optional)</span>
    </label>
</div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="kx-col kx-col--12">
            <!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Create Account</span>
    </span>
</button>
        </div>
    </div>
</form>

<form class="kx-form kx-container kx-container--tab-m kx-ui">
    <div class="kx-row kx-row--gutters">
        <div class="kx-col kx-col--12">
            <fieldset class="kx-fieldset">
                <legend class="kx-label kx-is-vishidden">Address</legend>
                <div class="kx-row kx-row--gutters">
                    <div class="kx-col kx-col--12">
                        <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--79833" type="text" required="required" />
    <label class="kx-label" for="--79833">
        Street Address
    </label>
</div>
                    </div>
                    <div class="kx-col kx-col--4 kx-col--2@tab-s">
                        <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-spin-button kx-hide-required" id="--26106" type="number" required="required" />
    <label class="kx-label" for="--26106">
        Postal code
    </label>
</div>
                    </div>
                    <div class="kx-col kx-col--8 kx-col--10@tab-s">
                        <!-- FIELD Component -->
<div class="kx-form__element">
    <input class="kx-field kx-field--size-large kx-hide-required" id="--14341" type="text" required="required" />
    <label class="kx-label" for="--14341">
        City
    </label>
</div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</form>