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

11.7k

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

1 year ago

14.1k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

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

Author:
Sienna

2 years ago

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

2 months ago

262
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.1k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

1 month ago

68
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.2k
Chatbox template

Author:
Lucas Martinez

2 years ago

11.4k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

8.1k
Popover
basic popover example

Author:
Dipti narayan

1 year ago

11.7k
Age verification 18+

Author:
Maxim

3 months ago

418
Privacy Policy Page Template

Author:
Anonymous

3 months ago

541

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components