Home
ABDO-SY
card Alert - icons - glass

card Alert - icons - glass

This tailwind example is contributed by ABDO-SY, on 26-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is caution

Card Alert

Author ABDO-SY

841

Fork Fullscreen

<section
  class="-z-40 flex flex-col gap-5 h-screen relative bg-gradient-to-l from-[#180835] via-[#620546] to-[#b10358] overflow-hidden flex items-center justify-center">
  <div class="flex flex-col gap-6 w-[473px] p-8  bg-white bg-opacity-50 rounded-[32px] border-white border-[2px]">
    <h2
      class=" text-[#675055] drop-shadow-[1px_1px_0px_white]  text-3xl font-semibold font-['Poppins'] leading-normal tracking-wider">
      Transaction Alert</h2>
    <div class="flex px-2 gap-1 items-center w-[393px] h-14  bg-white rounded-[10px]">
      <span class="w-3 h-3  bg-[#ff0909] rounded-full"></span>
      <p class=" text-[#ff0909]/50 capitalize text-base font-bold leading-normal tracking-wide">shoes order debited Rs.
        30. Reply if not ...</p>
    </div>
  </div>
  <div class="flex gap-9">
    <div
      class="flex items-center justify-center  w-28 h-28  bg-white bg-opacity-50 rounded-full border-white border-[2px]">
      <svg width="55" height="43" viewBox="0 0 55 43" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M50.4167 0H4.58333C2.05295 0 0 2.06362 0 4.60714V38.3929C0 40.9364 2.05295 43 4.58333 43H50.4167C52.9471 43 55 40.9364 55 38.3929V4.60714C55 2.06362 52.9471 0 50.4167 0ZM16.8056 9.21429C20.1762 9.21429 22.9167 11.969 22.9167 15.3571C22.9167 18.7453 20.1762 21.5 16.8056 21.5C13.4349 21.5 10.6944 18.7453 10.6944 15.3571C10.6944 11.969 13.4349 9.21429 16.8056 9.21429ZM27.5 31.9429C27.5 32.9603 26.5451 33.7857 25.3611 33.7857H8.25C7.06597 33.7857 6.11111 32.9603 6.11111 31.9429V30.1C6.11111 27.0478 8.98524 24.5714 12.5278 24.5714H13.0052C14.1797 25.0609 15.4592 25.3393 16.8056 25.3393C18.1519 25.3393 19.441 25.0609 20.6059 24.5714H21.0833C24.6259 24.5714 27.5 27.0478 27.5 30.1V31.9429ZM48.8889 26.875C48.8889 27.2973 48.5451 27.6429 48.125 27.6429H34.375C33.9549 27.6429 33.6111 27.2973 33.6111 26.875V25.3393C33.6111 24.917 33.9549 24.5714 34.375 24.5714H48.125C48.5451 24.5714 48.8889 24.917 48.8889 25.3393V26.875ZM48.8889 20.7321C48.8889 21.1545 48.5451 21.5 48.125 21.5H34.375C33.9549 21.5 33.6111 21.1545 33.6111 20.7321V19.1964C33.6111 18.7741 33.9549 18.4286 34.375 18.4286H48.125C48.5451 18.4286 48.8889 18.7741 48.8889 19.1964V20.7321ZM48.8889 14.5893C48.8889 15.0116 48.5451 15.3571 48.125 15.3571H34.375C33.9549 15.3571 33.6111 15.0116 33.6111 14.5893V13.0536C33.6111 12.6312 33.9549 12.2857 34.375 12.2857H48.125C48.5451 12.2857 48.8889 12.6312 48.8889 13.0536V14.5893Z"
          fill="white"></path>
      </svg></div>
    <div class="flex gap-9">
      <div
        class="flex items-center justify-center  w-28 h-28  bg-white bg-opacity-50 rounded-full border-white border-[2px]">
        <svg width="52" height="55" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0 22.6562C0 23.9502 1.0498 25 2.34375 25H19.5312C20.8252 25 21.875 23.9502 21.875 22.6562V9.375H0V22.6562ZM15.625 13.0859C15.625 12.7637 15.8887 12.5 16.2109 12.5H18.1641C18.4863 12.5 18.75 12.7637 18.75 13.0859V15.0391C18.75 15.3613 18.4863 15.625 18.1641 15.625H16.2109C15.8887 15.625 15.625 15.3613 15.625 15.0391V13.0859ZM15.625 19.3359C15.625 19.0137 15.8887 18.75 16.2109 18.75H18.1641C18.4863 18.75 18.75 19.0137 18.75 19.3359V21.2891C18.75 21.6113 18.4863 21.875 18.1641 21.875H16.2109C15.8887 21.875 15.625 21.6113 15.625 21.2891V19.3359ZM9.375 13.0859C9.375 12.7637 9.63867 12.5 9.96094 12.5H11.9141C12.2363 12.5 12.5 12.7637 12.5 13.0859V15.0391C12.5 15.3613 12.2363 15.625 11.9141 15.625H9.96094C9.63867 15.625 9.375 15.3613 9.375 15.0391V13.0859ZM9.375 19.3359C9.375 19.0137 9.63867 18.75 9.96094 18.75H11.9141C12.2363 18.75 12.5 19.0137 12.5 19.3359V21.2891C12.5 21.6113 12.2363 21.875 11.9141 21.875H9.96094C9.63867 21.875 9.375 21.6113 9.375 21.2891V19.3359ZM3.125 13.0859C3.125 12.7637 3.38867 12.5 3.71094 12.5H5.66406C5.98633 12.5 6.25 12.7637 6.25 13.0859V15.0391C6.25 15.3613 5.98633 15.625 5.66406 15.625H3.71094C3.38867 15.625 3.125 15.3613 3.125 15.0391V13.0859ZM3.125 19.3359C3.125 19.0137 3.38867 18.75 3.71094 18.75H5.66406C5.98633 18.75 6.25 19.0137 6.25 19.3359V21.2891C6.25 21.6113 5.98633 21.875 5.66406 21.875H3.71094C3.38867 21.875 3.125 21.6113 3.125 21.2891V19.3359ZM19.5312 3.125H17.1875V0.78125C17.1875 0.351562 16.8359 0 16.4062 0H14.8438C14.4141 0 14.0625 0.351562 14.0625 0.78125V3.125H7.8125V0.78125C7.8125 0.351562 7.46094 0 7.03125 0H5.46875C5.03906 0 4.6875 0.351562 4.6875 0.78125V3.125H2.34375C1.0498 3.125 0 4.1748 0 5.46875V7.8125H21.875V5.46875C21.875 4.1748 20.8252 3.125 19.5312 3.125Z"
            fill="white"></path>
        </svg></div>
    </div>
  </div>
  <div class="flex gap-9">
    <div
      class="flex items-center justify-center  w-28 h-28  bg-white bg-opacity-50 rounded-3xl border-white border-[2px]">
      <svg width="51" height="50" viewBox="0 0 51 50" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M25.2027 50C11.3922 50 0.202698 38.8105 0.202698 25C0.202698 11.1895 11.3922 0 25.2027 0C39.0132 0 50.2027 11.1895 50.2027 25C50.2027 38.8105 39.0132 50 25.2027 50ZM36.8962 20.5645H25.2027V13.4173C25.2027 12.3387 23.8922 11.7944 23.1362 12.5605L11.614 24.1431C11.1402 24.6169 11.1402 25.373 11.614 25.8468L23.1362 37.4294C23.9023 38.1956 25.2027 37.6512 25.2027 36.5726V29.4355H36.8962C37.5616 29.4355 38.1059 28.8911 38.1059 28.2258V21.7742C38.1059 21.1089 37.5616 20.5645 36.8962 20.5645Z"
          fill="white"></path>
      </svg></div>
    <div
      class="flex items-center justify-center  w-28 h-28  bg-white bg-opacity-50 rounded-3xl border-white border-[2px]">
      <svg width="55" height="55" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M23.925 25.375H5.075C4.67625 25.375 4.35 25.7828 4.35 26.2812V28.0938C4.35 28.5922 4.67625 29 5.075 29H23.925C24.3238 29 24.65 28.5922 24.65 28.0938V26.2812C24.65 25.7828 24.3238 25.375 23.925 25.375ZM26.825 7.25C25.6242 7.25 24.65 8.46777 24.65 9.96875C24.65 10.3709 24.7225 10.7447 24.8494 11.0902L21.5688 13.5484C20.8709 14.0695 19.9692 13.775 19.5659 12.8914L15.873 4.81445C16.3578 4.31602 16.675 3.56836 16.675 2.71875C16.675 1.21777 15.7008 0 14.5 0C13.2992 0 12.325 1.21777 12.325 2.71875C12.325 3.56836 12.6422 4.31602 13.127 4.81445L9.43406 12.8914C9.03078 13.775 8.12453 14.0695 7.43125 13.5484L4.15516 11.0902C4.2775 10.7504 4.35453 10.3709 4.35453 9.96875C4.35453 8.46777 3.38031 7.25 2.17953 7.25C0.97875 7.25 0 8.46777 0 9.96875C0 11.4697 0.974219 12.6875 2.175 12.6875C2.29281 12.6875 2.41063 12.6648 2.52391 12.6422L5.8 23.5625H23.2L26.4761 12.6422C26.5894 12.6648 26.7072 12.6875 26.825 12.6875C28.0258 12.6875 29 11.4697 29 9.96875C29 8.46777 28.0258 7.25 26.825 7.25Z"
          fill="white"></path>
      </svg></div>
  </div>
</section>

Related Examples

Confirmation model

Author:
Mr Robot

3 years ago

13.1k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

3 years ago

10.2k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

15.5k
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

1 year ago

2.3k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

10 months ago

886
cards
html , css ,

Author:
Hacker Development

7 months ago

786
alert
html , css

Author:
Hacker Development

7 months ago

987
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.2k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

9 months ago

1.3k
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Author:
Isabel McGuigan

1 year ago

2.6k
Card 30/70

Author:
Maxim

8 months ago

558
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components