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

Author:
Anonymous

1 year ago

13.1k
Alert mono color
minimal alerts design

Author:
TailwindFlex

2 years ago

9.6k
Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

11.7k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

1 month ago

218
Tailwind Css Alert

Author:
Prashant

2 years ago

10.6k
404 Page
The 404 Page is a responsive and customizable error page designed to inform users when they’ve reached a nonexistent or broken link. This component not only improves user experience but also provides a chance to showcase creativity and guide users back to the right path. Key Features: Fully responsive design that works on all devices. Engaging visuals (customizable images, icons, or animations). Includes a message like "Page Not Found" or "Oops! Something went wrong." Provides helpful navigation options such as a "Go Home" button or links to other pages. Easily customizable for themes, styles, and content.

Author:
Abhiraj

3 months ago

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

Author:
anandu ap

5 months ago

792
Alert Component

Author:
Conan Hilton

2 years ago

10.3k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

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

Author:
Code huit

1 year ago

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

Author:
Rajesh Maheshwari

1 month ago

285

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components