JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<button style="border: solid black" class="pointer-events-auto sm:hover:scale-[1.02] border-none origin-bottom duration-200 h-36 group relative text-left z-[999999] rounded-2xl shadow-xl w-full max-w-[420px]" style="background-color: var(--clr-background); color: var(--clr-text);"><div class="flex h-36 items-stretch"><div class="w-[110px] relative overflow-hidden flex-none object-cover rounded-l-2xl"><div class="w-full h-full bg-gray-100 text-gray-300 relative"><img class="w-full h-full object-cover duration-100 opacity-100" src="https://senjaio.b-cdn.net/public/avatar/d1fc5428-f01a-41e1-8be9-41d31f9ec006_Me%20in%20T-shirt.jpg?width=160" alt="" style=""> </div></div> <div class="flex flex-col whitespace-pre-line font-normal relative w-full rounded-r-2xl border-y border-r border-gray-200 justify-center gap-2 py-3 px-4"> <div class="text-sm flex-none line-clamp-3">First, the good news: ReallySmartArt has been live for around 45 minutes now, and I've just been notified that I have earned a commission! Not for anything that I have done, but for a sale made by one of my 'buddies'.

You see, when you sign up for ReallySmartArt you will be assigned six 'buddies' who will work on your behalf getting you commissions! Not a bad deal!

The brilliant compensation plan for this site is rather complicated but it is well explained in the video.

Oh, and the bad news..... it's raining here where I live! Still, the rain will stop soon, unlike the commission payments from ReallySmartArt.

Richard</div> <div class="flex w-full line-clamp-1 items-center gap-1"><div class="text-xs line-clamp-1 opacity-60"><span class="">Richard Staveley</span> <span class="">/ Retired</span></div> </div> </div></div> <button class="absolute group-hover:opacity-100 duration-100 lg:opacity-0 -top-2 right-2 p-2 sm:p-1 bg-white rounded-full border border-gray-200"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" stroke="currentColor" fill="none" style="" stroke-width="2"...