Tailwindcss

Simple Card

A simple primary Alert, Check it out !

A simple success Alert, Check it out !

A simple danger Alert, Check it out !

A simple warning Alert, Check it out !

A simple Info Alert, Check it out !

A simple Secondary Alert, Check it out !

              
 <div class="p-2 bg-blue-200 text-blue-800 p-4 text-sm rounded border border-blue-300 my-3">
       A simple primary Alert, Check it out !
   </div>
   <div class="p-2 bg-green-100 text-green-800 p-4 text-sm rounded border border-green-300 my-3">
           A simple success Alert, Check it out !
   </div>
   <div class="p-2 bg-red-200 text-red-800 p-4 text-sm rounded border border-red-300 my-3">
       A simple danger Alert, Check it out !
   </div>
   <div class="p-2 bg-yellow-100 text-yellow-800 p-4 text-sm rounded border border-yellow-300 my-3">
       A simple warning Alert, Check it out !
   </div>
   <div class="p-2 bg-teal-100 text-teal-800 p-4 text-sm rounded border border-teal-300 my-3">
       A simple Info Alert, Check it out !
   </div>
   <div class="p-2 bg-gray-100 text-gray-700 p-4 text-sm rounded border border-gray-300 my-3">
       A simple Secondary Alert, Check it out !
 </div>

A simple primary Alert with an example link, Check it out !

A simple success Alert with an example link, Check it out !

A simple danger Alert with an example link, Check it out !

A simple warning Alert with an example link, Check it out !

A simple Info Alert with an example link, Check it out !

A simple Secondary Alert with an example link, Check it out !

                              
 <div class="p-2 bg-blue-200 text-blue-800 p-4 text-sm rounded border border-blue-300 my-3">
       A simple primary Alert with <a href="#" class="text-blue-900 font-semibold underline">an example link</a>, Check it out !
   </div>
   <div class="p-2 bg-green-100 text-green-800 p-4 text-sm rounded border border-green-300 my-3">
           A simple success Alert with <a href="#" class="text-green-900 font-semibold underline">an example link</a>, Check it out !
   </div>
   <div class="p-2 bg-red-200 text-red-800 p-4 text-sm rounded border border-red-300 my-3">
       A simple danger Alert with <a href="#" class="text-red-900 font-semibold underline">an example link</a>, Check it out !
   </div>
   <div class="p-2 bg-yellow-100 text-yellow-800 p-4 text-sm rounded border border-yellow-300 my-3">
       A simple warning Alert with <a href="#" class="text-yellow-900 font-semibold underline">an example link</a>, Check it out !
   </div>
   <div class="p-2 bg-teal-100 text-teal-800 p-4 text-sm rounded border border-teal-300 my-3">
       A simple Info Alert with <a href="#" class="text-info-900 font-semibold underline">an example link</a>, Check it out !
   </div>
   <div class="p-2 bg-gray-100 text-gray-800 p-4 text-sm rounded border border-gray-300 my-3">
       A simple Secondary Alert with <a href="#" class="text-gray-900 font-semibold underline">an example link</a>, Check it out !
 </div>

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

                              
 <div class="p-2 bg-green-100 text-green-800 p-4 text-sm rounded border border-green-300 my-3">
   <h4 class="text-lg font-semibold mb-2">Well done!</h4>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
   <hr class="my-3 bg-green-500 borber-b border-green-300">
   <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
   </p>
 </div>

A simple dismissable Alert, Check it out !

                      
 <div x-data="{show: true}" x-show="show" x-transition:leave.duration.400ms="" class="flex p-2 bg-blue-200 text-blue-800 p-4 text-sm rounded border border-blue-300 my-3">
   <div class="flex-grow">A simple dismissable Alert, Check it out !</div>
   <div @click="show = false" class="flex-shrink cursor-pointer text-blue-600 hover:text-blue-800" aria-label="Close">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
       </svg>
   </div>
 </div>

