Home
Lukas Müller
Product hunt showcase

Product hunt showcase

This tailwind example is contributed by Lukas Müller, on 22-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Toast, Snackbar

Other Notification

Author Lukas Müller

12.3k

Fork Fullscreen

<div class="fixed left-5 bottom-5 z-40">
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="250" height="54" viewBox="0 0 250 54">
            <g fill="none" fill-rule="evenodd">
                <rect stroke="#221D21" fill="#221D21" x="0.5" y="0.5" width="249" height="53"
                    rx="10"></rect><text font-family="Helvetica-Bold, Helvetica" font-size="9"
                    font-weight="bold" fill="#EEF2FF">
                    <tspan x="53" y="20">PRODUCT HUNT</tspan>
                </text>
                <text font-family="Helvetica-Bold, Helvetica" font-size="16" font-weight="bold" fill="#EEF2FF">
                    <tspan x="52" y="40">#1 Product of the Day</tspan>
                </text>
                <g transform="translate(17 13)">
                    <path
                        d="M4.33 16.364.328 24.9c-.126.258.007.42.427.34l3.258-.708a.244.244 0 0 1 .317.17l1.467 3.007c.14.324.302.39.428.133l4.26-8.934-6.155-2.544ZM16.67 16.364l4.002 8.536c.133.258-.007.42-.427.34l-3.258-.708a.246.246 0 0 0-.317.17l-1.467 3.007c-.14.324-.295.39-.428.133l-4.26-8.934 6.155-2.544Z"
                        fill="#DE7818" fill-rule="nonzero"></path>
                    <path
                        d="M9.298 21.392c0 .007-.014 0-.029 0a10.44 10.44 0 0 1-5.97-2.742c-.008-.008-.03-.015-.023-.023l.184-.39c.008-.015.022.022.03.03 1.577 1.466 3.767 2.388 6.007 2.66.008 0 .023 0 .023.008l-.222.457Z"
                        fill="#B35454" fill-rule="nonzero"></path>
                    <circle fill="#F0CD0A" fill-rule="nonzero" cx="10.5" cy="10.489" r="10.489">
                    </circle>
                    <circle fill="#D2B309" fill-rule="nonzero" cx="10.5" cy="10.489" r="9.045">
                    </circle>
                    <circle fill="#E3C101" fill-rule="nonzero" cx="10.75" cy="10.75" r="8.75">
                    </circle>
                    <path d="M10.45 14.755h2.15V6.3h-2.15L8.3 7.765v1.851l2.04-1.377h.11z" fill="#FFF2B5"></path>
                    <path
                        d="M12.97 3.089a7.604 7.604 0 0 1 .353 14.698c2.035-1.555 3.384-4.209 3.384-7.224 0-3.184-1.504-5.963-3.738-7.474Z"
                        fill-opacity="0.2" fill="#FFF" fill-rule="nonzero"></path>
                    <path
                        d="M11.702 21.392c.007.007.022 0 .029 0 2.293-.288 4.4-1.21 5.986-2.728.007-.007.029-.014.022-.022l-.185-.39c-.007-.015-.022.022-.03.029-1.577 1.467-3.773 2.374-6.021 2.646-.008 0-.023 0-.023.008l.222.457Z"
                        fill="#B35454" fill-rule="nonzero"></path>
                </g>
            </g>
        </svg>
    </a>
</div>

Related Examples

Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.4k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

10.1k
Copy code block
showcase command-line instructions or code examples. It provides a clear distinction between code content and other elements.

Author:
Sienna

3 years ago

33.6k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

11 months ago

958
joker
joker cyber punk

Author:
Baraka Salvator

6 months ago

1.2k
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

3 months ago

506
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.3k
Button
Button with scale animation on hover and translate-y on active

Author:
Nabile BABABODI ABOUDOU MOUTAROU

3 days ago

5
Privacy Policy Page Template

Author:
Anonymous

1 year ago

1.5k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

7 months ago

675
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

2 months ago

203
Toast
The best Notfication Toast with Tailwind css

Author:
irahoza daniel

7 months ago

744

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components