Home
TailwindFlex
Beautiful Info card

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 CSS v3. It is responsive. similar terms for this example is caution

Card Alert

Author TailwindFlex

10.5k

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

Author:
Sophia Baker

3 years ago

15.8k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

24.4k
Confirmation model

Author:
Mr Robot

3 years ago

13.2k
Ribbon at Corner

Author:
Mohit Prajapati

3 years ago

18.8k
Info Card
info card with description

Author:
Prashant

3 years ago

13k
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

1 year ago

2.6k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

1 year ago

981
card Alert - icons - glass

Author:
ABDO-SY

1 year ago

1.2k
cards
html , css ,

Author:
Hacker Development

9 months ago

957
alert
html , css

Author:
Hacker Development

9 months ago

1.1k
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
RShubham kumar

2 years ago

4.6k
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Author:
Nick Girga

10 months ago

833

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components