An example alert with an Icon !

                      
 <div class="flex p-2 bg-blue-200 text-blue-800 p-4 text-sm rounded border border-blue-300 my-3">
     <div class="flex-shrink mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
         </svg>
     </div>
     <div class="flex-grow">An example alert with an Icon !</div>
 </div>
 
 <div class="flex p-2 bg-red-200 text-red-800 p-4 text-sm rounded border border-red-300 my-3">
     <div class="flex-shrink mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
         </svg>
     </div>
     <div class="flex-grow">An example alert with an Icon !</div>
 </div>
 
 <div class="flex p-2 bg-green-200 text-green-800 p-4 text-sm rounded border border-green-300 my-3">
     <div class="flex-shrink mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
         </svg>
     </div>
     <div class="flex-grow">An example alert with an Icon !</div>
 </div>
 
 <div class="flex p-2 bg-yellow-200 text-yellow-800 p-4 text-sm rounded border border-yellow-300 my-3">
     <div class="flex-shrink mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
         </svg>
     </div>
     <div class="flex-grow">An example alert with an Icon !</div>
 </div>

INFO:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, rerum atque. Placeat totam unde quam voluptates facere neque, nam sint doloribus, eum error doloremque assumenda. Sint deserunt quidem quisquam nam?

WARNING:

OOPS:

                      
 <div class="border border-sky-400 border-2 rounded p-3 pt-6 bg-sky-200 relative my-2">
  <div class="absolute left-0 top-0 px-2 bg-sky-400 font-semibold text-gray-800 rounded-br text-sm">INFO:</div>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, rerum atque. Placeat totam unde quam voluptates facere neque, nam sint doloribus, eum error doloremque assumenda. Sint deserunt quidem quisquam nam?
  </div>
  <div class="border border-yellow-400 border-2 rounded p-3 pt-6 bg-yellow-100 relative my-2">
     <div class="absolute left-0 top-0 px-2 bg-yellow-400 font-semibold text-gray-800 rounded-br text-sm">WARNING:</div>
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, rerum atque. Placeat totam unde quam voluptates facere neque, nam sint doloribus, eum error doloremque assumenda. Sint deserunt quidem quisquam nam?
 </div>
 <div class="border border-red-400 border-2 rounded p-3 pt-6 bg-red-100 relative my-2">
     <div class="absolute left-0 top-0 px-2 bg-red-400 font-semibold text-gray-800 rounded-br text-sm">OOPS:</div>
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, rerum atque. Placeat totam unde quam voluptates facere neque, nam sint doloribus, eum error doloremque assumenda. Sint deserunt quidem quisquam nam?
 </div>

Updates have been made to your profile

Your team has made changes to your company profile since you last logged in.

                      
 <div class="space-y-5">
   <div class="relative mx-auto max-w-[400px] rounded-xl border border-secondary-50 bg-white p-4 text-sm shadow-lg">
     <button class="absolute top-4 right-4 ml-auto text-secondary-500 hover:text-secondary-900">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
         <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
       </svg>
     </button>
     <div class="flex space-x-4">
       <div class="flex-1">
         <h4 class="pr-6 font-medium text-secondary-900">Updates have been made to your profile</h4>
         <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
         <div class="mt-2 flex space-x-4">
           <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
           <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
         </div>
       </div>
     </div>
   </div>
 </div>

Updates have been made to your profile

Your team has made changes to your company profile since you last logged in.

                      
 <div class="space-y-5">
   <div class="relative mx-auto max-w-[400px] overflow-hidden rounded-xl border border-secondary-50 bg-white text-sm shadow-lg">
     <button class="absolute top-4 right-4 ml-auto text-secondary-500 hover:text-secondary-900">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
         <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
       </svg>
     </button>
     <div class="flex">
       <img class="h-auto w-24 object-cover" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
       <div class="flex-1 p-4">
         <h4 class="pr-6 font-medium text-secondary-900">Updates have been made to your profile</h4>
         <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
         <div class="mt-2 flex space-x-4">
           <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
           <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
         </div>
       </div>
     </div>
   </div>
 </div>

Taylor Swift 5 min ago

