Event notification card

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

Card

Author Odessa Young

Tailwind v3.4 9.9k 13

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

Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.8k
sidebar dash
sidebar dash

Omer fils ELENGA

9 months ago

971
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Noob

4 years ago

11.5k
Battery and signal
Battery and signal bar component

ardianhu

1 year ago

1.4k
Tour package card
This card could be used for featuring a product, service, or blog post:

Henrik R.

2 years ago

3k
Info Card

Prem..

4 years ago

20.9k
Drinkware landing page

Maxim

1 year ago

2.1k
Profile Card
Simple and Attractive Profile card in tailwind css

KULDEEP

1 year ago

1.1k
Stats card with icons
Improved Code quality and added support for dark mode

Dika Rahman

2 years ago

2.6k
Feature Section Cards

Akram Khan

2 years ago

2.8k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Rajesh Pandey

1 year ago

1.8k