<div class=" position-rel flex items-center justify-btw width-scaled4-8 box-shadow-1 "> <figure class="flex-1"> <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center"> </figure> <div class="pd-x-4 flex-1"> <div class="flex flex-column m-y-4"> <h3> Levis black</h3> <small class="text-color-grey-2">T-Shirt</small> </div> <div class="m-y-4"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p> </div> <div class="m-y-4"> <span class="text-bold">₹399.00</span> </div> <div class="flex flex-column gap-1 m-y-4"> <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button> </div> </div> <div class="position-ab top-0 right-0 "> <button> <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i> </button> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter