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

toast or alert message tailwind

Add Answer

Tiago F2 answered on February 25, 2023 Popularity 8/10 Helpfulness 3/10

answer toast or alert message tailwind

toast or alert message tailwind

Comment

alert message tailwind

toast message tailwind

<div class="flex justify-center space-x-2">
  <div
    class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-white bg-clip-padding text-sm shadow-lg shadow-black/5 data-[te-toast-show]:block data-[te-toast-hide]:hidden dark:bg-neutral-600"
    id="static-example"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    data-te-autohide="false"
    data-te-toast-init
    data-te-toast-show>
    <div
      class="flex items-center justify-between rounded-t-lg border-b-2 border-neutral-100 border-opacity-100 bg-white bg-clip-padding px-4 pt-2.5 pb-2 dark:border-opacity-50 dark:bg-neutral-600">
      <p class="font-bold text-neutral-500 dark:text-neutral-200">
        MDBootstrap
      </p>
      <div class="flex items-center">
        <p class="text-xs text-neutral-600 dark:text-neutral-300">
          11 mins ago
        </p>
        <button
          type="button"
          class="ml-2 box-content rounded-none border-none opacity-80 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
          data-te-toast-dismiss
          aria-label="Close">
          <span
            class="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="h-6 w-6">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6 18L18 6M6 6l12 12" />
            </svg>
          </span>
        </button>
      </div>
    </div>
    <div
      class="break-words rounded-b-lg bg-white py-4 px-4 text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200">
      Static Example
    </div>
  </div>
</div>

Popularity 8/10 Helpfulness 3/10 Language html

Source: tailwind-elements.com

Tags: alert html message toast

Link to this answer
Share Copy Link

Contributed on Feb 25 2023

Tiago F2

0 Answers Avg Quality 2/10

toast or alert message tailwind

Contents

More Related Answers

toast or alert message tailwind

Grepper

Documentation

Social

Legal

Contact

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