Input
<div class="flex gap-2 items-center flex-wrap">
<div class="field">
<input type="text" placeholder="Type here" class="input" />
</div>
<div class="field">
<input type="text" placeholder="Type here" class="input outlined" />
</div>
<div class="field">
<input type="text" placeholder="Type here" class="input solid" />
</div>
</div>
<div class="flex gap-2 items-center flex-wrap">
<div class="field">
<input class="input xs" type="text" placeholder="Type here" />
</div>
<div class="field">
<input class="input sm" type="text" placeholder="Type here" />
</div>
<div class="field">
<input class="input" type="text" placeholder="Type here" />
</div>
<div class="field">
<input class="input lg" type="text" placeholder="Type here" />
</div>
<div class="field">
<input class="input xl" type="text" placeholder="Type here" />
</div>
</div>
<div class="flex gap-2 items-center flex-wrap">
<div class="field">
<input class="input primary" type="text" placeholder="Type here" />
</div>
<div class="field">
<input
class="input secondary"
type="text"
placeholder="Type here"
/>
</div>
<div class="field">
<input class="input accent" type="text" placeholder="Type here" />
</div>
<div class="field">
<input class="input info" type="text" placeholder="Type here" />
</div>
<div class="field">
<input class="input success" type="text" placeholder="Type here" />
</div>
<div class="field">
<input class="input warning" type="text" placeholder="Type here" />
</div>
<div class="field">
<input class="input danger" type="text" placeholder="Type here" />
</div>
</div>