Boomla UI kit
Full-width blocks
Text
Gallery
Features
Testimonials
Team
Pricing
Call to action
Alert
Contact form
F.A.Q.
Info header
Breadcrumbs
Footer
Elements
Top menu
Left menu
Subpage list
Breadcrumbs
Button
Button group
Image shaper rectangle
Image shaper circle
Feature
Gallery
Slideshow
Testimonial v1
Testimonial v2
Icon
Social icon group
Text
Display text
List
Contact form
Alert
Separator
F.A.Q. (accordion)
Tabs
File attachments
Anchor
Meta tags
Google Analytics
Powered by Boomla
Layouts
Grid
Space
Horizontal container
Hero layout
Paper
Paper 2
Group
Background
Card
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
Large icon
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex w-96 h-96 items-center justify-center rounded-full bg-c-brand-50') ?>"> <svg class="<?== c('w-36 h-36 fill-brand-500') ?>" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 4l12 6-12 6z"></path></svg> </div> <? c.flush(response); ?>
Large icon star
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex w-96 h-96 items-center justify-center rounded-full bg-c-brand-50') ?>"> <svg class="<?== c('w-36 h-36 fill-brand-500') ?>" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg> </div> <? c.flush(response); ?>
Large icon user
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex w-96 h-96 items-center justify-center rounded-full bg-c-brand-50') ?>"> <svg class="<?== c('w-36 h-36 fill-brand-500') ?>" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 5.002A5.005 5.005 0 0110 0c2.761 0 5 2.229 5 5.002v1.996A5.005 5.005 0 0110 12c-2.761 0-5-2.229-5-5.002V5.002zM0 16.676A19.908 19.908 0 0110 14c3.643 0 7.058.974 10 2.676V20H0v-3.324z"/></svg> </div> <? c.flush(response); ?>
Small icon Twitter
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex w-40 h-40 items-center justify-center rounded-full bg-c-brand-800') ?>"> <svg class="<?== c('w-16 h-16 fill-brand-100') ?>" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/></svg> </div> <? c.flush(response); ?>
Small icon phone
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex w-40 h-40 items-center justify-center rounded-full bg-c-brand-100') ?>"> <svg class="<?== c('w-16 h-16 fill-brand-700') ?>" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.174 16.826a15.053 15.053 0 01-8-8l2.12-2.12C5.686 6.314 6 5.556 6 5.009V.991A1 1 0 005 0H1.002A1 1 0 000 1.001V3c0 9.389 7.611 17 17 17h1.999A.998.998 0 0020 18.998V15a1 1 0 00-.99-1h-4.02c-.546 0-1.304.314-1.696.706l-2.12 2.12z" fill-rule="evenodd"/></svg> </div> <? c.flush(response); ?>
Small icon location
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex w-40 h-40 items-center justify-center rounded-full bg-c-brand-100') ?>"> <svg class="<?== c('w-16 h-16 fill-brand-700') ?>" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 20s7-9.134 7-13A7 7 0 003 7c0 3.866 7 13 7 13zm0-11a2 2 0 100-4 2 2 0 000 4z" fill-rule="evenodd"/></svg> </div> <? c.flush(response); ?>
Small icon email
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex w-40 h-40 items-center justify-center rounded-full bg-c-brand-100') ?>"> <svg class="<?== c('w-16 h-16 fill-brand-700') ?>" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.604 13.466A3.5 3.5 0 0020 11.5V10h-.168H20c0-5.523-4.477-10-10-10S0 4.477 0 10s4.477 10 10 10c1.608 0 3.127-.38 4.473-1.054l-.895-1.789A8 8 0 1118 10v1.5c0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.674-1.5-1.5V5h-2v1a5 5 0 10.604 7.466zM10 13a3 3 0 100-6 3 3 0 000 6z" fill-rule="evenodd"/></svg> </div> <? c.flush(response); ?>
Small semi-opaque icon with opacity change on hover
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <div class="<?== c('flex w-40 h-40 items-center justify-center rounded-full bg-c-brand-500-10 hover:bg-c-brand-500-20 transition duration-150 ease-in-out') ?>"> <svg class="<?== c('w-16 h-16 fill-brand-700') ?>" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/></svg> </div> <? c.flush(response); ?>
powered by
Boomla