Home
Elijah Davis
Concert ticket

Concert ticket

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

Other

Author Elijah Davis

13.2k

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

Author:
Shakti

2 years ago

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

Author:
Kofi Osei

2 years ago

13k
cards
cards with background animation

Author:
Anonymous

2 years ago

11k
Tailwind invoice example

Author:
Elijah Davis

2 years ago

18.8k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

41.6k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

21.2k
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.6k
Copy command section

Author:
Lukas Müller

2 years ago

11.5k
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

1.7k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

7 months ago

839
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

5 months ago

672
Heading

Author:
KULDEEP

4 months ago

647

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components