Card by Uncannypotato69
#111111
HTML +TailwindCSS
1<div 2 class="h-[12em] w-[18em] border-2 border-[rgba(75,30,133,0.5)] rounded-[1.5em] bg-gradient-to-br from-[rgba(75,30,133,1)] to-[rgba(75,30,133,0.01)] text-white font-nunito p-[1em] flex justify-center items-left flex-col gap-[0.75em] backdrop-blur-[12px]" 3> 4 <div> 5 <h1 class="text-[2em] font-medium">Heading</h1> 6 <p class="text-[0.85em]"> 7 Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum 8 blanditiis pariatur sequi magni. 9 </p> 10 </div> 11 12 <button 13 class="h-fit w-fit px-[1em] py-[0.25em] border-[1px] rounded-full flex justify-center items-center gap-[0.5em] overflow-hidden group hover:translate-y-[0.125em] duration-200 backdrop-blur-[12px]" 14 > 15 <p>Button</p> 16 <svg 17 xmlns="http://www.w3.org/2000/svg" 18 fill="white" 19 viewBox="0 0 24 24" 20 stroke-width="1" 21 stroke="currentColor" 22 class="w-6 h-6 group-hover:translate-x-[10%] duration-300" 23 > 24 <path 25 stroke-linecap="round" 26 stroke-linejoin="round" 27 d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" 28 ></path> 29 </svg> 30 </button> 31</div> 32
61 views
61 views
MIT License