Home
Matti
Showcase

Showcase

A version of an showcase.

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

Feature showcase

Author Matti

1.1k

Fork Fullscreen

<div class="w-full flex flex-col md:flex-row py-24 dark:bg-gray-800">
    <div class="w-full md:w-3/5 mx-auto flex flex-col md:flex-row">
        <div class="w-full relative md:w-1/2 items-center h-auto md:py-12 flex">
            <div class="absolute z-30 bg-gray-300 w-[85%] h-[70%] right-0 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1501183638710-841dd1904471?auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">&nbsp;</div>
            <div class="relative left-0 z-20 bg-gray-800 dark:bg-gray-600 w-[90%] min-h-64">
                <div class="relative w-[12%] min-h-64 [writing-mode:vertical-lr] text-2xl rotate-180 text-white dark:text-gray-800 py-20 text-center">OUR SHOWCASE</div>      
            </div>            
        </div>
        <div class="w-full relative md:w-1/2 justify-items-center h-auto md:py-8 pl-6 flex flex-col my-auto">
            <div class="flex flex-row md:!flex-col mt-4 md:!mt-0">
                <div class="w-1/12">
                    <svg id="Layer_1" data-name="Layer 1" class="md:mb-4 max-h-8 max-w-8 text-gray-400 mt-2 md:!mt-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" ><defs><style>.cls-637b7068f95e86b59c579e0f-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><path class="cls-637b7068f95e86b59c579e0f-1" d="M11,18.68h5.73a3.82,3.82,0,0,1,3.82,3.82v0a0,0,0,0,1,0,0H7.23a0,0,0,0,1,0,0v0A3.82,3.82,0,0,1,11,18.68Z"></path><path class="cls-637b7068f95e86b59c579e0f-1" d="M16.77,18.68V5.32A3.82,3.82,0,0,0,13,1.5H12A3.82,3.82,0,0,0,8.18,5.32h0"></path><path class="cls-637b7068f95e86b59c579e0f-1" d="M8.18,5.32h0A4.77,4.77,0,0,1,13,10.09v1a0,0,0,0,1,0,0H3.41a0,0,0,0,1,0,0v-1A4.77,4.77,0,0,1,8.18,5.32Z"></path><line class="cls-637b7068f95e86b59c579e0f-1" x1="11.05" y1="16.77" x2="11.05" y2="18.68"></line></svg>
                </div>
                <div class="w-11/12">
                    <h1 class="text-3xl mt-2 md:text-xl font-semibold text-gray-800 dark:text-white">
                        The <span class="text-emerald-600"> Feature</span> of #1
                    </h1>
                </div>
            </div>
            <div class="w-[95%] md:!w-[125%] xl:!w-[100%]">
                <p class="text-md mb-4 line-clamp-4 md:line-clamp-none dark:text-white">
                    X-One of a lot of features is that's free for ever. You can copy and paste it or modify however you want. Feel free to name the author in a hidden remark or to set the components as favorite.
                </p>
            </div>
            <div class="flex flex-row">
                <div class="basis-1/3 hover:scale-125 hover:ml-6 cursor-pointer transition-all duration-300 pr-8 h-24 bg-cover py-2 px-2 text-white" style="background-image: url('https://images.unsplash.com/photo-1520687052856-eb38da98adeb?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"> 
                    <h1 class="font-semibold text-white">#1</h1>
                    <p class="w-full text-sm mt-2 line-clamp-2">
                        One of a lot of features is that's free for ever. You can copy and paste it or modify however you want. Feel free to name the author in a hidden remark or to set the components as favorite.
                    </p>
                </div>

                <div class="basis-1/3 hover:scale-125 cursor-pointer transition-all duration-300 pr-8 h-24 bg-cover py-2 px-2 text-white" style="background-image: url('https://images.unsplash.com/photo-1503174971373-b1f69850bded?q=80&w=2713&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
                    <h1 class="font-semibold text-white">#2</h1>
                    <p class="w-full text-sm mt-2 line-clamp-2">
                        One of a lot of features is that's free for ever. You can copy and paste it or modify however you want. Feel free to name the author in a hidden remark or to set the components as favorite.
                    </p>
                </div>

                <div class="basis-1/3 hover:scale-125 hover:-ml-12 cursor-pointer transition-all duration-300 pr-8 h-24 bg-cover py-2 px-2 text-white" style="background-image: url('https://images.unsplash.com/photo-1593696140826-c58b021acf8b?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
                    <h1 class="font-semibold text-white">#3</h1>
                    <p class="w-full text-sm mt-2 line-clamp-2">
                        One of a lot of features is that's free for ever. You can copy and paste it or modify however you want. Feel free to name the author in a hidden remark or to set the components as favorite.
                    </p>
                </div>                
            </div>
        </div>
    </div>
</div>

Related Examples

Services showcase Section
With hover effect on cards

Author:
Anonymous

1 year ago

2.3k
Layout switcher with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

866
accordion with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.9k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.6k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

2 months ago

601
Animated cards

Author:
Michael Andreuzza

1 year ago

6.3k
Typical feature

Author:
Matti

9 months ago

1.2k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.5k
Features list template

Author:
Lukas Müller

2 years ago

11k
Feature showcase cards

Author:
bara masalma

8 months ago

862
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

1.7k
Basic features section
Display your most important features

Author:
Dipti narayan

2 years ago

6.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components