Home
Banshee
Applications Showcase

Applications Showcase

This is a stylish and interactive application showcase component designed for web use. It features the following elements:

Background Styling:
The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance.

Main Icon:
A small circular icon, located at the top-right corner, appears with smooth hover effects:

Enlarges to double its size (scale-[2]).
Rotates (rotate-[410deg]).
Moves diagonally upwards-right (translate-x-3, -translate-y-3).
These transitions occur over a duration of 1 second (transition duration-1000).
Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades.

App Icon and Info:
Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95).
Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right.
A short app description styled as secondary text.
Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features:

A hover effect with color inversion (gray to black).
A lift effect (hover:-translate-y-1) when hovered.
This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

This tailwind example is contributed by Banshee, on 06-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner,Services,Why choose us

Button Call to Action Feature showcase Logo cloud

Author Banshee

229

Fork Fullscreen

<div class="relative p-3 bg-white rounded-3xl flex overflow-hidden items-center min-w-[300px] cursor-pointer group"
        style="background-size: 600px; background-image:url(https://pbs.twimg.com/profile_images/1720598745664958465/TYA_2LYQ_400x400.png);">
        <img class="z-50 h-5 w-5 absolute top-3 right-3 rounded-full outline outline-gray-100/15 transition duration-1000 group-hover:scale-[2] group-hover:rotate-[410deg] group-hover:-translate-y-3 group-hover:translate-x-3" height="20" width="20" src="https://pbs.twimg.com/profile_images/1720598745664958465/TYA_2LYQ_400x400.png" />
        <div
            class="absolute inset-0 ring-1 ring-white/30 ring-inset bg-gradient-to-l from-black/80 via-black/50 to-black/20 rounded-2xl overflow-hidden">
        </div>
        <div class="relative z-10 flex items-center space-x-4">
            <img class="h-16 w-16 rounded-2xl object-contain shadow-md border border-gray-100/20 transition duration-300 group-hover:scale-95" height="64" width="64" src="https://pbs.twimg.com/profile_images/1720598745664958465/TYA_2LYQ_400x400.png" />
            <div class="flex flex-col transition duration-300 group-hover:-translate-x-2">
                <div class="relative text-md font-semibold text-gray-100 cursor-pointer 
                                        after:transition-[width] after:ease-in-out after:duration-700 
                                        after:absolute after:bg-gradient-to-r after:from-gray-100/30
                                        after:via-gray-100/10 after:to-transparent after:origin-left 
                                        after:h-[2px] after:w-0 group-hover:after:w-full 
                                        after:bottom-0 after:left-0">
                    Application Name
                </div>
                <p class="text-xs text-gray-50/70 text-balance">Description Lorem Ipsum</p>
            </div>
        </div>
    </div>

<div class="relative p-3 bg-white rounded-3xl flex overflow-hidden items-center min-w-[300px] cursor-pointer group"
        style="background-size: 600px; background-image:url(https://static-00.iconduck.com/assets.00/react-icon-2048x2048-o8k3ymqa.png);">
        <img class="z-50 h-5 w-5 absolute top-3 right-3 rounded-full outline outline-gray-100/15 transition duration-1000 group-hover:scale-[2] group-hover:rotate-[410deg] group-hover:-translate-y-3 group-hover:translate-x-3" height="20" width="20" src="https://static-00.iconduck.com/assets.00/react-icon-2048x2048-o8k3ymqa.png" />
        <div
            class="absolute inset-0 ring-1 ring-white/30 ring-inset bg-gradient-to-l from-black/80 via-black/50 to-black/20 rounded-2xl overflow-hidden">
        </div>
        <div class="relative z-10 flex items-center space-x-4">
            <img class="h-16 w-16 rounded-2xl object-contain shadow-md border border-gray-100/20 transition duration-300 group-hover:scale-95" height="64" width="64" src="https://static-00.iconduck.com/assets.00/react-icon-2048x2048-o8k3ymqa.png" />
            <div class="flex flex-col transition duration-300 group-hover:-translate-x-2">
                <div class="relative text-md font-semibold text-gray-100 cursor-pointer 
                                        after:transition-[width] after:ease-in-out after:duration-700 
                                        after:absolute after:bg-gradient-to-r after:from-gray-100/30
                                        after:via-gray-100/10 after:to-transparent after:origin-left 
                                        after:h-[2px] after:w-0 group-hover:after:w-full 
                                        after:bottom-0 after:left-0">
                    Application Name
                </div>
                <p class="text-xs text-gray-50/70 text-balance">Description Lorem Ipsum</p>
            </div>
        </div>
    </div>

<div class="relative p-3 bg-white rounded-3xl flex overflow-hidden items-center min-w-[300px] cursor-pointer group"
        style="background-size: 600px; background-image:url(https://styde.net/wp-content/uploads/2017/02/vue-img-destacada-x2.png);">
        <img class="z-50 h-5 w-5 absolute top-3 right-3 rounded-full outline outline-gray-100/15 transition duration-1000 group-hover:scale-[2] group-hover:rotate-[410deg] group-hover:-translate-y-3 group-hover:translate-x-3" height="20" width="20" src="https://styde.net/wp-content/uploads/2017/02/vue-img-destacada-x2.png" />
        <div
            class="absolute inset-0 ring-1 ring-white/30 ring-inset bg-gradient-to-l from-black/80 via-black/50 to-black/20 rounded-2xl overflow-hidden">
        </div>
        <div class="relative z-10 flex items-center space-x-4">
            <img class="h-16 w-16 rounded-2xl object-contain shadow-md border border-gray-100/20 transition duration-300 group-hover:scale-95" height="64" width="64" src="https://styde.net/wp-content/uploads/2017/02/vue-img-destacada-x2.png" />
            <div class="flex flex-col transition duration-300 group-hover:-translate-x-2">
                <div class="relative text-md font-semibold text-gray-100 cursor-pointer 
                                        after:transition-[width] after:ease-in-out after:duration-700 
                                        after:absolute after:bg-gradient-to-r after:from-gray-100/30
                                        after:via-gray-100/10 after:to-transparent after:origin-left 
                                        after:h-[2px] after:w-0 group-hover:after:w-full 
                                        after:bottom-0 after:left-0">
                    Application Name
                </div>
                <p class="text-xs text-gray-50/70 text-balance">Description Lorem Ipsum</p>
            </div>
        </div>
    </div>

Related Examples

Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

2 years ago

9.6k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

1 year ago

7.9k
Buy Me a Coffee CTA section

Author:
Sienna

1 year ago

8.2k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

7.1k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

1 month ago

343
Jumbotron card

Author:
Sienna

1 year ago

9.9k
Animated Button
on hover show icon

Author:
Lautaro Gómez

4 months ago

847
Feature cards with icons on top

Author:
Manon Daniel

1 year ago

13k
Button with hover to button shadow
A beautiful button with a special shadow

Author:
Zayed Hossain

2 months ago

358
Github star button

Author:
Simon Scheffer

2 years ago

9.5k
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

3 months ago

794
Company icons grid
responsive company icons showcase grid

Author:
Amit Pachange

1 year ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components