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
Checkerboard background pattern
Use to emphasize that an image or color is semi- or fully transparent.
On white background
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('h-96 bg-c-white bgCheckerboard') ?>"></div> <? c.flush(response); ?>
On light-gray background
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('h-96 bg-c-gray-100 bgCheckerboard') ?>"></div> <? c.flush(response); ?>
On dark-gray background
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('h-96 bg-c-gray-500 bgCheckerboard') ?>"></div> <? c.flush(response); ?>
On colored background
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('h-96 bg-c-blue-500 bgCheckerboard') ?>"></div> <? c.flush(response); ?>
On light-gray background
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex items-center justify-center bg-c-gray-100 bgCheckerboard') ?>"> <svg class="<?== c('w-96 h-96') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5 8l2 2m0 0l4-4" fill="none" stroke="#555" stroke-linecap="round" stroke-width="2"/></svg> </div> <? c.flush(response); ?>
