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 v3.4. It is responsive. similar terms for this example are CTA,banner

Card Call to Action

Author Amit Pachange

Tailwind v3.4 8.4k 12

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

Moriba Traore

3 years ago

15.8k
Product hunt showcase section

Leon Bachmann

3 years ago

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

Noah Schmidt

3 years ago

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

Anonymous

3 years ago

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

Ameth Galarcio

2 years ago

4.2k
Product review card

Rama krishnan Subramanian

2 years ago

2.6k
Call to Action Box

Aitrik Saha

1 year ago

2.1k
Get Started ,Membership section - responsive - darkMode

ABDO-SY

1 year ago

1.5k
Travel Landing Page: Australia

Maxim

1 year ago

2.9k
Drinkware landing page

Maxim

1 year ago

2.1k
Landing page

Maxim

1 year ago

2.8k
The Future of Web Development
love my product

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.