Tails - Tailwind - Product Details Page

PHOTO EMBED

Sat Aug 28 2021 20:37:25 GMT+0000 (UTC)

Saved by @mtsit #undefined

<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>
content_copyCOPY

https://codepen.io/omarkdev/pen/PozpxwO