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>

Related Examples

Invoice template

Shakti

3 years ago

28.8k
Nutrition facts table
Show Nutrient contents with a stripped table

Kofi Osei

3 years ago

14k
cards
cards with background animation

Anonymous

3 years ago

11.9k
Tailwind invoice example

Elijah Davis

3 years ago

19.8k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.4k
Upvote downvote buttons

Lucas Martinez

3 years ago

12.5k
Copy command section

Lukas Müller

3 years ago

12.4k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

ishimwe shadad

1 year ago

1.5k
Responsive layout with header, main body, aside (sidebar) and footer

Ahmed Malik

3 years ago

13k
Responsive fullscreen youtube video

Anonymous

3 years ago

9.5k
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5k