A
Anonymous

Ticket Card - Copy this React, Tailwind Component to your project

Generate a ticket card with rounded corners. Top Section "SAFAR" as title in top center of the ticket. Underneath it the pickup (Left Side) and (Right Side) destination details with a small bus icon in the center of a dotted line and two rhombus shaped icons going towards the pickup and destination (horizontally) in the center. The pickup and destination text should be vertically written (Faizabad, Dec 10 6:00pm) and (Stock EX, Dec 10 6:20pm) respectively. Underneath it should be a dotted horizontal grey line. Middle Section Passengers, Seat No. and Ticket No. in grey color. Underneath them (2 Adults), (3,4), (5SB7W0) respectively in Black (evenly aligned on the screen). Replicate the same thing underneath it again. Underneath it should be text "Ticket Status: CONFIRMED" in Black in small size in center. Underneath it should be another dotted horizontal grey line and on the left and right of this line should be round cutouts. Bottom Section a text with small size saying "Show this to the counter at the bus station" on top center, underneath the dotted line. Leave the empty space for the rest of the bottom section. The font should be Montserrat for every text.

Prompt
Component Preview

About

TicketCard - A sleek ticket layout with rounded corners, featuring pickup and destination details, icons, and status. Built with React a. Access free code!

Share

Last updated 1 month ago