Breaking News: Grepper is joining You.com. Read the official announcement!

alert tailwind css

Add Answer

KingUche answered on September 23, 2021 Popularity 10/10 Helpfulness 5/10

answer alert tailwind css

related tailwind alert

related alert message tailwind

related alert tailwind css

alert tailwind css

Comment

<div class="relative py-3 pl-4 pr-10 leading-normal text-red-700 bg-red-100 rounded-lg" role="alert">
  <p>A simple alert with text and a right icon</p>
  <span class="absolute inset-y-0 right-0 flex items-center mr-4">
    <svg class="w-4 h-4 fill-current" role="button" viewBox="0 0 20 20"><path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
  </span>
</div>

Popularity 10/10 Helpfulness 5/10 Language html

Source: tailwind-starter-kit.vercel.app

Tags: alert html tailwind-css

Link to this answer
Share Copy Link

Contributed on Sep 23 2021

KingUche

0 Answers Avg Quality 2/10

Closely Related Answers

tailwind alert

Comment

<div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3" role="alert">
  <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
  <p>Something happened that you should know about.</p>
</div>

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: v1.tailwindcss.com

Tags: alert aler

Link to this answer
Share Copy Link

Contributed on Oct 25 2022

Danish Pk

0 Answers Avg Quality 2/10

alert message tailwind

Comment

https://tailwind-elements.com/docs/standard/getting-started/quick-start/

https://tailwind-elements.com/docs/standard/getting-started/quick-start/

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: alert aler

Link to this answer
Share Copy Link

Contributed on Feb 25 2023

Tiago F2

0 Answers Avg Quality 2/10

alert tailwind css

Comment

<button id="triggerElement" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Hide alert</button>

<div id="targetElement" class="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800" role="alert">
  <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: alert css tailwind-css

Link to this answer
Share Copy Link

Contributed on Jun 11 2022

Stupid Scarab

0 Answers Avg Quality 2/10

alert tailwind css

Contents

More Related Answers

alert tailwind css

Closely Related Answers

tailwind alert

alert message tailwind

alert tailwind css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.