Home
_Amar_
Alert with big logo

Alert with big logo

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

Alert

Author _Amar_

11.2k

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

Author:
Krishna Gudpalle

3 years ago

11.3k
Success alert

Author:
Anonymous

2 years ago

15k
Alert mono color
minimal alerts design

Author:
TailwindFlex

3 years ago

10.8k
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

13.5k
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Author:
Bushobozi Bush Ivan

1 week ago

25
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

2 years ago

8k
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Author:
Rajesh Maheshwari

1 year ago

1.2k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

1 year ago

2.1k
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Author:
Indra

6 months ago

724
Basic alert (Success, Info, Warning, Error)

Author:
Prashant

2 years ago

14.3k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

13.6k
Confirmation model

Author:
Mr Robot

3 years ago

13.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components