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
File upload
File upload
Choose file
Choose file
Choose file
Choose file
Choose file
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('btn-xs-primary-action siblingFocus-action') ?>">Choose file</div> </label> </div> <div class="<?== c('flex mt-8') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('btn-s-primary-action siblingFocus-action') ?>">Choose file</div> </label> </div> <div class="<?== c('flex mt-8') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('btn-m-primary-action siblingFocus-action') ?>">Choose file</div> </label> </div> <div class="<?== c('flex mt-8') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('btn-l-primary-action siblingFocus-action') ?>">Choose file</div> </label> </div> <div class="<?== c('flex mt-8') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('btn-xl-primary-action siblingFocus-action') ?>">Choose file</div> </label> </div> <? c.flush(response); ?>
File upload with input
No file selected
Choose file
No file selected
Choose file
No file selected
Choose file
No file selected
Choose file
No file selected
Choose file
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('inline-flex') ?>"> <div class="<?== c('input-xs border-r-0 rounded-r-0') ?>">No file selected</div> <div class="<?== c('btn-xs-primary-action rounded-l-0 siblingChildFocus-action') ?>">Choose file</div> </div> </label> </div> <div class="<?== c('flex mt-8') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('inline-flex') ?>"> <div class="<?== c('input-s border-r-0 rounded-r-0') ?>">No file selected</div> <div class="<?== c('btn-s-primary-action rounded-l-0 siblingChildFocus-action') ?>">Choose file</div> </div> </label> </div> <div class="<?== c('flex mt-8') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('inline-flex') ?>"> <div class="<?== c('input-m border-r-0 rounded-r-0') ?>">No file selected</div> <div class="<?== c('btn-m-primary-action rounded-l-0 siblingChildFocus-action') ?>">Choose file</div> </div> </label> </div> <div class="<?== c('flex mt-8') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('inline-flex') ?>"> <div class="<?== c('input-l border-r-0 rounded-r-0') ?>">No file selected</div> <div class="<?== c('btn-l-primary-action rounded-l-0 siblingChildFocus-action') ?>">Choose file</div> </div> </label> </div> <div class="<?== c('flex mt-8') ?>"> <label class="<?== c('inline-flex') ?>"> <input type="file" class="<?== c('file') ?>"> <div class="<?== c('inline-flex') ?>"> <div class="<?== c('input-xl border-r-0 rounded-r-0') ?>">No file selected</div> <div class="<?== c('btn-xl-primary-action rounded-l-0 siblingChildFocus-action') ?>">Choose file</div> </div> </label> </div> <? c.flush(response); ?>
File upload with label
Custom label
Choose file
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <label class="<?== c('flex items-center') ?>"> <div class="<?== c('mr-16') ?>">Custom label</div> <input type="file" class="<?== c('file') ?>"> <div> <div class="<?== c('btn-m-primary-action siblingChildFocus-action') ?>">Choose file</div> </div> </label> <? c.flush(response); ?>
