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.1k

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

2 years ago

15.3k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.8k
Confirmation model

Author:
Mr Robot

3 years ago

13k
Ribbon at Corner

Author:
Mohit Prajapati

3 years ago

17.8k
Info Card
info card with description

Author:
Prashant

3 years ago

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

1.9k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

8 months ago

624
card Alert - icons - glass

Author:
ABDO-SY

8 months ago

738
cards
html , css ,

Author:
Hacker Development

6 months ago

603
alert
html , css

Author:
Hacker Development

6 months ago

886
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

310
Brand Grid with Hover Effect

Author:
ariaw

7 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components