CODEWITHSUNDEEP
tailwind-css
fyardlest
fyardlest

Reputation: 298

How to create alert in tailwindcss like the alert api in material-ui?

Is there a way to create a tailwind css alert like the Alert in material-ui:

<Alert severity="error">This is an error alert — check it out!</Alert>

Upvotes: 0

Views: 797

Answers (2)

Aura
Aura

Reputation: 317

<div class="text-center py-4 lg:px-4">
    <div class="p-2 bg-red-400 items-center text-red-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
        <span class="flex rounded-full bg-red-500 uppercase px-2 py-1 text-xs font-bold mr-3">Alert</span>
        <span class="font-semibold mr-2 text-left flex-auto">Make Sure To Follow Our Instagram Account</span>
        <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
        </svg>
    </div>
</div>

You can get more snippet on the official tailwinds website

Upvotes: 0

top talent
top talent

Reputation: 599

You can use this alert div.

<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
  <p class="font-bold">Be Warned</p>
  <p>This is an error alert — check it out!</p>
</div>

Upvotes: 1

Related Questions