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

8.4k

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