Alerts Bootstrap 5Free+ CSS
Add a alert to your UI with Tailwind E-commerce product notifications. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
2.3k views28 downloads
gosnippets.com/preview/tailwind-e-commerce-product-notifications
Source Code
1<div class="flex flex-wrap items-center justify-center w-screen text-gray-500 min-h-screen bg-gray-50 p-10">
2
3 <div class="space-y-10 m-5">
4 <!-- Component Start -->
5 <div class="relative flex items-center ps-2 pe-6 w-72 max-w-full h-20 rounded-full bg-white shadow-lg hover:shadow-xl transition duration-100">
6 <img class="w-16 h-16 rounded-full" src="https://images.generated.photos/m44TfgxWw8bkJQuXTH4uLYKNTyuNjeYPNcEKcRb9Kdo/rs:fit:256:256/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAyMjg5NzcuanBn.jpg" alt="">
7 <p class="ms-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">Amara</a> has liked this product.</p>
8 <div class="absolute flex items-center justify-center w-8 h-8 rounded-full shadow-lg top-0 right-0 -mt-1 -me-1 bg-red-400">
9 <svg class="w-5 h-5 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
10 <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
11 </svg>
12 </div>
13 </div>
14 <!-- Component End -->
15
16 <!-- Component Start -->
17 <div class="relative flex items-center ps-2 pe-6 w-72 max-w-full h-20 rounded-full bg-white shadow-lg hover:shadow-xl transition duration-100">
18 <img class="w-16 h-16 rounded-full" src="https://images.generated.photos/e3_04t3P2byp0fOtpG31rUaVYokHCXDQgZLpQulwMjw/rs:fit:256:256/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA1NDg1ODMuanBn.jpg" alt="">
19 <p class="ms-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">David</a> has purchased this product.</p>
20 <div class="absolute flex items-center justify-center w-8 h-8 rounded-full bg-green-400 shadow-lg top-0 right-0 -mt-1 -me-1">
21 <svg class="w-5 h-5 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
22 <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
23 </svg>
24 </div>
25 </div>
26 <!-- Component End -->
27
28 <!-- Component Start -->
29 <div class="relative flex items-center ps-2 pe-6 w-72 max-w-full h-20 rounded-full bg-white shadow-lg hover:shadow-xl transition duration-100">
30 <img class="w-16 h-16 rounded-full" src="https://images.generated.photos/0PFsqYp0XTiayISILkj5ILce1BZEkukUJyXyNza-S3o/rs:fit:256:256/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA5NTk2NjEuanBn.jpg" alt="">
31 <p class="ms-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">Grace</a> has gifted this product.</p>
32 <div class="absolute flex items-center justify-center w-8 h-8 rounded-full bg-purple-400 shadow-lg top-0 right-0 -mt-1 -me-1">
33 <svg class="w-5 h-5 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
34 <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clip-rule="evenodd" />
35 <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" />
36 </svg>
37 </div>
38 </div>
39 <!-- Component End -->
40
41 </div>
42 <div class="space-y-10 m-5">
43 <!-- Component Start -->
44 <div class="relative flex items-center ps-2 pe-6 w-72 max-w-full h-20 rounded-xl bg-white shadow-lg hover:shadow-xl transition duration-100">
45 <img class="w-16 h-16 rounded-lg" src="https://images.generated.photos/m44TfgxWw8bkJQuXTH4uLYKNTyuNjeYPNcEKcRb9Kdo/rs:fit:256:256/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAyMjg5NzcuanBn.jpg" alt="">
46 <p class="ms-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">Amara</a> has liked this product.</p>
47 <div class="absolute flex items-center justify-center w-7 h-7 rounded-lg transform rotate-45 shadow-lg top-0 right-0 -mt-2 -me-2 bg-red-400">
48 <svg class="w-5 h-5 fill-current text-white transform -rotate-45" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
49 <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
50 </svg>
51 </div>
52 </div>
53 <!-- Component End -->
54
55 <!-- Component Start -->
56 <div class="relative flex items-center ps-2 pe-6 w-72 max-w-full h-20 rounded-xl bg-white shadow-lg hover:shadow-xl transition duration-100">
57 <img class="w-16 h-16 rounded-lg" src="https://images.generated.photos/e3_04t3P2byp0fOtpG31rUaVYokHCXDQgZLpQulwMjw/rs:fit:256:256/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA1NDg1ODMuanBn.jpg" alt="">
58 <p class="ms-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">David</a> has purchased this product.</p>
59 <div class="absolute flex items-center justify-center w-7 h-7 rounded-lg transform rotate-45 shadow-lg top-0 right-0 -mt-2 -me-2 bg-green-400">
60 <svg class="w-5 h-5 fill-current text-white transform -rotate-45" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
61 <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
62 </svg>
63 </div>
64 </div>
65 <!-- Component End -->
66
67 <!-- Component Start -->
68 <div class="relative flex items-center ps-2 pe-6 w-72 max-w-full h-20 rounded-xl bg-white shadow-lg hover:shadow-xl transition duration-100">
69 <img class="w-16 h-16 rounded-lg" src="https://images.generated.photos/0PFsqYp0XTiayISILkj5ILce1BZEkukUJyXyNza-S3o/rs:fit:256:256/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA5NTk2NjEuanBn.jpg" alt="">
70 <p class="ms-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">Grace</a> has gifted this product.</p>
71 <div class="absolute flex items-center justify-center w-7 h-7 rounded-lg transform rotate-45 shadow-lg top-0 right-0 -mt-2 -me-2 bg-purple-400">
72 <svg class="w-5 h-5 fill-current text-white transform -rotate-45" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
73 <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clip-rule="evenodd" />
74 <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" />
75 </svg>
76 </div>
77 </div>
78 <!-- Component End -->
79
80 </div>
81
82</div>More Alerts snippets
Bootstrap 5 Notification Page Design snippets example
Add a alert to your UI with Bootstrap 5 Notification Page Design snippets example. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
AlertsView →
Bootstrap 5 Notification UI Design snippets with navbar
Bootstrap 5 Notification UI Design snippets with navbar — a free Bootstrap 5 alert snippet.
AlertsView →
Custom Toast notification with Progress Bar
Add a alert to your UI with Custom Toast notification with Progress Bar. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.
AlertsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.