Alert with big logo

This tailwind example is contributed by _Amar_, on 14-Jul-2022. Component is made with Tailwind v3.4. similar terms for this example is caution

Alert

Author _Amar_

Tailwind v3.4 12k 10

Fork Fullscreen

<section class="flex flex-col flex-wrap pt-12">
  <div class="flex flex-row flex-wrap justify-center">
    <div class="flex justify-center text-center m-2 h-24 w-64">
      <div class="flex-shrink-0 rounded-full bg-gray-100 w-24 h-24 border border-blue-500 z-10">
        <i class="fas fa-pump-soap fa-4x p-2 w-24 h-24 text-blue-500"></i>
      </div>
      <div class="flex flex-col text-left bg-blue-500 text-white text-xs self-center pl-16 pr-4 py-2 -ml-12 rounded-r-full">
        <h3 class="text-lg">Hello World</h3>
        <p class="w-64 text-xs overflow-y-hidden overflow-x-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</section>
<section class="flex flex-col flex-wrap pt-12">
  <div class="flex flex-row flex-wrap justify-center">
    <div class="flex justify-center text-center m-2 h-24 w-64">
      <div class="flex-shrink-0 rounded-full bg-gray-100 w-24 h-24 border border-red-700 z-10">
        <i class="fas fa-quote-left fa-4x p-2 w-24 h-24 text-red-700"></i>
      </div>
      <div class="flex flex-col text-left bg-red-700 text-white text-xs self-center pl-16 pr-4 py-2 -ml-12">
        <h3 class="text-lg">Hello World</h3>
        <p class="w-64 text-xs overflow-y-hidden overflow-x-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</section>

Related Examples

Tailwind CSS Alert

Krishna Gudpalle

4 years ago

11.9k
Success alert

Anonymous

3 years ago

16.3k
Alert mono color
minimal alerts design

TailwindFlex

4 years ago

11.6k
Notification Alert Section
Notification card with close button

Prashant

4 years ago

14k
Basic alert (Success, Info, Warning, Error)

Prashant

3 years ago

15.6k
Closable toast message
show notification toast message at the bottom right corner

Prajwal Hallale

3 years ago

8.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.

anandu ap

2 years ago

4.1k
Basic alert (Success, Info, Warning, Error)

John Hutton

1 year ago

766
Confirmation model

Mr Robot

4 years ago

13.6k
machine
tell you how your MAC pc work

gidy

11 months ago

753
Alert Component

Prem..

4 years ago

12.2k
Tailwind Css Alert

Prashant

4 years ago

12.2k