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

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

13.5k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

20.3k
Confirmation model

Author:
Mr Robot

2 years ago

12.2k
Ribbon at Corner

Author:
Mohit Prajapati

2 years ago

14.9k
Info Card
info card with description

Author:
Prashant

2 years ago

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

2 months ago

421
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

2 weeks ago

186
Responsive Article Section

Author:
Prashant

2 years ago

13.5k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

8 months ago

6.9k
Form
form

Author:
Aman kumar

6 months ago

934
Product card

Author:
Oliver Hansen

2 years ago

11.9k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

1 month ago

578

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components