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_

10.6k

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

2 years ago

10.1k
Success alert

Author:
Anonymous

1 year ago

12.8k
Alert mono color
minimal alerts design

Author:
TailwindFlex

2 years ago

9.4k
Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

11.5k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 month ago

217
Dismissible alert

Author:
Gopi Yadav

2 years ago

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

Author:
Rajesh Maheshwari

1 week ago

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

Author:
Prashant

1 year ago

11.9k
Notification alert section
Show info, success, or error messages

Author:
Arya

2 years ago

9.9k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

9.4k
Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

1 year ago

13.5k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

14k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components