Subcribe Card - Alert - Notification

This tailwind example is contributed by ABDO-SY, on 24-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are caution,Toast, Snackbar

Card Alert Notification

Author ABDO-SY

Tailwind v3.4 1.2k 7

Fork Fullscreen

<section class="bg-black flex items-center justify-center bg-opacity-25 h-[100vh]">
  <div class="bg-white  rounded-xl border border-[#e6e6e6] max-w-[870px] font-['Poppins'] p-3 flex gap-10"><img class="rounded-2xl" src="https://iili.io/3HgQpO7.png" alt="">
    <div class="flex flex-col  items-center justify-center gap-3">
      <h2 class=" text-center text-[#191919] text-[40px] font-bold font-['Poppins'] leading-[48px]">Subcribe to Our
        Newsletter</h2>
      <div class="text-center mt-3">
        <span class="text-[#999999] text-base font-medium leading-normal">Subscribe to our newlletter and Save your</span><span class="text-[#ff8900] text-base font-semibold  leading-tight"> 20%<br>money </span><span class="text-[#999999] text-base font-normal  leading-normal">with discount code today.</span>
      </div>
      <div class="max-w-[428px] mt-6 border border-[#a0a0a0]  rounded-[46px] flex ">
        <input type="email" placeholder="Enter your email" class="w-[343px]  rounded-[46px] outline-none px-6 py-3.5  bg-white  "><button class=" hover:bg-[#00a100]  py-4 px-9  bg-[#00b206] rounded-[43px]  text-white text-sm font-semibold font-['Poppins'] leading-tight">Subscribe</button>
      </div>
      <div class="w-full flex justify-center gap-2 mt-12  "><input type="checkbox" class="w-5 h-5" name="" id="">
        <div class=" text-[#666666] text-sm font-normal font-['Poppins'] leading-[21px]">Do not show this window</div>
      </div>
    </div>
  </div>
</section>

Related Examples

Notification Alert Section
Notification card with close button

Prashant

3 years ago

13.8k
Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
Tailwind CSS Alert

Krishna Gudpalle

3 years ago

11.8k
Confirmation model

Mr Robot

4 years ago

13.6k
Beautiful Info card
Info card with info type section on the corner.

TailwindFlex

4 years ago

10.9k
Notification alert section
Show info, success, or error messages

Arya

4 years ago

11.5k
Confirmation modal/card

Sophia Baker

3 years ago

16.5k
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
Closable toast message
show notification toast message at the bottom right corner

Prajwal Hallale

3 years ago

8.1k
Toast
mensajes de alerta a los visitantes de su sitio web.

Code huit

3 years ago

16.6k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

anandu ap

1 year ago

3.7k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Sedat Kumcu

1 year ago

2.6k