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.2k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

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

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

10 months ago

845
joker
joker cyber punk

Author:
Baraka Salvator

5 months ago

891
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

409
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

12.9k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

4 months ago

1.2k
Image - Figure with figcaption design

Author:
Maxim

9 months ago

704
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

1 year ago

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

Author:
ORGIN_DREAMS

6 months ago

522
Full Page loading overlay

Author:
Bunny

2 years ago

12.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components