Concert ticket

This tailwind example is contributed by Elijah Davis, on 15-Feb-2023. Component is made with Tailwind v3.4. It is responsive.

Other

Author Elijah Davis

Tailwind v3.4 14.1k 8

Fork Fullscreen

<div class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
                <img class="w-full rounded-lg shadow-lg" src="https://images.unsplash.com/photo-1524368535928-5b5e00ddc76b" alt="Concert Image">
            </div>
            <div class="w-full lg:w-1/3 px-4">
                <h1 class="text-4xl font-bold mb-4">John Smith Live in Concert</h1>
                <p class="text-lg mb-6">Join us for an unforgettable evening of music with John Smith.</p>
                <div class="mb-6">
                    <p class="text-xl font-bold mb-2">When:</p>
                    <p class="text-lg">Friday, April 15th at 8:00 PM</p>
                </div>
                <div class="mb-6">
                    <p class="text-xl font-bold mb-2">Where:</p>
                    <p class="text-lg">The Fillmore Auditorium</p>
                    <p class="text-lg">1805 Geary Blvd, San Francisco, CA</p>
                </div>
                <div class="mb-6">
                    <p class="text-xl font-bold mb-2">Tickets:</p>
                    <p class="text-lg">$35 - General Admission</p>
                    <p class="text-lg">$75 - VIP</p>
                </div>
                <button
                    class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                    type="button">
                    Buy Tickets
                </button>
            </div>
        </div>
    </div>
</div>