Select Reward - Tailwind Component
Checkboxes are used if you want the user to select any number of options from a list of preset options, it is use Tailwind CSS to create this beautiful form tailwind component.
forms
Loading component...
81 lines
<section class="grid place-items-center h-screen sm:py-4">
<div
class="md:flex-row gap-4 sm:py-5 mx-2 sm:px-5 bg-white rounded-md shadow-lg w-full md:max-w-2xl dark:bg-gray-800">
<div class="pt-4 px-4">
<h1 class="text-lg sm:text-2xl font-bold text-gray-700 dark:text-gray-100">Select Reward</h1>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-200">We loved the content you submitted, select your
reward now!</p>
</div>
<ul class="flex flex-col gap-y-5 m-10 max-w-full mx-auto">
<li class="relative mx-4">
<input class="sr-only peer" type="radio" value="yes" name="answer" id="option-1">
<label
class="flex flex-row bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-blue-500 peer-checked:ring-2 peer-checked:border-transparent dark:bg-gray-700 dark:border-none dark:hover:bg-gray-600 dark:peer-checked:ring-gray-50"
for="option-1">
<div class="m-auto px-4 sm:px-8 items-center">
<div class="flex">
<div class="title text-base sm:text-xl font-bold text-gray-700 dark:text-gray-200">50% off Nike.com</div>
</div>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">Discount code to use at Nike.com on all
Nike clothings and footwears.</p>
</div>
<div class="w-full sm:w-1/2 h-48 sm:h-36 ">
<img class="object-center object-cover w-full h-full rounded-r-md"
src="https://images.unsplash.com/photo-1626379625260-7111605463e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fG5pa2V8ZW58MHwwfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="photo">
</div>
</label>
<div class="absolute hidden w-5 h-5 peer-checked:block top-2 left-3">👍</div>
</li>
<li class="relative mx-4">
<input class="sr-only peer" type="radio" value="yes" name="answer" id="option-2">
<label
class="flex flex-row bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-blue-500 peer-checked:ring-2 peer-checked:border-transparent dark:bg-gray-700 dark:border-none dark:hover:bg-gray-600 dark:peer-checked:ring-gray-50"
for="option-2">
<div class="m-auto px-4 sm:px-8 items-center">
<div class="flex">
<div class="title text-base sm:text-xl font-bold text-gray-700 dark:text-gray-200">Liverpool F.C. 2021/22
Stadium Goalkeeper</div>
</div>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-200"> Jersey pairs replica design details with
sweat-wicking fabrics to give.</p>
</div>
<div class="w-full sm:w-1/2 h-48 sm:h-36 ">
<img class="object-center object-cover w-full h-full rounded-r-md"
src="https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/5f0b4283-e2c0-422a-ae92-0c27525348ba/liverpool-fc-2021-22-stadium-goalkeeper-football-jersey-rJvNMk.png"
alt="photo">
</div>
</label>
<div class="absolute hidden w-5 h-5 peer-checked:block top-2 left-3">👍</div>
</li>
<li class="relative mx-4">
<input class="sr-only peer" type="radio" value="yes" name="answer" id="option-3">
<label
class="flex flex-row bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-blue-500 peer-checked:ring-2 peer-checked:border-transparent dark:bg-gray-700 dark:border-none dark:hover:bg-gray-600 dark:peer-checked:ring-gray-50"
for="option-3">
<div class="m-auto px-4 sm:px-8 items-center">
<div class="flex">
<div class="title text-base sm:text-xl font-bold text-gray-700 dark:text-gray-200">Nike Epic React 2</div>
</div>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-200">A step up from its predecesspr with smooth,
lightweight performance.</p>
</div>
<div class="w-full sm:w-1/2 h-48 sm:h-36 ">
<img class="object-center object-cover w-full h-full rounded-r-md"
src="https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/c2d50294-c1ad-4141-9937-c5b42610b8d3/air-zoom-terra-kiger-8-trail-running-shoes-gVwLbV.png"
alt="photo">
</div>
</label>
<div class="absolute hidden w-5 h-5 peer-checked:block top-2 left-3">👍</div>
</li>
</ul>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>