Company Ltd
Pages
Page 1
Page 2
Page 3
Comps
Hero layout
Navigation
Text
Features
Testimonials
Team
Pricing
Contact form
Footer
Elems
Grid
Horizontal container
Button
Image Shaper
Feature
Icon
Text
Contact form
CSS Comps
Landing page
Blog
Footer
Working on
CSS Elems
Buttons
Buttons with icons
Buttons icons only
Input text
Select
Checkbox
Radio
File upload
Textarea
Range
Input group
Icons
Alert
Pagination
CSS Utils
Fonts
Colors
Shadows
Background pattern
Typography
Input text
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('') ?>"> <input type="text" class="<?== c('input-m') ?>" placeholder="Placeholder" value=""> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('input-m') ?>" placeholder="Placeholder" value="Value"> </div> <? c.flush(response); ?>
Input text block
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <input type="text" class="<?== c('input-m flex w-full') ?>" placeholder="Placeholder" value=""> <? c.flush(response); ?>
Sizes
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('') ?>"> <input type="text" class="<?== c('input-xs') ?>" placeholder="Placeholder" value=""> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('input-s') ?>" placeholder="Placeholder" value=""> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('input-m') ?>" placeholder="Placeholder" value=""> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('input-l') ?>" placeholder="Placeholder" value=""> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('input-xl') ?>" placeholder="Placeholder" value=""> </div> <? c.flush(response); ?>
States
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('') ?>"> <input type="text" class="<?== c('input-m') ?>" placeholder="default placeholder" value=""> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('input-m') ?>" placeholder="" value="default value"> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('mode-valid input-m') ?>" placeholder="mode-valid placeholder" value=""> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('mode-valid input-m') ?>" placeholder="" value="mode-valid value"> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('mode-invalid input-m') ?>" placeholder="mode-invalid placeholder" value=""> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('mode-invalid input-m') ?>" placeholder="" value="mode-invalid value"> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('input-m') ?>" placeholder="disabled placeholder" value="" disabled> </div> <div class="<?== c('mt-8') ?>"> <input type="text" class="<?== c('input-m') ?>" placeholder="" value="disabled value" disabled> </div> <? c.flush(response); ?>
With icons on the left
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex relative') ?>"> <input type="text" class="<?== c('inputWithIcon-left-xs') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-left') ?>"> <svg class="<?== c('inputIconSvg-left-xs') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="<?== c('flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-left-s') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-left') ?>"> <svg class="<?== c('inputIconSvg-left-s') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="<?== c('flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-left-m') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-left') ?>"> <svg class="<?== c('inputIconSvg-left-m') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="<?== c('flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-left-l') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-left') ?>"> <svg class="<?== c('inputIconSvg-left-l') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="<?== c('flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-left-xl') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-left') ?>"> <svg class="<?== c('inputIconSvg-left-xl') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="<?== c('flex relative mt-32') ?>"> <input type="text" class="<?== c('inputWithIcon-left-xs mode-valid') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-left') ?>"> <svg class="<?== c('inputIconSvg-left-xs') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="<?== c('flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-left-xs mode-invalid') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-left') ?>"> <svg class="<?== c('inputIconSvg-left-xs') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="<?== c('flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-left-xs') ?>" placeholder="Placeholder" value="" disabled> <div class="<?== c('inputIconContainer-left') ?>"> <svg class="<?== c('inputIconSvg-left-xs') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <? c.flush(response); ?>
With icons on the right
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <div class="<?== c('inline-flex relative') ?>"> <input type="text" class="<?== c('inputWithIcon-right-xs') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-right') ?>"> <svg class="<?== c('inputIconSvg-right-xs') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="<?== c('flex') ?>"> <div class="<?== c('inline-flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-right-s') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-right') ?>"> <svg class="<?== c('inputIconSvg-right-s') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="<?== c('flex') ?>"> <div class="<?== c('inline-flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-right-m') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-right') ?>"> <svg class="<?== c('inputIconSvg-right-m') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="<?== c('flex') ?>"> <div class="<?== c('inline-flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-right-l') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-right') ?>"> <svg class="<?== c('inputIconSvg-right-l') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="<?== c('flex') ?>"> <div class="<?== c('inline-flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-right-xl') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-right') ?>"> <svg class="<?== c('inputIconSvg-right-xl') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="<?== c('flex') ?>"> <div class="<?== c('inline-flex relative mt-32') ?>"> <input type="text" class="<?== c('inputWithIcon-right-xs mode-valid') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-right') ?>"> <svg class="<?== c('inputIconSvg-right-xs') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="<?== c('flex') ?>"> <div class="<?== c('inline-flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-right-xs mode-invalid') ?>" placeholder="Placeholder" value=""> <div class="<?== c('inputIconContainer-right') ?>"> <svg class="<?== c('inputIconSvg-right-xs') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="<?== c('flex') ?>"> <div class="<?== c('inline-flex relative mt-8') ?>"> <input type="text" class="<?== c('inputWithIcon-right-xs') ?>" placeholder="Placeholder" value="" disabled> <div class="<?== c('inputIconContainer-right') ?>"> <svg class="<?== c('inputIconSvg-right-xs') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <? c.flush(response); ?>