Your team has made changes to your company profile since you last logged in.

                      
 <div class="space-y-5">
   <div class="relative mx-auto max-w-[400px] rounded-md border border-secondary-50 bg-white p-4 text-sm shadow-lg">
     <button class="ttop-4 absolute right-4 ml-auto text-secondary-500 hover:text-secondary-900">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
         <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
       </svg>
     </button>
     <div class="flex space-x-4">
       <div class="relative h-10 w-10">
         <img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
         <span class="absolute right-0 bottom-0 h-2.5 w-2.5 rounded-full bg-green-400 ring ring-white"></span>
       </div>
       <div class="flex-1">
         <h4 class="pr-6 font-medium text-secondary-900">Taylor Swift <span class="ml-2 font-normal text-secondary-500">5 min ago</span></h4>
         <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
         <div class="mt-2 flex space-x-4">
           <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
           <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
         </div>
       </div>
     </div>
   </div>
 </div>

Set yourself free.

                      
 <div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
   <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
       <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
       </svg>
       <span class="sr-only">Fire icon</span>
   </div>
   <div class="ms-3 text-sm font-normal">Set yourself free.</div>
   <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
       <span class="sr-only">Close</span>
       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
       </svg>
   </button>
 </div>

Message sent successfully.

                      
 <div id="toast-simple" class="flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg shadow dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800" role="alert">
   <svg class="w-5 h-5 text-blue-600 dark:text-blue-500 rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 17 8 2L9 1 1 19l8-2Zm0 0V9"/>
   </svg>
   <div class="ps-4 text-sm font-normal">Message sent successfully.</div>
 </div>

Conversation archived.

Undo

                      
 <div id="toast-undo" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
   <div class="text-sm font-normal">
      Conversation archived.
   </div>
   <div class="flex items-center ms-auto space-x-2 rtl:space-x-reverse">
       <a class="text-sm font-medium text-blue-600 p-1.5 hover:bg-blue-100 rounded-lg dark:text-blue-500 dark:hover:bg-gray-700" href="#">Undo</a>
       <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-undo" aria-label="Close">
       <span class="sr-only">Close</span>
       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
       </svg>
   </button>
   </div>
 </div>

Jese Leos

Hi Neil, thanks for sharing your thoughts regarding Flowbite.

                      
 <div id="toast-message-cta" class="w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-400" role="alert">
   <div class="flex">
       <img class="w-8 h-8 rounded-full" src="https://dummyimage.com/720x400" alt="Jese Leos image"/>
       <div class="ms-3 text-sm font-normal">
           <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
           <div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div> 
           <a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>   
       </div>
       <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white justify-center items-center flex-shrink-0 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-message-cta" aria-label="Close">
           <span class="sr-only">Close</span>
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
       </button>
   </div>
 </div>

New notification

Bonnie Green

commented on your photo

a few seconds ago

                      
 <div id="toast-notification" class="w-full max-w-xs p-4 text-gray-900 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-300" role="alert">
   <div class="flex items-center mb-3">
       <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">New notification</span>
       <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white justify-center items-center flex-shrink-0 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-notification" aria-label="Close">
           <span class="sr-only">Close</span>
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
       </button>
   </div>
   <div class="flex items-center">
       <div class="relative inline-block shrink-0">
           <img class="w-12 h-12 rounded-full" src="https://dummyimage.com/120x100" alt="Jese Leos image"/>
           <span class="absolute bottom-0 right-0 inline-flex items-center justify-center w-6 h-6 bg-blue-600 rounded-full">
               <svg class="w-3 h-3 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 18" fill="currentColor">
                   <path d="M18 4H16V9C16 10.0609 15.5786 11.0783 14.8284 11.8284C14.0783 12.5786 13.0609 13 12 13H9L6.846 14.615C7.17993 14.8628 7.58418 14.9977 8 15H11.667L15.4 17.8C15.5731 17.9298 15.7836 18 16 18C16.2652 18 16.5196 17.8946 16.7071 17.7071C16.8946 17.5196 17 17.2652 17 17V15H18C18.5304 15 19.0391 14.7893 19.4142 14.4142C19.7893 14.0391 20 13.5304 20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4Z" fill="currentColor"/>
                   <path d="M12 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2V9C0 9.53043 0.210714 10.0391 0.585786 10.4142C0.960859 10.7893 1.46957 11 2 11H3V13C3 13.1857 3.05171 13.3678 3.14935 13.5257C3.24698 13.6837 3.38668 13.8114 3.55279 13.8944C3.71889 13.9775 3.90484 14.0126 4.08981 13.996C4.27477 13.9793 4.45143 13.9114 4.6 13.8L8.333 11H12C12.5304 11 13.0391 10.7893 13.4142 10.4142C13.7893 10.0391 14 9.53043 14 9V2C14 1.46957 13.7893 0.960859 13.4142 0.585786C13.0391 0.210714 12.5304 0 12 0Z" fill="currentColor"/>
                   </svg>
               <span class="sr-only">Message icon</span>
           </span>
       </div>
       <div class="ms-3 text-sm font-normal">
           <div class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</div>
           <div class="text-sm font-normal">commented on your photo</div> 
           <span class="text-xs font-medium text-blue-600 dark:text-blue-500">a few seconds ago</span>   
       </div>
   </div>
 </div>

