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

14.1k
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.7k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.5k
Upvote downvote buttons

Lucas Martinez

3 years ago

12.6k
Copy command section

Lukas Müller

3 years ago

12.4k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

SHARIFUL ISLAM

1 year ago

2.5k
interview status

Anonymous

2 weeks ago

9
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Ranit Saha

1 year ago

2.7k
Pricing Plans

ariaw

1 year ago

634