Button - Midone - Tailwind HTML Admin Template

Pages

Users

Leonardo DiCaprio

leonardodicaprio@left4code.com

Arnold Schwarzenegger

arnoldschwarzenegger@left4code.com

Robert De Niro

robertdeniro@left4code.com

Sylvester Stallone

sylvesterstallone@left4code.com

Products

Sony Master Series A9G

Electronic

Samsung Q90 QLED TV

Electronic

Notifications

Leonardo DiCaprio

01:10 PM

There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomi

Arnold Schwarzenegger

05:09 AM

Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Robert De Niro

01:10 PM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Sylvester Stallone

01:10 PM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Kevin Spacey

01:10 PM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Buttons

Basic Buttons

Show code

HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 border text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Button Sizes

Show code

HTMLOpenTagdivHTMLCloseTag HTMLOpenTagbutton class="button button--sm w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagSmallHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagMediumHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button button--lg w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagbutton class="button button--sm w-24 mr-1 mb-2 border text-gray-700"HTMLCloseTagSmallHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 border text-gray-700"HTMLCloseTagMediumHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button button--lg w-24 mr-1 mb-2 border text-gray-700"HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Working with Links

Show code

Link Button Input Submit Reset Metal

HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagLinkHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 border text-gray-700"HTMLCloseTagButtonHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagInputHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagSubmitHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagResetHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagMetalHTMLOpenTag/aHTMLCloseTag

Elevated Buttons

Show code

HTMLOpenTagdivHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Social Media Buttons

Show code

HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-32 text-white"HTMLCloseTag HTMLOpenTagi data-feather="facebook"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Facebook HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-33 text-white"HTMLCloseTag HTMLOpenTagi data-feather="twitter"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Twitter HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-34 text-white"HTMLCloseTag HTMLOpenTagi data-feather="instagram"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Instagram HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-35 text-white"HTMLCloseTag HTMLOpenTagi data-feather="linkedin"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Linkedin HTMLOpenTag/buttonHTMLCloseTag

Outline Buttons

Show code

HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1"HTMLCloseTagLinkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border text-gray-700"HTMLCloseTagButtonHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9"HTMLCloseTagInputHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12"HTMLCloseTagSubmitHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6"HTMLCloseTagResetHTMLOpenTag/buttonHTMLCloseTag

Loading State Buttons

Show code

HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white inline-flex items-center"HTMLCloseTag Saving HTMLOpenTagi data-loading-icon="oval"data-color="white"class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white inline-flex items-center"HTMLCloseTag Adding HTMLOpenTagi data-loading-icon="spinning-circles"data-color="white"class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white inline-flex items-center"HTMLCloseTag Loading HTMLOpenTagi data-loading-icon="three-dots"data-color="white"class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white inline-flex items-center"HTMLCloseTag Deleting HTMLOpenTagi data-loading-icon="puff"data-color="white"class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag

Rounded Buttons

Show code

HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 border text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Soft Color Buttons

Show code

HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-14 text-theme-10"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 border text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-18 text-theme-9"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-17 text-theme-11"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-31 text-theme-6"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Icon Buttons

Show code

HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagi data-feather="activity"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Activity HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700"HTMLCloseTag HTMLOpenTagi data-feather="hard-drive"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Hard Drive HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagi data-feather="calendar"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Calendar HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagi data-feather="share-2"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Share HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagi data-feather="trash"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Trash HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagi data-feather="image"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Image HTMLOpenTag/buttonHTMLCloseTag

Icon Only Buttons

Show code

HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="activity"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 border text-gray-700"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="hard-drive"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="calendar"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="share-2"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="trash"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="image"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag