Pages
Users
Arnold Schwarzenegger
arnoldschwarzenegger@left4code.com
Denzel Washington
denzelwashington@left4code.com
Leonardo DiCaprio
leonardodicaprio@left4code.com
Denzel Washington
denzelwashington@left4code.com
Products
Nike Tanjun
Sport &Outdoor
Sony Master Series A9G
Electronic
Oppo Find X2 Pro
Smartphone &Tablet
Nikon Z6
Photography
Notifications
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
Denzel Washington
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
Leonardo DiCaprio
06:05 AM
There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomi
Denzel Washington
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
Kate Winslet
01:10 PM
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
Modal
Blank Modal
Show code
This is totally awesome blank modal!
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#basic-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="basic-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content p-10 text-center"HTMLCloseTag This is totally awesome blank modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Modal Size
Show code
This is totally awesome small modal!
This is totally awesome medium modal!
This is totally awesome large modal!
This is totally awesome superlarge modal!
HTMLOpenTagdiv class="text-center text-sm-left"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#small-modal-size-preview"class="button mr-1 mb-2 inline-block bg-theme-1 text-white"HTMLCloseTagShow Small ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#medium-modal-size-preview"class="button mr-1 mb-2 inline-block bg-theme-1 text-white"HTMLCloseTagShow Medium ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#large-modal-size-preview"class="button mr-1 mb-2 inline-block bg-theme-1 text-white"HTMLCloseTagShow Large ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#superlarge-modal-size-preview"class="button mr-1 mb-2 inline-block bg-theme-1 text-white"HTMLCloseTagShow Superlarge ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="small-modal-size-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content modal__content--sm p-10 text-center"HTMLCloseTag This is totally awesome small modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="medium-modal-size-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content p-10 text-center"HTMLCloseTag This is totally awesome medium modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="large-modal-size-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content modal__content--lg p-10 text-center"HTMLCloseTag This is totally awesome large modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="superlarge-modal-size-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content modal__content--xl p-10 text-center"HTMLCloseTag This is totally awesome superlarge modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Programmatically Show/Hide Modal
Show code
// Show modal $('#programmatically-show-modal').on('click',function(){$('#programmatically-modal').modal('show')}) // Hide modal $('#programmatically-hide-modal').on('click',function(){$('#programmatically-modal').modal('hide')}) // Toggle modal $('#programmatically-toggle-modal').on('click',function(){$('#programmatically-modal').modal('toggle')}) Warning Modal
Show code
Oops...
Something went wrong!
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#warning-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="warning-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="x-circle"class="w-16 h-16 text-theme-6 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagOops...HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagSomething went wrong!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button"data-dismiss="modal"class="button w-24 bg-theme-1 text-white"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-5 text-center border-t border-gray-200"HTMLCloseTag HTMLOpenTaga href=""class="text-theme-1"HTMLCloseTagWhy do I have this issue?HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Modal With Close Button
Show code
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#button-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="button-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content relative"HTMLCloseTag HTMLOpenTaga data-dismiss="modal"href="javascript:;"class="absolute right-0 top-0 mt-3 mr-3"HTMLCloseTag HTMLOpenTagi data-feather="x"class="w-8 h-8 text-gray-500"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="check-circle"class="w-16 h-16 text-theme-9 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagModal ExampleHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagModal with close buttonHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button"data-dismiss="modal"class="button w-24 bg-theme-1 text-white"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Overlapping Modal
Show code
Click button bellow to show overlapping modal!
Show overlapping modalThis is totally awesome overlapping modal!
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#overlapping-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="overlapping-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content px-5 py-10"HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-3"HTMLCloseTagClick button bellow to show overlapping modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#next-overlapping-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow overlapping modalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="next-overlapping-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content p-10 text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-2"HTMLCloseTagThis is totally awesome overlapping modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Header & Footer Modal
Show code
Broadcast Message
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#header-footer-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="header-footer-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagBroadcast MessageHTMLOpenTag/h2HTMLCloseTag HTMLOpenTagbutton class="button border items-center text-gray-700 hidden sm:flex"HTMLCloseTag HTMLOpenTagi data-feather="file"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown relative sm:hidden"HTMLCloseTag HTMLOpenTaga class="dropdown-toggle w-5 h-5 block"href="javascript:;"HTMLCloseTag HTMLOpenTagi data-feather="more-horizontal"class="w-5 h-5 text-gray-700"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="dropdown-box mt-5 absolute w-40 top-0 right-0 z-20"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box p-2"HTMLCloseTag HTMLOpenTaga href="javascript:;"class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="file"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-5 grid grid-cols-12 gap-4 row-gap-3"HTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagFromHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2 flex-1"placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagToHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2 flex-1"placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagSubjectHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2 flex-1"placeholder="Important Meeting"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagHas the WordsHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2 flex-1"placeholder="Job,Work,Documentation"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagDoesn't HaveHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2 flex-1"placeholder="Job,Work,Documentation"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagSizeHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagselect class="input w-full border mt-2 flex-1"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTag10HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag25HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag35HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag50HTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 py-3 text-right border-t border-gray-200"HTMLCloseTag HTMLOpenTagbutton type="button"class="button w-20 border text-gray-700 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button"class="button w-20 bg-theme-1 text-white"HTMLCloseTagSendHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Delete Modal
Show code
Are you sure?
Do you really want to delete these records? This process cannot be undone.
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#delete-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="delete-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="x-circle"class="w-16 h-16 text-theme-6 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagAre you sure?HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagDo you really want to delete these records? This process cannot be undone.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button"data-dismiss="modal"class="button w-24 border text-gray-700 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button"class="button w-24 bg-theme-6 text-white"HTMLCloseTagDeleteHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Success Modal
Show code
Good job!
You clicked the button!
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#success-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="success-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="check-circle"class="w-16 h-16 text-theme-9 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="text-3xl mt-5"HTMLCloseTagGood job!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagYou clicked the button!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button"data-dismiss="modal"class="button w-24 bg-theme-1 text-white"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Slick Modal
Show code
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;"data-toggle="modal"data-target="#slick-modal-preview"class="button inline-block bg-theme-1 text-white"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal"id="slick-modal-preview"HTMLCloseTag HTMLOpenTagdiv class="modal__content"HTMLCloseTag HTMLOpenTagdiv class="p-5"HTMLCloseTag HTMLOpenTagdiv class="slider mx-6 center-mode"HTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template"src="dist/images/preview-7.jpg"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template"src="dist/images/preview-5.jpg"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template"src="dist/images/preview-14.jpg"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-md overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Midone Tailwind HTML Admin Template"src="dist/images/preview-4.jpg"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag