Card by carlosepcc
#212121
HTML +TailwindCSS
1 <div class="card m-auto text-gray-300 w-[clamp(260px,80%,300px)] hover:brightness-90 transition-all cursor-pointer group bg-gradient-to-tl from-gray-900 to-gray-950 hover:from-gray-800 hover:to-gray-950 border-r-2 border-t-2 border-gray-900 m-4 rounded-lg overflow-hidden relative"> 2 <div class="px-8 py-10"> 3 <div class="bg-orange-500 w-10 h-10 rounded-full rounded-tl-none mb-4 group-hover:-translate-y-1 group-hover:shadow-xl group-hover:shadow-red-900 transition-all"></div> 4 <div class="uppercase font-bold text-xl"> 5 CHAMONILLE 6 </div> 7 <div class="text-gray-300 uppercase tracking-widest"> 8 NATURAL, OIL 9 </div> 10 <div class="text-gray-400 mt-8"> 11 <p class="font-bold">39.00 MLC</p> 12 <p>Perfect everywhere</p> 13 </div> 14 </div> 15 16 17 <div class="h-2 w-full bg-gradient-to-l via-yellow-500 group-hover:blur-xl blur-2xl m-auto rounded transition-all absolute bottom-0"></div> 18 <div class="h-0.5 group-hover:w-full bg-gradient-to-l via-yellow-950 group-hover:via-yellow-500 w-[70%] m-auto rounded transition-all"></div> 19 </div>
984 views
984 views
MIT License