snipette/snipette-crowdfunding-site
snipette/snipette-crowdfunding-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add tier selection tiles

Browse source
This commit is contained in:
Hippo 2021-12-28 17:58:37 +05:30
parent ebedadd38d
commit e2682cc1f8
2 changed files with 74 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/index.htm
View file

@ -114,7 +114,52 @@
<div class="text-green-900 w-full md:w-3/5 lg:w-3/40">
<div class="max-w-4xl mx-auto p-10">
<p class="p-5 text-xl">[TK donation deets]</p>
<h1 class="text-center text-2xl font-sans">Donation options</h1>
<ul class="my-10 grid grid-cols-3 gap-3">
<label class="donate-option">
<input type="radio" name="amount" value="250">
<li>
<h2 class="text-5xl">₹250</h2>
<p class="font-sans">You get: Snipette stickers</p>
</li>
</label>
<label class="donate-option">
<input type="radio" name="amount" value="500">
<li class="row-auto text-center inline-block p-10 bg-white rounded-md text-black border-2 border-white hover:border-green-500 hover:cursor-pointer h-auto">
<h2 class="text-5xl">₹500</h2>
<p class="font-sans">You get: 4 colour issues + social media mention</p>
</li>
</label>
<label class="donate-option">
<input type="radio" name="amount" value="750">
<li>
<h2 class="text-5xl">₹750</h2>
<p class="font-sans">You get: 4 colour issues social media shoutout + desktop/mobile wallpapers</p>
</li>
</label>
<label class="donate-option">
<input type="radio" name="amount" value="1000">
<li>
<h2 class="text-5xl">₹1,000</h2>
<p class="font-sans">You get: 4 colour issues + social media shoutout + desktop/mobile wallpapers + bookmarks</p>
</li>
</label>
<label class="donate-option">
<input type="radio" name="amount" value="1500">
<li>
<h2 class="text-5xl">₹1,500</h2>
<p class="font-sans">You get: 4 colour issues + social media shoutout + desktop/mobile wallpapers + pack of postcards</p>
</li>
</label>
<label class="donate-option">
<input type="radio" name="amount" value="custom">
<li>
<h2 class="text-5xl text-center">₹<input type="number" min="0" max="100000" size="5" name="amount-custom" class="input-custom" placeholder="amount"/><span class="underline">custom</span></h2>
<p class="font-sans">You get: all the perks from the next lowest level</p>
</li>
</label>
</ul>
</div>
</div>

28
src/style.css
View file

@ -1,3 +1,31 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.donate-option > input {
@apply hidden;
}
.donate-option > li {
@apply row-auto text-center inline-block p-10 bg-white rounded-md text-black border-2 border-white hover:border-green-500 hover:cursor-pointer h-full;
}
.donate-option > input:checked + li {
@apply border-green-500 bg-green-400;
}
.input-custom {
@apply bg-inherit border-inherit inline-block text-center overflow-visible p-3;
}
.donate-option > input:checked + li:hover .input-custom {
@apply bg-white;
}
.donate-option > input:not(:checked) + li .input-custom {
@apply hidden;
}
.donate-option > input:checked + li .input-custom + span {
@apply hidden;
}