Update available

A new software version is available for download.

Update

Not now

                      
 <div id="toast-interactive" class="w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-400" role="alert">
   <div class="flex">
       <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:text-blue-300 dark:bg-blue-900">
           <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
           </svg>
           <span class="sr-only">Refresh icon</span>
       </div>
       <div class="ms-3 text-sm font-normal">
           <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
           <div class="mb-2 text-sm font-normal">A new software version is available for download.</div> 
           <div class="grid grid-cols-2 gap-2">
               <div>
                   <a href="#" class="inline-flex justify-center w-full px-2 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Update</a>
               </div>
               <div>
                   <a href="#" class="inline-flex justify-center w-full px-2 py-1.5 text-xs font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700">Not now</a> 
               </div>
           </div>    
       </div>
       <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white items-center justify-center flex-shrink-0 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-interactive" aria-label="Close">
           <span class="sr-only">Close</span>
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
       </button>
   </div>
 </div>

This is a section of some simple filler text, also known as placeholder text.

Learn more

                      
 <div class="bg-white pt-6 sm:pt-8 lg:pt-12">
   <!-- banner - start -->
   <div class="mx-auto max-w-screen-2xl px-4 pb-4 md:px-8">
     <div class="relative flex flex-wrap rounded-lg bg-indigo-500 px-4 py-3 shadow-lg sm:flex-nowrap sm:items-center sm:justify-center sm:gap-3 sm:pr-8 md:px-8">
       <div class="order-1 mb-2 inline-block w-11/12 max-w-screen-sm text-sm text-white sm:order-none sm:mb-0 sm:w-auto md:text-base">This is a section of some simple filler text, also known as placeholder text.</div>
 
       <a href="#" class="order-last inline-block w-full whitespace-nowrap rounded-lg bg-indigo-600 px-4 py-2 text-center text-xs font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-700 focus-visible:ring active:bg-indigo-800 sm:order-none sm:w-auto md:text-sm">Learn more</a>
 
       <!-- close button - start -->
       <div class="order-2 flex w-1/12 items-start justify-end sm:absolute sm:right-0 sm:order-none sm:mr-2 sm:w-auto xl:mr-3">
         <button type="button" class="text-white transition duration-100 hover:text-indigo-100 active:text-indigo-200">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 xl:h-6 xl:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
       </div>
       <!-- close button - end -->
     </div>
   </div>
   <!-- banner - end -->
 </div>

Want to be millionaire ? It's today or never.

                      
 <div class="bg-white dark:bg-gray-800 ">
   <div class="lg:flex lg:items-center lg:justify-between w-full mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
       <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
           <span class="block">
               Want to be millionaire ?
           </span>
           <span class="block text-indigo-500">
               It&#x27;s today or never.
           </span>
       </h2>
       <div class="lg:mt-0 lg:flex-shrink-0">
           <div class=" inline-flex rounded-md shadow">
               <button type="button" class="py-4 px-6  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                   Get started
               </button>
           </div>
       </div>
   </div>
 </div>

Want to be millionaire ? It's today or never.

                      
 <div class="bg-white dark:bg-gray-800 ">
   <div class="lg:flex lg:items-center lg:justify-between w-full mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
       <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
           <span class="block">
               Want to be millionaire ?
           </span>
           <span class="block text-indigo-500">
               It&#x27;s today or never.
           </span>
       </h2>
       <div class="lg:mt-0 lg:flex-shrink-0">
           <div class=" inline-flex rounded-md shadow">
               <button type="button" class="py-4 px-6  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                   Get started
               </button>
           </div>
           <div class="inline-flex ml-3 rounded-md shadow">
               <button type="button" class="py-4 px-6  bg-gray-600 hover:bg-gray-700 focus:ring-gray-500 focus:ring-offset-gray-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                   Invite friend
               </button>
           </div>
       </div>
   </div>
 </div>

