Elements
Elements 01
=
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-2 items-center">
<a href="#" class="inline-block bg-gray-600 font-semibold text-xs rounded-lg py-3 px-4 lg:px-8 text-white hover:bg-gray-500">XS button</a>
<a href="#" class="inline-block bg-gray-600 font-semibold text-sm rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Small button</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Default button</a>
<a href="#" class="inline-block bg-gray-600 font-semibold text-lg rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Large button</a>
<a href="#" class="inline-block bg-gray-600 font-semibold text-xl rounded-lg py-5 px-5 lg:px-10 text-white hover:bg-gray-500">XL button</a>
</div>
Elements 02
=
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-2 items-center">
<a href="#" class="inline-block bg-transparent font-semibold text-xs rounded-lg py-3 px-4 lg:px-8 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">XS button</a>
<a href="#" class="inline-block bg-transparent font-semibold text-sm rounded-lg py-4 px-5 lg:px-8 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">Small button</a>
<a href="#" class="inline-block bg-transparent font-semibold rounded-lg py-4 px-5 lg:px-8 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">Default button</a>
<a href="#" class="inline-block bg-transparent font-semibold text-lg rounded-lg py-4 px-5 lg:px-8 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">Large button</a>
<a href="#" class="inline-block bg-transparent font-semibold text-xl rounded-lg py-5 px-5 lg:px-10 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">XL button</a>
</div>
Elements 03
=
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-6 items-center">
<a href="#" class="bg-gray-600 text-white rounded-full flex items-center justify-center p-1 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="bg-gray-600 text-white rounded-full flex items-center justify-center p-1 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="bg-gray-600 text-white rounded-full flex items-center justify-center p-2 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="bg-gray-600 text-white rounded-full flex items-center justify-center p-2 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-10">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="bg-gray-600 text-white rounded-full flex items-center justify-center p-3 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-12">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
</a>
</div>
Elements 04
=
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-6 items-center">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-10 h-10 rounded-full">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-12 h-12 rounded-full">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-16 h-16 rounded-full">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-20 h-20 rounded-full">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-24 h-24 rounded-full">
</div>
Elements 05
=
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-6 items-center">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-10 h-10 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-12 h-12 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-16 h-16 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-20 h-20 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-24 h-24 rounded-lg">
</div>
Elements 06
=
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-2 items-center">
<a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold text-xs rounded-lg py-3 px-4 lg:px-8 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
</svg>
<span>XS button</span>
</a>
<a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold text-sm rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
</svg>
<span>Small button</span>
</a>
<a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
</svg>
<span>Default button</span>
</a>
<a href="#" class="inline-flex space-x-3 items-center bg-gray-600 font-semibold text-lg rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
</svg>
<span>Large button</span>
</a>
<a href="#" class="inline-flex space-x-3 items-center bg-gray-600 font-semibold text-xl rounded-lg py-5 px-5 lg:px-10 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
</svg>
<span>XL button</span>
</a>
</div>
Elements 07
=
<div class="flex flex-row -space-x-4">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="image placeholder" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
</div>
Elements 08
=
<div class="flex flex-row space-x-2">
<a href="#" class="inline-block bg-transparent font-semibold rounded-lg py-2 px-2 md:px-5 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">Prev</a>
<a href="#" class="inline-block bg-transparent font-semibold rounded-lg py-2 px-2 md:px-5 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">1</a>
<a href="#" class="inline-block bg-transparent font-semibold rounded-lg py-2 px-2 md:px-5 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">2</a>
<a href="#" class="inline-block bg-transparent font-semibold rounded-lg py-2 px-2 md:px-5 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">3</a>
<a href="#" class="inline-block bg-transparent font-semibold rounded-lg py-2 px-2 md:px-5 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">4</a>
<a href="#" class="inline-block bg-transparent font-semibold rounded-lg py-2 px-2 md:px-5 text-gray-600 border-2 border-gray-300 hover:bg-gray-600 hover:text-white">Next</a>
</div>
Elements 09
=
<div class="flex flex-row divide-x divide-gray-300 border border-gray-300 rounded-lg overflow-hidden">
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-10 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-10 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">1</a>
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-10 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">2</a>
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-10 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">3</a>
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-10 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">4</a>
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-10 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">5</a>
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-10 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</div>
Elements 10
=
<div class="flex flex-row divide-x divide-gray-300 border border-gray-300 rounded-lg overflow-hidden">
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-24 md:w-32 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">Link</a>
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-24 md:w-32 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">Link</a>
<a href="#" class="inline-flex items-center justify-center bg-transparent font-semibold w-24 md:w-32 h-10 text-gray-600 hover:bg-gray-600 hover:text-white">Link</a>
</div>
Elements 11
=
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-6 items-center">
<a href="#" class="bg-gray-600 text-white rounded-md flex items-center justify-center p-1 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</a>
<a href="#" class="bg-gray-600 text-white rounded-lg flex items-center justify-center p-2 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</a>
<a href="#" class="bg-gray-600 text-white rounded-lg flex items-center justify-center p-2 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</a>
<a href="#" class="bg-gray-600 text-white rounded-lg flex items-center justify-center p-2 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-10">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</a>
<a href="#" class="bg-gray-600 text-white rounded-lg flex items-center justify-center p-3 hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-12">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</a>
</div>
Elements 12
=
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-2 items-center">
<a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold text-xs rounded-full py-3 px-4 lg:px-8 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
</svg>
<span>XS button</span>
</a>
<a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold text-sm rounded-full py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5">
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
</svg>
<span>Small button</span>
</a>
<a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold rounded-full py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6">
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
</svg>
<span>Default button</span>
</a>
<a href="#" class="inline-flex space-x-3 items-center bg-gray-600 font-semibold text-lg rounded-full py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7">
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
</svg>
<span>Large button</span>
</a>
<a href="#" class="inline-flex space-x-3 items-center bg-gray-600 font-semibold text-xl rounded-full py-5 px-5 lg:px-10 text-white hover:bg-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
</svg>
<span>XL button</span>
</a>
</div>
Elements 13
=
<div class="py-2 px-4 rounded-full shadow-lg flex space-x-2">
<span class="bg-gray-600 text-white rounded-full px-2 text-sm">New</span>
<span>Resources exquisite set arranging moonlight </span>
</div>
Elements 14
=
<div class="py-2 px-4 rounded-full bg-gray-200 flex space-x-2">
<span class="bg-gray-600 text-white rounded-full px-2 text-sm">New</span>
<span>Resources exquisite set arranging moonlight </span>
</div>
Elements 15
=
<div class="py-2 px-4 rounded-full bg-gray-200 flex items-center space-x-2">
<span class="bg-gray-600 text-white rounded-full px-2 text-sm inline-flex items-center h-5 ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</span>
<span>10 new messages</span>
<button class="w-3 h-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
Elements 16
=
<div class="py-3 px-4 bg-gray-200 w-full">
<div class="max-w-lg mx-auto flex space-x-2">
<span class="bg-gray-600 text-white rounded-full px-2 text-sm">New</span>
<span>Resources exquisite set arranging moonlight </span>
</div>
</div>
Elements 17
=
<div class="py-3 px-4 bg-gray-200 w-full">
<div class="max-w-screen-xl mx-auto flex space-x-2 justify-between items-center">
<div class="flex space-x-2 justify-between">
<span class="bg-gray-600 text-white rounded-full px-2 text-sm">sale</span>
<span>Ham followed now ecstatic use speaking exercise may repeated.</span>
</div>
<button class="w-4 h-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
Elements 18
=
<div class="py-2 pl-2 pr-4 rounded-md bg-gray-200 flex items-center space-x-2 border-l-8 border-gray-300">
<span>This is an alert that need your attention</span>
<button class="w-3 h-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
Elements 19
=
<div class="bg-white rounded-lg shadow py-4 px-8 divide-gray-200 divide-y text-gray-600">
<a href="#" class="flex items-center space-x-4 py-4 hover:bg-gray-100 px-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
<div>
<span class="block font-semibold">Demesne far hearted suppose</span>
<span class="block">Dependent on so extremely delivered </span>
</div>
</a>
<a href="#" class="flex items-center space-x-4 py-4 hover:bg-gray-100 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7">
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
</svg>
<div>
<span class="block font-semibold">Now residence dashwoods</span>
<span class="block">Did even but nor are most gave </span>
</div>
</a>
<a href="#" class="flex items-center space-x-4 py-4 hover:bg-gray-100 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7">
<path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" />
</svg>
<div>
<span class="block font-semibold">Removed greater to do ability</span>
<span class="block">Highest men did boy</span>
</div>
</a>
</div>
Elements 20
=
<div class="bg-white rounded-lg shadow divide-gray-200 divide-y text-gray-600">
<a href="#" class="flex items-center space-x-4 py-4 hover:bg-gray-100 px-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
<div>
<span class="block font-semibold">Demesne far hearted suppose</span>
</div>
</a>
<a href="#" class="flex items-center space-x-4 py-4 hover:bg-gray-100 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7">
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
</svg>
<div>
<span class="block font-semibold">Now residence dashwoods</span>
</div>
</a>
<a href="#" class="flex items-center space-x-4 py-4 hover:bg-gray-100 px-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7">
<path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" />
</svg>
<div>
<span class="block font-semibold">Removed greater to do ability</span>
</div>
</a>
</div>
Elements 21
=
<div class="bg-gray-100 rounded-lg text-gray-600 py-4 px-6 w-full max-w-lg space-y-5">
<div class="w-full bg-gray-200 rounded-lg text-center">
<div class="w-0 bg-gray-300 rounded-lg font-semibold">
0%
</div>
</div>
<div class="w-full bg-gray-200 rounded-lg text-center">
<div class="w-1/4 bg-gray-300 rounded-lg font-semibold">
25%
</div>
</div>
<div class="w-full bg-gray-200 rounded-lg text-center">
<div class="w-1/2 bg-gray-300 rounded-lg font-semibold">
50%
</div>
</div>
<div class="w-full bg-gray-200 rounded-lg text-center">
<div class="w-3/4 bg-gray-300 rounded-lg font-semibold">
75%
</div>
</div>
<div class="w-full bg-gray-200 rounded-lg text-center">
<div class="w-full bg-gray-300 rounded-lg font-semibold">
100%
</div>
</div>
</div>
Elements 22
=
<div class="max-w-lg mx-auto">
<input type="text" class="bg-white w-full border border-gray-300 rounded-md py-2 px-3" placeholder="Name">
</div>
Elements 23
=
<div class="max-w-lg mx-auto flex rounded-md border border-gray-300 divide-gray-200 divide-x text-gray-600 overflow-hidden">
<span class="bg-white inline-block py-2 px-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
</span>
<input type="text" class="bg-white w-full py-2 px-3" placeholder="Email">
</div>
Elements 24
=
<div class="max-w-lg mx-auto w-full">
<textarea name="message" id="message" cols="30" rows="10" class="w-full rounded-md border border-gray-200 text-gray-600 p-4" placeholder="your message"></textarea>
</div>