I am intensively using tailwind css for my frontend projects recently. Here I am recording a bunch of widgets that I created in my projects and thought will be refered to in the furture.
- The main part is just a rounded div block
- The tip is a div rotated 45 degree so that only a triangle tip showed up
- No border style: use
border-b-2for border line
absoluteto position the ping circle to the top right corner
- Two identical circles, one for ping animation, one remains static