Home
Odessa Young
Event notification card

Event notification card

This tailwind example is contributed by Odessa Young, on 02-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Odessa Young

9.3k

Fork Fullscreen

<div class="bg-white rounded-3xl mx-4 md:mx-auto max-w-screen-md border-2 border-gray-800 mt-16">
    <div class="px-8 py-6 md:p-10">
        <h1 class="text-4xl md:text-5xl font-medium leading-tight text-gray-800 mb-6">Let's go, it's Google I/O</h1>
        <p class="text-base md:text-lg font-normal leading-normal text-gray-800 mb-6">Join us online on May 10, 2023</p>
        <div class="flex justify-center">
            <a href="" target="_blank" rel="noopener"
                class="bg-yellow-400 rounded-lg text-gray-800 font-medium text-base md:text-lg py-3 px-8 md:px-12 hover:bg-yellow-500 transition-all duration-150 ease-in-out">Register
                now
            </a>
        </div>
        <p class="text-base md:text-lg font-normal leading-normal text-gray-800 mt-6">Hi Young,</p>
        <p class="text-sm md:text-base font-normal leading-normal text-gray-800 mt-2">Google I/O 2023 is around the
            corner! Tune in to watch the livestreamed keynotes at 10am PT, then dive into 100+ technical sessions,
            codelabs, and more, on demand. Learn about...
        </p>
    </div>
</div>

Related Examples

Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

3 months ago

340
Personal card
A card to show minimal info for staff member

Author:
farid

7 months ago

647
Department Card

Author:
Ashok Kumar

1 year ago

1.5k
Info Card

Author:
Prem..

2 years ago

18.9k
Minimal Info cards

Author:
Gopi Yadav

2 years ago

10.2k
Info cards

Author:
Samuel Dawson

2 years ago

10.3k
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.3k
Testimonial card

Author:
Leon Bachmann

2 years ago

11.6k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

11.6k
Active Beauty Main Page

Author:
Maxim

4 months ago

649
profile3

Author:
pablitodgb

1 month ago

104
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components