Home
ABDO-SY
Subcribe Card - Alert - Notification

Subcribe Card - Alert - Notification

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

Card Alert Notification

Author ABDO-SY

403

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

Author:
Prashant

2 years ago

12.1k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

2 years ago

13k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.7k
Confirmation model

Author:
Mr Robot

2 years ago

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

Author:
TailwindFlex

2 years ago

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

Author:
Arya

2 years ago

10.1k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

14.8k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

2 years ago

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

Author:
Code huit

1 year ago

14.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.

Author:
anandu ap

8 months ago

1.2k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

7 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components