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 11.9k 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.8k
Success alert

Anonymous

3 years ago

16.2k
Alert mono color
minimal alerts design

TailwindFlex

4 years ago

11.6k
Notification Alert Section
Notification card with close button

Prashant

4 years ago

13.9k
machine
tell you how your MAC pc work

gidy

11 months ago

751
Fixed alert
fixed top right alert

Conan Hilton

4 years ago

12.7k
Alerts - Htmlwind
Simple alerts

Htmlwind

1 year ago

1.1k
card Alert - icons - glass

ABDO-SY

1 year ago

1.5k
Confirmation modal/card

Sophia Baker

3 years ago

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

Arya

4 years ago

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

Bushobozi Bush Ivan

8 months ago

633
Commentaires simple
Commentaires

Omer fils ELENGA

7 months ago

786