Want to be millionaire ? It's today or never.

                      
 <div class="bg-white dark:bg-gray-800 ">
    <div class="text-center w-full mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
        <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
            <span class="block">
                Want to be millionaire ?
            </span>
            <span class="block text-indigo-500">
                It&#x27;s today or never.
            </span>
        </h2>
        <div class="lg:mt-0 lg:flex-shrink-0">
            <div class="mt-12 inline-flex rounded-md shadow">
                <button type="button" class="py-4 px-6  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                    Get started
                </button>
            </div>
        </div>
    </div>
  </div>

Want to be millionaire ? It's today or never.

I had noticed that both in the very poor and very rich extremes of society the mad were often allowed to mingle freely

                      
 <div class="bg-white dark:bg-gray-800 ">
   <div class="text-center w-full mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
       <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
           <span class="block">
               Want to be millionaire ?
           </span>
           <span class="block text-indigo-500">
               It&#x27;s today or never.
           </span>
       </h2>
       <p class="text-xl mt-4 max-w-md mx-auto text-gray-400">
           I had noticed that both in the very poor and very rich extremes of society the mad were often allowed to mingle freely
       </p>
       <div class="lg:mt-0 lg:flex-shrink-0">
           <div class="mt-12 inline-flex rounded-md shadow">
               <button type="button" class="py-4 px-6  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                   Get started
               </button>
           </div>
       </div>
   </div>
 </div>

Want to be millionaire ? It's today or never.

                      
 <div class="bg-white dark:bg-gray-800 ">
   <div class="text-start w-full mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
       <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
           <span class="block">
               Want to be millionaire ?
           </span>
           <span class="block text-indigo-500">
               It&#x27;s today or never.
           </span>
       </h2>
       <div class="lg:mt-0 lg:flex-shrink-0">
           <div class="mt-12 inline-flex rounded-md shadow">
               <button type="button" class="py-4 px-6  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                   Get started
               </button>
           </div>
       </div>
   </div>
 </div>

Want to be millionaire ? It's today or never.

                      
 <div class="bg-white dark:bg-gray-800 overflow-hidden relative">
   <div class="text-start w-1/2 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
       <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
           <span class="block">
               Want to be millionaire ?
           </span>
           <span class="block text-indigo-500">
               It&#x27;s today or never.
           </span>
       </h2>
       <div class="lg:mt-0 lg:flex-shrink-0">
           <div class="mt-12 inline-flex rounded-md shadow">
               <button type="button" class="py-4 px-6  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                   Get started
               </button>
           </div>
       </div>
   </div>
   <img src="https://dummyimage.com/180x500" class="absolute top-0 right-0 hidden h-full max-w-1/2 lg:block"/>
 </div>

Want to be millionaire ? It's today or never.

I had noticed that both in the very poor and very rich extremes of society the mad were often allowed to mingle freely

                      
 <div class="bg-white dark:bg-gray-800 overflow-hidden relative">
   <div class="text-start w-1/2 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
       <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
           <span class="block">
               Want to be millionaire ?
           </span>
           <span class="block text-indigo-500">
               It&#x27;s today or never.
           </span>
       </h2>
       <p class="text-xl mt-4 text-gray-400">
           I had noticed that both in the very poor and very rich extremes of society the mad were often allowed to mingle freely
       </p>
       <div class="lg:mt-0 lg:flex-shrink-0">
           <div class="mt-12 inline-flex rounded-md shadow">
               <button type="button" class="py-4 px-6  bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                   Get started
               </button>
           </div>
       </div>
   </div>
   <img src="https://dummyimage.com/500x500" class="absolute top-0 right-0 hidden h-full max-w-1/2 lg:block"/>
 </div>

We've got more coming...

