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
Input group
Text + Input text
https://
<div class="flex"> <div type="text" class="input-m bg-gray-100 rounded-r-none rounded-l-3px border border-gray-200 border-r-0">https://</div> <input type="text" class="input-m input-default rounded-l-none" placeholder="Placeholder" value=""> </div>
Input text + Text
.example.com
<div class="flex"> <input type="text" class="input-m input-default rounded-r-none text-right" placeholder="my-subdomain"> <div type="text" class="input-m bg-gray-100 rounded-l-none rounded-r-3px border border-gray-200 border-l-0">.example.com</div> </div>
Input text + Select
px
em
rem
vh
vw
<div class="flex"> <input type="text" class="input-m input-default rounded-r-none text-right w-48" value="3"> <select class="select-m select-default select-default-m rounded-l-none border-l-0"> <option>px</option> <option>em</option> <option>rem</option> <option>vh</option> <option>vw</option> </select> </div>
Input text + Button
Action
<div class="flex"> <input type="text" class="input-m input-default rounded-r-none text-right border-r-0" placeholder="my-subdomain"> <button class="btn-m btn-action rounded-l-none">Action</button> </div>
Button group
Option A
Option B
Option C
<div class="flex"> <button class="btn-m btn-action rounded-r-none">Option A</button> <button class="btn-m btn-action rounded-none">Option B</button> <button class="btn-m btn-action rounded-l-none">Option C</button> </div>
Button group
Option A
Option B
Option C
<div class="flex"> <button class="btn-m btn-action-2 rounded-r-none">Option A</button> <button class="btn-m btn-action-2 rounded-none">Option B</button> <button class="btn-m btn-action-2 rounded-l-none">Option C</button> </div>
Button group
Option A
Option B
Option C
<div class="flex"> <button class="btn-m btn-action-2 rounded-r-none">Option A</button> <button class="btn-m btn-action-2 rounded-none">Option B</button> <button class="btn-m btn-action rounded-l-none">Option C</button> </div>
Radio button group
<div class="flex"> <label class=""> <input type="radio" class="absolute opacity-0 w-0 h-0" name="exampleRadioButtonGroup-1"> <div class="btn-icon-only-m btn-action rounded-r-none focus-default btn-show-checked-action"> <svg class="btn-icon" 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="absolute opacity-0 w-0 h-0" name="exampleRadioButtonGroup-1" checked> <div class="btn-icon-only-m btn-action rounded-none focus-default btn-show-checked-action"> <svg class="btn-icon" 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="absolute opacity-0 w-0 h-0" name="exampleRadioButtonGroup-1"> <div class="btn-icon-only-m btn-action rounded-none focus-default btn-show-checked-action"> <svg class="btn-icon" 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="absolute opacity-0 w-0 h-0" name="exampleRadioButtonGroup-1"> <div class="btn-icon-only-m btn-action rounded-l-none focus-default btn-show-checked-action"> <svg class="btn-icon" 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>
Checkbox button group
<div class="flex"> <label class=""> <input type="checkbox" class="absolute opacity-0 w-0 h-0"> <div class="btn-icon-only-m btn-action rounded-r-none focus-default btn-show-checked-action"> <svg class="btn-icon" 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="absolute opacity-0 w-0 h-0" checked> <div class="btn-icon-only-m btn-action rounded-none focus-default btn-show-checked-action"> <svg class="btn-icon" 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="absolute opacity-0 w-0 h-0"> <div class="btn-icon-only-m btn-action rounded-none focus-default btn-show-checked-action"> <svg class="btn-icon" 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="absolute opacity-0 w-0 h-0" checked> <div class="btn-icon-only-m btn-action rounded-l-none focus-default btn-show-checked-action"> <svg class="btn-icon" 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>
