Card by Javierrocadev
#e8e8e8
HTML +TailwindCSS
1<div 2 class="cursor-pointer overflow-hidden relative transition-all duration-500 hover:translate-y-2 w-72 h-44 bg-neutral-50 rounded-lg shadow-xl flex flex-row items-center justify-evenly gap-2 p-2 before:absolute before:w-full hover:before:top-0 before:duration-500 before:-top-1 before:h-1 before:bg-purple-200" 3> 4 <svg 5 class="stroke-purple-200 shrink-0" 6 height="50" 7 preserveAspectRatio="xMidYMid meet" 8 viewBox="0 0 100 100" 9 width="50" 10 x="0" 11 xmlns="http://www.w3.org/2000/svg" 12 y="0" 13 > 14 <path 15 d="M17.9,60.7A14.3,14.3,0,0,0,32.2,75H64.3a17.9,17.9,0,0,0,0-35.7h-.4a17.8,17.8,0,0,0-35.3,3.6,17.2,17.2,0,0,0,.4,3.9A14.3,14.3,0,0,0,17.9,60.7Z" 16 fill="none" 17 stroke-linecap="round" 18 stroke-linejoin="round" 19 stroke-width="8" 20 ></path> 21 </svg> 22 <div> 23 <span class="font-bold">Card title</span> 24 <p class="line-clamp-3"> 25 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 26 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 27 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 28 commodo consequat. 29 </p> 30 </div> 31</div> 32
608 views
Variation of acard
MIT License