Want to hear from us when we add new components? Sign up for our newsletter and we'll email you every time we release a new batch of components.

                      
 <div class="bg-white dark:bg-gray-800">
    <div class="relative px-4 py-6 overflow-hidden sm:px-6 sm:py-8 lg:p-12 xl:p-16">
        <h2 class="text-2xl font-semibold font-display text-black dark:text-white sm:text-3xl">
            We&#x27;ve got more coming...
        </h2>
        <p class="mt-2 max-w-xl text-base text-gray-400">
            Want to hear from us when we add new components? Sign up for our newsletter and we&#x27;ll email you every time we release a new batch of components.
        </p>
        <form>
            <div class="mt-6 sm:flex jusitfy-start">
                <form class="flex flex-col justify-center w-3/4 max-w-sm space-y-3 md:flex-row md:w-full md:space-x-3 md:space-y-0">
                    <div class=" relative ">
                        <input type="text" id="&quot;form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
                        </div>
                        <button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
                            Subscribe
                        </button>
                    </form>
                </div>
            </form>
            <div class="absolute inset-y-0 right-0 hidden lg:block lg:left-2/3 xl:left-1/2">
                <picture>
                    <source srcSet="/images/object/5.webp" type="image/webp"/>
                        <source srcSet="/images/object/5.png"/>

                        </picture>
                    </div>
                </div>
            </div>

Receive alert about new commit or pull request on your github

No account or email required. We use push notifications. You can choose between several modes and define your own alert threshold.

We care about the protection of your data. Your data is safe and never used for commercial purposes.

In order to receive the notifications, you must give permission sufficient to your web browser.

                      
 <div class="px-6 py-6 bg-purple-700 rounded-lg dark:bg-gray-800 md:py-12 md:px-12 lg:py-16 lg:px-16 xl:flex xl:items-center">
   <div class="xl:w-0 xl:flex-1">
       <h2 class="text-2xl font-extrabold leading-8 tracking-tight text-white sm:text-3xl sm:leading-9">
           Receive alert about new commit or pull request on your github
       </h2>
       <p class="max-w-3xl mt-3 text-lg leading-6 text-indigo-200">
           No account or email required. We use push notifications. You can choose between several modes and define your own alert threshold.
       </p>
   </div>
   <div class="mt-8 sm:w-full sm:max-w-md xl:mt-0 xl:ml-8">
       <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
           <button class="flex items-center justify-center w-full px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-purple-500 border border-transparent rounded-md hover:bg-purple-400 focus:outline-none focus:bg-purple-400">
               Notify me
           </button>
       </div>
       <p class="mt-3 text-sm leading-5 text-indigo-200">
           We care about the protection of your data. Your data is safe and never used for commercial purposes.
       </p>
       <p class="text-sm leading-5 text-indigo-200">
           In order to receive the notifications, you must give permission sufficient to your web browser.
       </p>
   </div>
 </div>

Mother hearth host your travel

The state of Utah in the united states is home to lots of beautiful National parks, Bryce national canion park ranks as three of the most magnificient & awe inspiring.

                      
 <div class="bg-white dark:bg-gray-800 overflow-hidden relative lg:flex lg:items-center">
   <div class="w-full py-12 px-4 sm:px-6 lg:py-16 lg:px-8 z-20">
       <h2 class="text-3xl font-extrabold text-black dark:text-white sm:text-4xl">
           <span class="block">
               Mother hearth host your travel
           </span>
       </h2>
       <p class="text-md mt-4 text-gray-400">
           The state of Utah in the united states is home to lots of beautiful National parks, Bryce national canion park ranks as three of the most magnificient &amp; awe inspiring.
       </p>
       <div class="lg:mt-0 lg:flex-shrink-0">
           <div class="mt-12 inline-flex rounded-md shadow">
               <button type="button" class="py-2 px-4  bg-green-500 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-green-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
                   Get started
               </button>
           </div>
       </div>
   </div>
   <div class="flex items-center gap-8 p-8 lg:p-24">
       <img src="https://dummyimage.com/216x270" class="w-1/2 rounded-lg" alt="Tree"/>
       <div>
           <img src="https://dummyimage.com/186x106" class="mb-8 rounded-lg" alt="Tree"/>
           <img src="https://dummyimage.com/186x106" class="rounded-lg" alt="Tree"/>
       </div>
   </div>
 </div>

Be on Time

Dimension of reality that makes change possible and understandable. An indefinite and homogeneous environment in which natural events and human existence take place.

