Boomla UI kit
Pages
Page example 1
Page example 2
Page example 3
Components
Text
Gallery
Features
Testimonials
Team
Pricing
Contact form
Footer
Restaurant menu entry
Elements
Menu 1
Menu 2
Subpage list
Button
Image Shaper
Feature
Gallery
Testimonial
Icon
Text
Contact form
Anchor
Google Analytics
Powered by Boomla
Layouts
Grid
Horizontal container
Hero layout
Paper
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 group
Text + Input text
https://
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <div type="text" class="<?== c('input-m bg-c-gray-100 rounded-r-0 rounded-l-3 border-1 border-c-gray-200 border-r-0') ?>">https://</div> <input type="text" class="<?== c('input-m rounded-l-0') ?>" placeholder="Placeholder" value=""> </div> <? c.flush(response); ?>
Input text + Text
.example.com
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <input type="text" class="<?== c('input-m rounded-r-0 text-right') ?>" placeholder="my-subdomain"> <div type="text" class="<?== c('input-m bg-c-gray-100 rounded-l-0 rounded-r-3 border-1 border-c-gray-200 border-l-0') ?>">.example.com</div> </div> <? c.flush(response); ?>
Input text + Select
px
em
rem
vh
vw
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <input type="text" class="<?== c('input-m rounded-r-0 text-right w-48') ?>" value="3"> <select class="<?== c('selectOption-m rounded-l-0 border-l-0') ?>"> <option>px</option> <option>em</option> <option>rem</option> <option>vh</option> <option>vw</option> </select> </div> <? c.flush(response); ?>
Input text + Button
Action
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <input type="text" class="<?== c('input-m rounded-r-0 text-right border-r-0') ?>" placeholder="my-subdomain"> <button class="<?== c('btn-m-primaryAction rounded-l-0') ?>">Action</button> </div> <? c.flush(response); ?>
Button group
Option A
Option B
Option C
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <button class="<?== c('btn-m-primaryAction rounded-r-0') ?>">Option A</button> <button class="<?== c('btn-m-primaryAction rounded-0') ?>">Option B</button> <button class="<?== c('btn-m-primaryAction rounded-l-0') ?>">Option C</button> </div> <? c.flush(response); ?>
Button group
Option A
Option B
Option C
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <button class="<?== c('btn-m-secondaryAction rounded-r-0') ?>">Option A</button> <button class="<?== c('btn-m-secondaryAction rounded-0') ?>">Option B</button> <button class="<?== c('btn-m-secondaryAction rounded-l-0') ?>">Option C</button> </div> <? c.flush(response); ?>
Button group
Option A
Option B
Option C
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <button class="<?== c('btn-m-secondaryAction rounded-r-0') ?>">Option A</button> <button class="<?== c('btn-m-secondaryAction rounded-0') ?>">Option B</button> <button class="<?== c('btn-m-primaryAction rounded-l-0') ?>">Option C</button> </div> <? c.flush(response); ?>
Radio button group
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <label class=""> <input type="radio" class="<?== c('absolute opacity-0 w-0 h-0') ?>" name="exampleRadioButtonGroup-1"> <div class="<?== c('iconBtnInline-m-primaryAction rounded-r-0 siblingFocus-action') ?>"> <svg class="<?== c('btnIcon-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> </label> <label class=""> <input type="radio" class="<?== c('absolute opacity-0 w-0 h-0') ?>" name="exampleRadioButtonGroup-1" checked> <div class="<?== c('iconBtnInline-m-primaryAction rounded-0 siblingFocus-action') ?>"> <svg class="<?== c('btnIcon-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> </label> <label class=""> <input type="radio" class="<?== c('absolute opacity-0 w-0 h-0') ?>" name="exampleRadioButtonGroup-1"> <div class="<?== c('iconBtnInline-m-primaryAction rounded-0 siblingFocus-action') ?>"> <svg class="<?== c('btnIcon-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> </label> <label class=""> <input type="radio" class="<?== c('absolute opacity-0 w-0 h-0') ?>" name="exampleRadioButtonGroup-1"> <div class="<?== c('iconBtnInline-m-primaryAction rounded-l-0 siblingFocus-action') ?>"> <svg class="<?== c('btnIcon-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> </label> </div> <? c.flush(response); ?>
Checkbox button group
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex') ?>"> <label class=""> <input type="checkbox" class="<?== c('absolute opacity-0 w-0 h-0') ?>"> <div class="<?== c('iconBtnInline-m-primaryAction rounded-r-0 siblingFocus-action') ?>"> <svg class="<?== c('btnIcon-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> </label> <label class=""> <input type="checkbox" class="<?== c('absolute opacity-0 w-0 h-0') ?>" checked> <div class="<?== c('iconBtnInline-m-primaryAction rounded-0 siblingFocus-action') ?>"> <svg class="<?== c('btnIcon-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> </label> <label class=""> <input type="checkbox" class="<?== c('absolute opacity-0 w-0 h-0') ?>"> <div class="<?== c('iconBtnInline-m-primaryAction rounded-0 siblingFocus-action') ?>"> <svg class="<?== c('btnIcon-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> </label> <label class=""> <input type="checkbox" class="<?== c('absolute opacity-0 w-0 h-0') ?>" checked> <div class="<?== c('iconBtnInline-m-primaryAction rounded-l-0 siblingFocus-action') ?>"> <svg class="<?== c('btnIcon-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> </label> </div> <? c.flush(response); ?>