Home
Amit Pachange
Greeting Card with CTA

Greeting Card with CTA

card with two actions with greeting msg according to time

This tailwind example is contributed by Amit Pachange, on 10-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Card Call to Action

Author Amit Pachange

6.6k

6

Fork Fullscreen

<div class="px-4 md:px-8 py-12 bg-gray-100 rounded-lg shadow-2xl max-w-xl">

<h1 class="text-lg mb-4">
    Hey Amit<span class="mx-2" id="demo"></span><span class="text-xl">😄</span>,
    <br>
    <span class="text-4xl font-semibold">Have you booked your</span>
    <span class="text-4xl font-semibold text-blue-700">Seat?</span>
  </h1>

<div class="flex flex-col justify-center w-full text-center mt-8 gap-6 sm:flex-row text-lg font-semibold">
    <a href="https://tailwindflex.com/@amit"
      class="py-4 w-full sm:w-40 border border-blue-700 rounded-lg hover:shadow-2xl hover:text-blue-700 shadow-lg">
      Yes
    </a>
    <a href="https://tailwindflex.com"
      class="bg-blue-600 w-full sm:w-40 py-4 rounded-lg text-white hover:bg-blue-700 shadow-lg">
      Book Now
    </a>
  </div>

</div>

<script>
  const time = new Date().getHours();
    let greeting;
    if (time < 10) {
      greeting = "Good morning";
    } else if (time < 20) {
      greeting = "Good day";
    } else {
      greeting = "Good evening";
    }
    document.getElementById("demo").innerHTML = greeting;
</script>

Related Examples

Product review card

Author:
Moriba Traore

2 years ago

14.1k
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

8.8k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

1 year ago

14.4k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

1 year ago

8.6k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

6 months ago

1.5k
Product review card

Author:
Rama krishnan Subramanian

3 months ago

296
Article-Post Preview card

Author:
Prashant

2 years ago

8.5k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

Author:
Samuel Abera

8 months ago

2.3k
Image card with overlay text overlay

Author:
Santos78

1 year ago

27.4k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

5 months ago

1.3k
Hover effect card

Author:
Samuel Dawson

1 year ago

25.9k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

7 months ago

957

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1