Get started Read more

                      
 <div class="relative z-20 flex items-center overflow-hidden bg-white dark:bg-gray-800">
    <div class="container relative flex px-6 py-16 mx-auto">
        <div class="relative z-20 flex flex-col sm:w-2/3 lg:w-2/5">
            <span class="w-20 h-2 mb-12 bg-gray-800 dark:bg-white">
            </span>
            <h1 class="flex flex-col text-6xl font-black leading-none text-gray-800 uppercase font-bebas-neue sm:text-8xl dark:text-white">
                Be on
                <span class="text-5xl sm:text-7xl">
                    Time
                </span>
            </h1>
            <p class="text-sm text-gray-700 sm:text-base dark:text-white">
                Dimension of reality that makes change possible and understandable. An indefinite and homogeneous environment in which natural events and human existence take place.
            </p>
            <div class="flex mt-8">
                <a href="#" class="px-4 py-2 mr-4 text-white uppercase bg-pink-500 border-2 border-transparent rounded-lg text-md hover:bg-pink-400">
                    Get started
                </a>
                <a href="#" class="px-4 py-2 text-pink-500 uppercase bg-transparent border-2 border-pink-500 rounded-lg dark:text-white hover:bg-pink-500 hover:text-white text-md">
                    Read more
                </a>
            </div>
        </div>
        <div class="relative hidden sm:block sm:w-1/3 lg:w-3/5">
            <img src="https://dummyimage.com/384x453" class="max-w-xs m-auto md:max-w-sm"/>
        </div>
    </div>
 </div>

The React Framework for Production

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Get started Documentation

                      
 <div class="relative z-20 flex items-center bg-white dark:bg-gray-800">
   <div class="container relative flex flex-col items-center justify-between px-6 py-8 mx-auto">
       <div class="flex flex-col">
           <h1 class="w-full text-4xl font-light text-center text-gray-800 uppercase sm:text-5xl dark:text-white">
               The React Framework for Production
           </h1>
           <h2 class="w-full max-w-2xl py-8 mx-auto text-xl font-light text-center text-gray-500 dark:text-white">
               Next.js gives you the best developer experience with all the features you need for production: hybrid static &amp; server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
           </h2>
           <div class="flex items-center justify-center mt-4">
               <a href="#" class="px-4 py-2 mr-4 text-white uppercase bg-gray-800 border-2 border-transparent text-md hover:bg-gray-900">
                   Get started
               </a>
               <a href="#" class="px-4 py-2 text-gray-800 uppercase bg-transparent border-2 border-gray-800 dark:text-white hover:bg-gray-800 hover:text-white text-md">
                   Documentation
               </a>
           </div>
       </div>
   </div>
 </div>

Opening tickets

Saturday 17

@ 10:00 AM

0 1

Day

1 8

Hour

5 0

Min

1 9

Second

                      
 <section class="py-8 bg-indigo-500 bg-gradient dark:bg-gray-800 md:py-16">
   <div class="box-content max-w-5xl px-5 mx-auto">
       <div class="flex flex-col items-center -mx-5 md:flex-row">
           <div class="w-full px-5 mb-5 text-center md:mb-0 md:text-left">
               <h6 class="text-xs font-semibold text-indigo-800 uppercase md:text-base dark:text-gray-100">
                   Opening tickets
               </h6>
               <h3 class="text-2xl font-bold text-white font-heading md:text-4xl">
                   Saturday 17
               </h3>
               <h3 class="text-lg font-bold leading-tight text-white font-heading md:text-xl">
                   @ 10:00 AM
               </h3>
           </div>
           <div class="w-full px-5 md:w-auto">
               <div class="flex justify-center text-center text-white">
                   <div class="w-20 py-3 mx-2 border rounded-lg md:w-24 border-light-300 bg-light-100 md:py-4">
                       <div class="text-2xl font-semibold md:text-3xl">
                           <span>
                               0
                           </span>
                           <span>
                               1
                           </span>
                       </div>
                       <div class="mt-3 text-xs uppercase opacity-75">
                           Day
                       </div>
                   </div>
                   <div class="w-20 py-3 mx-2 border rounded-lg md:w-24 border-light-300 bg-light-100 md:py-4">
                       <div class="text-2xl font-semibold md:text-3xl">
                           <span>
                               1
                           </span>
                           <span>
                               8
                           </span>
                       </div>
                       <div class="mt-3 text-xs uppercase opacity-75 ">
                           Hour
                       </div>
                   </div>
                   <div class="w-20 py-3 mx-2 border rounded-lg md:w-24 border-light-300 bg-light-100 md:py-4">
                       <div class="text-2xl font-semibold md:text-3xl">
                           <span>
                               5
                           </span>
                           <span>
                               0
                           </span>
                       </div>
                       <div class="mt-3 text-xs uppercase opacity-75 ">
                           Min
                       </div>
                   </div>
                   <div class="w-20 py-3 mx-2 border rounded-lg md:w-24 border-light-300 bg-light-100 md:py-4">
                       <div class="text-2xl font-semibold md:text-3xl">
                           <span>
                               1
                           </span>
                           <span>
                               9
                           </span>
                       </div>
                       <div class="mt-3 text-xs uppercase opacity-75 ">
                           Second
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
 </section>

