FormLayout

<div class="field">
    <label for="firstname1">Firstname</label>
    <input id="firstname1" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
</div>
<div class="field">
    <label for="lastname1">Lastname</label>
    <input id="lastname1" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
</div>
 

<div class="formgrid grid">
    <div class="field col">
        <label for="firstname2">Firstname</label>
        <input id="firstname2" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
    </div>
    <div class="field col">
        <label for="lastname2">Lastname</label>
        <input id="lastname2" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
    </div>
</div>
 

<div class="field grid">
    <label for="firstname3" class="col-fixed" style="width:100px">Firstname</label>
    <div class="col">
        <input id="firstname3" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary">
    </div>
</div>
<div class="field grid">
    <label for="lastname3" class="col-fixed" style="width:100px">Lastname</label>
    <div class="col">
        <input id="lastname3" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary">
    </div>
</div>
 

<div class="field grid">
    <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
    <div class="col-12 md:col-10">
        <input id="firstname4" type="text">
    </div>
</div>
<div class="field grid">
    <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
    <div class="col-12 md:col-10">
        <input id="lastname4" type="text">
    </div>
</div>
 

<div class="formgroup-inline">
    <div class="field">
        <label for="firstname5" class="p-sr-only">Firstname</label>
        <input id="firstname5" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary" placeholder="Firstname">
    </div>
    <div class="field">
        <label for="lastname5" class="p-sr-only">Lastname</label>
        <input id="lastname5" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary" placeholder="Lastname">
    </div>
    <button type="button" class="bg-primary border-primary-500 px-3 py-2 text-base border-1 border-solid border-round cursor-pointer transition-all transition-duration-200 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-700 active:border-primary-700">Submit</button>
</div>
 

<p>Vertical</p>
<div class="field-checkbox">
    <input type="checkbox" id="city1"></input>
    <label for="city1">Chicago</label>
</div>
<div class="field-checkbox">
    <input type="checkbox" id="city2"></input>
    <label for="city2">Los Angeles</label>
</div>

<p>Horizontal</p>
<div class="formgroup-inline">
    <div class="field-checkbox">
        <input type="checkbox" id="city3"></input>
        <label for="city3">Chicago</label>
    </div>
    <div class="field-checkbox">
        <input type="checkbox" id="city4"></input>
        <label for="city4">Los Angeles</label>
    </div>
</div>
 

<p>Vertical</p>
<div class="field-radiobutton">
    <input type="radio" id="city1"></input>
    <label for="city1">Chicago</label>
</div>
<div class="field-radiobutton">
    <input type="radio" id="city2"></input>
    <label for="city2">Los Angeles</label>
</div>

<p>Horizontal</p>
<div class="formgroup-inline">
    <div class="field-radiobutton">
        <input type="radio" id="city3"></input>
        <label for="city3">Chicago</label>
    </div>
    <div class="field-radiobutton">
        <input type="radio" id="city4"></input>
        <label for="city4">Los Angeles</label>
    </div>
</div>
 

<div class="field">
    <label for="username">Username</label>
    <input id="username" type="username" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full" aria-describedby="username-help">
    <small id="username-help">Enter your username to reset your password.</small>
</div>
 

<div class="formgrid grid">
    <div class="field col-12 md:col-6">
        <label for="firstname6">Firstname</label>
        <input id="firstname6" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
    </div>
    <div class="field col-12 md:col-6">
        <label for="lastname6">Lastname</label>
        <input id="lastname6" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
    </div>
    <div class="field col-12">
        <label for="address">Address</label>
        <textarea id="address" type="text" rows="4" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full"></textarea>
    </div>
    <div class="field col-12 md:col-6">
        <label for="city">City</label>
        <input id="city" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
    </div>
    <div class="field col-12 md:col-3">
        <label for="state">State</label>
        <select id="state" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary" style="appearance: auto">
            <option>Arizona</option>
            <option>California</option>
            <option>Florida</option>
            <option>Ohio</option>
            <option>Washington</option>
        </select>
    </div>
    <div class="field col-12 md:col-3">
        <label for="zip">Zip</label>
        <input id="zip" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
    </div>
</div>