Card by Javierrocadev
#e8e8e8
HTML +TailwindCSS
1<div 2 class="cursor-pointer transition-all duration-500 hover:translate-y-2 w-72 h-40 bg-neutral-50 rounded-lg shadow-xl flex flex-row items-center justify-evenly gap-4 px-4" 3> 4 <svg 5 class="stroke-purple-300 shrink-0 rounded-full" 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 text-purple-300">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. 27 </p> 28 </div> 29</div> 30
575 views
575 views
Variations
1 MIT License