<section class="text-gray-00 body-font overflow-hidden bg-white"> <div class="container px- py-2 mx-auto"> <div class="lg:w-4/5 mx-auto flex flex-wrap"> 4 <img alt="ecommerce" class="lg:w-1/2 w-full object-cover object-center rounded border border-gray-200" src="https://static.carrefour.com.br/medias/sys_master/images/images/hd/he/h00/h00/8430027326.jpg"> 5 <div class="lg:w-1/2 w-full lg:pl- lg:py-6 mt-6 lg:mt-0"> 6 <h2 class="text-sm title-font text-gray-700 tracking-widest">Outdoor</h2> 7 <h1 class="text-gray-00 text-4xl title-font font-bold mb-1">Solar Art</h1> 8 <div class="flex mb-4"> 9 <span class="title-font font-medium text-2xl text-gray-900">$58.00</span> 10 </div> <p class="leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem blanditiis ipsa ipsum quae quia quos saepe totam? Aliquam deleniti mollitia reiciendis totam! Ad blanditiis dolorum et molestias praesentium saepe voluptates.</p> 12 <div class="flex border-t border-gray-300 mt-5 pt-5"> <button type="submit" class="bg-gray-800 duration-200 focus:outline-none focus:shadow-outline font-medium h-12 hover:bg-gray-900 inline-flex items-center justify-center px-6 text-white tracking-wide transition w-full"> Add to Cart </button> 16 </div> </div> </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