Boarding Pass Design
Testing out a layout and design for a digital boarding pass
This tailwind example is contributed by Kirsten F, on 12-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.
Author Kirsten F
Related Examples
-
OTP Verification PageA responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.
5 months ago489 -
NotificationsToast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.
8 months ago716 -
Responsive Multi-Tier Pricing Table Componentflexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.
4 months ago641 -
chartto chart on your family and
3 months ago407 -
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSSA beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀
6 months ago393 -
about videoabout kelaplus video
2 months ago185 -
4 months ago341 -
Interactive Order Report Chart with TailwindCSS and Chart.jsCreate 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.
7 months ago1.1k -
3 months ago866 -
8 months ago1.1k -
portfolioThis portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.
10 months ago1.9k -
navigation headerresponsive navigation header
1 year ago2.3k
Explore components by Tags
Didn't find component you were looking for?
Search from 2400+ components
