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
Button
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-m-primary-action') ?>">Button</button> <? c.flush(response); ?>
Block button
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-m-primary-action block w-full') ?>">Button</button> <? c.flush(response); ?>
Size xs
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-xs-primary-action') ?>">Button</button> <? c.flush(response); ?>
Size s
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-s-primary-action') ?>">Button</button> <? c.flush(response); ?>
Size m
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-m-primary-action') ?>">Button</button> <? c.flush(response); ?>
Size l
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-l-primary-action') ?>">Button</button> <? c.flush(response); ?>
Size xl
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-xl-primary-action') ?>">Button</button> <? c.flush(response); ?>
Hierarchy & types
Action button
Primary
Secondary
Tertiary
Outline
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('') ?>"> <button class="<?== c('btn-m-primary-action') ?>">Primary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-secondary-action') ?>">Secondary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-tertiary-action') ?>">Tertiary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-outline-action') ?>">Outline</button> </div> <? c.flush(response); ?>
Dark action button
Primary
Secondary
Tertiary
Outline
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('') ?>"> <button class="<?== c('btn-m-primaryDark-action') ?>">Primary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-secondaryDark-action') ?>">Secondary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-tertiaryDark-action') ?>">Tertiary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-outline-white') ?>">Outline</button> </div> <? c.flush(response); ?>
Neutral button
Primary
Secondary
Tertiary
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('') ?>"> <button class="<?== c('btn-m-primary-gray') ?>">Primary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-secondary-gray') ?>">Secondary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-tertiary-gray') ?>">Tertiary</button> </div> <? c.flush(response); ?>
Danger button
Primary
Secondary
Tertiary
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('') ?>"> <button class="<?== c('btn-m-primary-danger') ?>">Primary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-secondary-danger') ?>">Secondary</button> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-tertiary-danger') ?>">Tertiary</button> </div> <? c.flush(response); ?>
Tag types - inline
Anchor
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class=""> <a class="<?== c('btn-m-primary-action') ?>" href="#">Anchor</a> </div> <div class="<?== c('mt-8') ?>"> <button class="<?== c('btn-m-primary-action') ?>" >Button</button> </div> <div class="<?== c('mt-8') ?>"> <input class="<?== c('btn-m-primary-action') ?>" type="button" value="Input button"> </div> <div class="<?== c('mt-8') ?>"> <input class="<?== c('btn-m-primary-action') ?>" type="submit" value="Input submit"> </div> <div class="<?== c('mt-8') ?>"> <input class="<?== c('btn-m-primary-action') ?>" type="reset" value="Input reset"> </div> <? c.flush(response); ?>
Tag types - block
Anchor
Button
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <a class="<?== c('btn-m-primary-action flex w-full mb-8') ?>" href="#">Anchor</a> <button class="<?== c('btn-m-primary-action flex w-full mb-8') ?>" >Button</button> <input class="<?== c('btn-m-primary-action flex w-full mb-8') ?>" type="button" value="Input button"> <input class="<?== c('btn-m-primary-action flex w-full mb-8') ?>" type="submit" value="Input submit"> <input class="<?== c('btn-m-primary-action flex w-full') ?>" type="reset" value="Input reset"> <? c.flush(response); ?>
