Modals
Modals 01
=
<div class="container mx-auto items-center text-center">
<div class="py-3 lg:py-6 px-6 rounded-lg shadow-lg w-full max-w-lg text-gray-600 relative">
<span class="text-lg lg:text-2xl font-semibold text-gray-700">This needs your attention</span>
<p class="block mt-2 font-semibold">Breakfast procuring nay end happiness allowance assurance.</p>
<button class="w-5 h-5 absolute top-3 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
Modals 02
=
<div class="container mx-auto items-center text-center">
<div class="py-3 lg:pt-6 lg:pb-8 px-6 rounded-lg shadow-lg w-full max-w-lg text-gray-600 relative flex flex-col justify-center items-center">
<div class="bg-gray-200 rounded-full h-16 w-16 mb-4 flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
<path fill-rule="evenodd" d="M6 3a1 1 0 011-1h.01a1 1 0 010 2H7a1 1 0 01-1-1zm2 3a1 1 0 00-2 0v1a2 2 0 00-2 2v1a2 2 0 00-2 2v.683a3.7 3.7 0 011.055.485 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0A3.7 3.7 0 0118 12.683V12a2 2 0 00-2-2V9a2 2 0 00-2-2V6a1 1 0 10-2 0v1h-1V6a1 1 0 10-2 0v1H8V6zm10 8.868a3.704 3.704 0 01-4.055-.036 1.704 1.704 0 00-1.89 0 3.704 3.704 0 01-4.11 0 1.704 1.704 0 00-1.89 0A3.704 3.704 0 012 14.868V17a1 1 0 001 1h14a1 1 0 001-1v-2.132zM9 3a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm3 0a1 1 0 011-1h.01a1 1 0 110 2H13a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</div>
<span class="text-lg lg:text-2xl font-semibold text-gray-700">Happy birthday</span>
<p class="block mt-2 font-semibold text-center">Breakfast procuring nay end happiness allowance assurance.</p>
<div class="pt-4 border-t border-gray-300 w-full mt-4">
<a href="#" class="w-full bg-gray-200 hover:bg-gray-300 block text-center py-3 font-semibold">
Use your coupon
</a>
</div>
<button class="w-5 h-5 absolute top-3 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
Modals 03
=
<div class="container mx-auto items-center text-center">
<div class="py-3 lg:py-6 px-6 rounded-lg shadow-lg w-full max-w-lg text-gray-600 relative">
<span class="text-lg lg:text-2xl font-semibold text-gray-700">Do you want to delete this?</span>
<p class="block mt-2 font-semibold">Breakfast procuring nay end happiness allowance assurance.</p>
<div class="flex flex-row space-x-2">
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-3 px-5 lg:px-4 text-white mt-6">Delete</a>
<a href="#" class="inline-block bg-gray-400 font-semibold rounded-lg py-3 px-5 lg:px-4 text-white mt-6">Cancel</a>
</div>
<button class="w-5 h-5 absolute top-3 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
Modals 04
=
<div class="container mx-auto items-center text-center">
<div class="py-3 lg:py-6 px-6 rounded-lg shadow-lg w-full max-w-xl text-gray-600 relative border-t-8 border-gray-300">
<div class="flex items-center space-x-4">
<div>
<span class="text-lg lg:text-2xl font-semibold text-gray-700">Do you want Cookies?</span>
<p class="block mt-2 font-semibold">Of friendship on inhabiting diminution discovered as. Did friendly eat breeding building few nor.</p>
</div>
<a href="#" class="inline-block bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-3 px-5 lg:px-4 text-white mt-6">Accept</a>
</div>
<button class="w-5 h-5 absolute top-3 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
Modals 05
=
<div class="container mx-auto items-center text-center">
<div class="rounded-lg shadow-lg w-full max-w-xl text-gray-600 relative">
<div class="border-b border-gray-300 px-6 py-3 relative flex space-x-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span class="text-lg font-semibold text-gray-700">Something went wrong</span>
<button class="w-5 h-5 absolute top-4 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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 class="pt-3 pb-6 px-6 text-gray-500">
<p class="block mt-2 font-semibold text-sm">Ulysses, Ulysses — Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses — Fighting evil and tyranny, with all his power, and with all of his might. </p>
<a href="#" class="font-semibold text-sm mt-4 inline-block">Close</a>
</div>
</div>
</div>
Modals 06
=
<div class="container mx-auto items-center text-center">
<div class="py-3 lg:py-6 px-6 rounded-lg shadow-lg text-gray-600 relative flex flex-col items-center">
<div class="bg-gray-200 rounded-full h-20 w-20 mb-4 flex justify-center items-center">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</div>
<span class="text-lg lg:text-xl font-semibold text-gray-700">Do you want to delete this?</span>
<p class="block mt-2 font-semibold">Small delete card with a icon.</p>
<div class="flex flex-row space-x-2">
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-3 px-5 lg:px-4 text-white mt-6">Delete</a>
<a href="#" class="inline-block bg-gray-400 font-semibold rounded-lg py-3 px-5 lg:px-4 text-white mt-6">Cancel</a>
</div>
</div>
</div>
Modals 07
=
<div class="container mx-auto items-center text-center">
<div class="rounded-lg shadow-lg w-full max-w-lg text-gray-600 relative flex">
<div class="bg-gray-100 px-4 py-4 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
<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" />
</svg>
</div>
<div class="py-3 lg:py-6 px-6 ">
<span class="text-lg font-semibold text-gray-700">This needs your attention</span>
<p class="block font-semibold text-sm">Breakfast procuring nay end happiness allowance assurance.</p>
</div>
<button class="w-5 h-5 absolute top-3 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
Modals 08
=
<div class="container mx-auto items-center text-center">
<div class="py-3 lg:pt-6 lg:pb-8 px-6 rounded-lg shadow-lg w-full max-w-xl text-gray-600 relative flex flex-col justify-center items-center">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Free demo</h2>
<form class="mt-6 lg:mt-8 space-y-4">
<input type="text" placeholder="Name" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 w-full">
<input type="Email" placeholder="Email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 w-full">
<input type="password" placeholder="password" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 w-full col-span-2 md:col-span-1">
<button class="inline-block bg-gray-600 font-semibold rounded-lg h-14 w-full py-4 px-5 lg:px-8 text-white justify-self-center md:justify-self-auto col-span-2 md:col-span-1">Sign up for free</button>
</form>
<p class="text-sm text-gray-600 mt-4 lg:mt-8">World among the stalks, and grow familiar with the count then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
<button class="w-5 h-5 absolute top-3 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
Modals 09
=
<div class="container mx-auto items-center text-center">
<div class="rounded-lg shadow-lg w-full max-w-xl text-gray-600 relative">
<div class="border-b border-gray-300 px-6 py-3 relative text-lg font-semibold text-gray-700 text-center bg-gray-100">
Let us know what you think
<button class="w-5 h-5 absolute top-4 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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 class="pt-3 pb-6 px-6 text-gray-500">
<form class="mt-6 lg:mt-8 space-y-4">
<div class="flex items-center justify-center mt-6">
<svg class="w-10 h-10 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg class="w-10 h-10 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg class="w-10 h-10 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg class="w-10 h-10 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg class="w-10 h-10 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg>
</div>
<input type="Email" placeholder="Email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 w-full">
<textarea name="review" id="review" cols="30" rows="6" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg w-full" placeholder="your review"></textarea>
<button class="inline-block bg-gray-600 font-semibold rounded-lg h-14 w-full py-4 px-5 lg:px-8 text-white justify-self-center md:justify-self-auto col-span-2 md:col-span-1">Leave rating</button>
</form>
</div>
</div>
</div>
Modals 10
=
<div class="container mx-auto items-center text-center">
<div class="rounded-lg shadow-lg w-full max-w-2xl text-gray-600 relative">
<button class="w-5 h-5 absolute top-4 right-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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 class="mx-auto grid grid-cols-2">
<div class="col-span-2 md:col-span-1">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="object-cover min-h-full max-h-64 w-full">
</div>
<div class="col-span-2 md:col-span-1 p-8 flex items-center justify-center">
<div>
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Sign-in</h2>
<form action="post" class="max-w-md pt-4 lg:pt-6 space-y-4">
<input type="email" class="bg-white w-full border border-gray-300 rounded-md py-2 px-3" placeholder="Email">
<input type="password" class="bg-white w-full border border-gray-300 rounded-md py-2 px-3" placeholder="Password">
<button class="inline-block bg-gray-600 font-semibold rounded-lg py-3 px-5 lg:px-8 text-white mt-4">Sign-in now</button>
</form>
</div>
</div>
</div>
</div>
</div>
总共 10 条记录