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

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

Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.6k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.5k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

15.3k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

16.8k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

16.5k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

10.3k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

5.1k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Author:
Kavita Joshi

1 year ago

6.9k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

9 months ago

1.7k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Author:
Developer Kwame

1 year ago

2k
tailwind services section
display features/services of your product

Author:
L.J. Weber

2 years ago

20.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components