2179 +

Cups of coffee

13 +

Ongoing contracts

31 +

Finished projects

3 +

Years in business

                      
 <section class="bg-indigo-800">
   <div class="container grid grid-cols-2 gap-8 py-8 mx-auto text-center md:grid-cols-4">
       <div>
           <h5 class="text-5xl font-bold text-white">
               <span class="inline text-white">
                   2179
               </span>
               <span class="text-indigo-200">
                   +
               </span>
           </h5>
           <p class="text-xs font-medium tracking-wide text-indigo-100 uppercase">
               Cups of coffee
           </p>
       </div>
       <div>
           <h5 class="text-5xl font-bold text-white">
               <span class="inline text-white">
                   13
               </span>
               <span class="text-indigo-200">
                   +
               </span>
           </h5>
           <p class="text-xs font-medium tracking-wide text-indigo-100 uppercase">
               Ongoing contracts
           </p>
       </div>
       <div>
           <h5 class="text-5xl font-bold text-white">
               <span class="inline text-white">
                   31
               </span>
               <span class="text-indigo-200">
                   +
               </span>
           </h5>
           <p class="text-xs font-medium tracking-wide text-indigo-100 uppercase">
               Finished projects
           </p>
       </div>
       <div>
           <h5 class="text-5xl font-bold text-white">
               <span class="inline text-white">
                   3
               </span>
               <span class="text-indigo-200">
                   +
               </span>
           </h5>
           <p class="text-xs font-medium tracking-wide text-indigo-100 uppercase">
               Years in business
           </p>
       </div>
   </div>
 </section>

Used by leading architects, home builders renovators.

Feel confident in choosing the best energy assessor for your energy rating.

119

Energy raters

Quotes on average

24 hours

Average turnaround

                      
 <section class="max-w-screen-xl px-4 py-12 mx-auto bg-green-500 dark:bg-gray-800 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
   <div class="max-w-4xl mx-auto text-center">
       <h2 class="text-3xl font-extrabold leading-9 text-white sm:text-4xl sm:leading-10">
           Used by leading architects, home builders renovators.
       </h2>
       <p class="mt-3 text-base leading-7 text-white sm:mt-4">
           Feel confident in choosing the best energy assessor for your energy rating.
       </p>
   </div>
   <div class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">
       <div>
           <p class="text-5xl font-extrabold leading-none text-white">
               119
           </p>
           <p class="mt-2 text-base font-medium leading-6 text-white">
               Energy raters
           </p>
       </div>
       <div class="mt-10 sm:mt-0">
           <p class="text-5xl font-extrabold leading-none text-white">
               6
           </p>
           <p class="mt-2 text-base font-medium leading-6 text-white">
               Quotes on average
           </p>
       </div>
       <div class="mt-10 sm:mt-0">
           <p class="text-5xl font-extrabold leading-none text-white">
               24 hours
           </p>
           <p class="mt-2 text-base font-medium leading-6 text-white">
               Average turnaround
           </p>
       </div>
   </div>
   <div class="flex p-4 mx-auto mt-4 w-52">
       <button type="button" class="w-full px-4 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in shadow-md bg-gradient-to-r from-green-400 to-green-400 focus:outline-none focus:ring-2 focus:ring-offset-2 ">
           Buy the kit
       </button>
   </div>
 </section>