Product hunt showcase

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

Other Notification

Author Lukas Müller

Tailwind v3.4 13k 16

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

Laurits

3 years ago

16.6k
Promotional notification
sticky bottom promotional banner

Laurits

3 years ago

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

Sienna

3 years ago

34.5k
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.

Abhiraj

1 year ago

2.2k
joker
joker cyber punk

Baraka Salvator

1 year ago

2.1k
NOTIFICATION
This code can serve as a boiler-plate for a notification for an application

NUNNA VIJAYA KRISHNA

7 months ago

1.1k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

515
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Muhammad Umair Arshad

1 year ago

1.7k
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

SHARIFUL ISLAM

1 year ago

3.7k
spotify web player

Lokesh H

3 months ago

329
Team Members

Abdul Baset Bappy

1 year ago

1.2k
Mfuranziza Hamza
Mfuranziza Hamza full development

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k