<div class=" position-rel width-scaled-8 m-auto box-shadow-1 "> <figure> <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2"> </figure> <div class="position-ab flex justify-center items-center top-0 ht-100 bg-overlay z-index-2 wt-100 text-color-grey-0 text-bold text-m"> <p>Out of Stock</p> </div> <div class="pd-x-4"> <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-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button> <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 text-color-grey-4"> <i class="fa-solid fa-square-xmark fa-2x"></i> </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