8 items left

1<style>
2  .blink {
3    animation: blink-animation 1.5s steps(5, start) infinite;
4    color: red;
5    display: inline-block; /* Display as inline-block */
6    vertical-align: middle; /* Align vertically to middle */
7    font-size: 10px; /* Set font size */
8  }
9
10  @keyframes blink-animation {
11    to {
12      visibility: hidden;
13    }
14  }
15
16  .red-div {
17    background-color: #ffcccc;
18    padding: 2px 10px; /* 6px vertical, 10px horizontal */
19    border-radius: 8px; /* Rounded corners */
20    display: inline-block; /* Display as inline-block */
21    text-align: center; /* Center align the content */
22    margin: 0 auto; /* Horizontally center the red-div */
23  }
24
25  .text {
26    display: inline-block; /* Display as inline-block */
27    vertical-align: middle; /* Align vertically to middle */
28    margin-left: 10px; /* Add some space between the dot and the text */
29    color: #AD0000; /* Text color */
30    font-weight: 500; /* Medium font weight */
31    font-size: 12px; /* Set font size */
32    text-align: justify; /* Justify the text to the center */
33  }
34</style>
35
36<div class="red-div">
37  <div class="blink">&#9679;</div>
38  <div class="text">Only 4 bags left at this price.</div>
39</div>