Beautiful Info card

Info card with info type section on the corner.

This tailwind example is contributed by TailwindFlex, on 09-Aug-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is caution

Card Alert

Author TailwindFlex

Tailwind v3.4 10.9k 16

Fork Fullscreen

.black_border {
        box-shadow: 4px 4px 1px rgb(0, 0, 0);
    }
</style>

<div>

<div class="relative m-16">
        <button class="absolute py-1 px-3 -left-8 -top-2 -rotate-[10deg] border border-black black_border bg-[#7e22ce] text-white font-bold">
        WARNING!
    </button>

<div class="purple_border p-8 border border-black">
            The
            <span class="font-mono text-purple-700 font-bold">message</span>
            variable is a Laravel reserved word
            within this email context,
            so you should avoid using that as a field handle if you intend on using the email feature.
        </div>
    </div>

<div class="relative m-16">
        <span class="absolute -z-10  w-full h-full inset-1 bg-violet-500 rounded-xl"></span>
        <button class="absolute py-1 z-10 px-3 -left-8 -top-2 -rotate-[10deg] black_border bg-violet-500 text-white font-bold">
        WARNING!
    </button>

<div class="p-8 border border-black purple_border bg-white rounded-xl z-20">
            The
            <span class="font-mono text-purple-700 font-bold">message</span>
            variable is a Laravel reserved word
            within this email context,
            so you should avoid using that as a field handle if you intend on using the email feature.
        </div>
    </div>

</div>

Related Examples

Confirmation modal/card

Sophia Baker

3 years ago

16.6k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Confirmation model

Mr Robot

4 years ago

13.6k
Ribbon at Corner

Mohit Prajapati

4 years ago

19.6k
Info Card
info card with description

Prashant

4 years ago

13.3k
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.9k
Subcribe Card - Alert - Notification

ABDO-SY

1 year ago

1.2k
card Alert - icons - glass

ABDO-SY

1 year ago

1.5k
cards
html , css ,

Hacker Development

1 year ago

1.2k
alert
html , css

Hacker Development

1 year ago

2.1k
Notification
Pop up card when form submitted is successful

Olajide Olamide (Laemmy)

6 months ago

776
Animated cards with Tailwind CSS

Michael Andreuzza

2 years ago

12.9k