Home
Matti
Warb feature

Warb feature

Here another idea...

[update]
- mobile device fixed (curr iPh, Smg)

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

Feature showcase

Author Matti

2.1k

Fork Fullscreen

<div class="w-full flex flex-col md:flex-row py-24 dark:bg-gray-800">
    <div class="relative w-full ml-auto mt-6 md:!mt-0 md:-mr-[68px] md:w-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 rotate-90 mx-auto w-4/5 md:w-[300px] md:h-[300px]" id="Layer_1" viewBox="0 0 512 512" ><path d="m485.291 129.408-224-128a10.645 10.645 0 0 0-10.581 0l-224 128a10.665 10.665 0 0 0-5.376 9.259v234.667c0 3.819 2.048 7.36 5.376 9.259l224 128c1.643.939 3.456 1.408 5.291 1.408s3.648-.469 5.291-1.408l224-128a10.665 10.665 0 0 0 5.376-9.259V138.667a10.668 10.668 0 0 0-5.377-9.259z" fill="url(&quot;#SvgjsLinearGradient1060&quot;)"></path><defs><linearGradient id="SvgjsLinearGradient1060"><stop stop-color="#059669" offset="0"></stop><stop stop-color="#059669" offset="1"></stop></linearGradient></defs></svg>
        <div class="absolute max-w-[60%] left-[19%] md:left-[13%] md:max-w-[75%] z-20 top-0 text-center text-white max-h-[300px] pt-3 md:!pt-12 overflow-hidden">     
            <h1 class="text-2xl mt-16 md:text-xl font-semibold text-emerald-400 dark:text-white md:my-2">
                The <span class="text-emerald-200"> Feature</span> of #1
            </h1>
            <p class="w-full md:text-sm text-md my-3 md:mt-6 line-clamp-4 md:line-clamp-none">
                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 class="relative w-full mt-6 md:w-auto md:mt-[141px] md:-mr-[21px]">
        <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 rotate-90 mx-auto w-4/5 md:w-[300px] md:h-[300px]" id="Layer_1" viewBox="0 0 512 512"><path d="m485.291 129.408-224-128a10.645 10.645 0 0 0-10.581 0l-224 128a10.665 10.665 0 0 0-5.376 9.259v234.667c0 3.819 2.048 7.36 5.376 9.259l224 128c1.643.939 3.456 1.408 5.291 1.408s3.648-.469 5.291-1.408l224-128a10.665 10.665 0 0 0 5.376-9.259V138.667a10.668 10.668 0 0 0-5.377-9.259z" fill="url(&quot;#SvgjsLinearGradient1060&quot;)"></path><defs><linearGradient id="SvgjsLinearGradient1060"><stop stop-color="#059669" offset="0"></stop><stop stop-color="#059669" offset="1"></stop></linearGradient></defs></svg>
        <div class="absolute max-w-[60%] left-[19%] md:left-[13%] md:max-w-[75%] z-20 top-0 text-center text-white max-h-[300px] pt-3 md:!pt-12 overflow-hidden">     
            <h1 class="text-2xl mt-16 md:text-xl font-semibold text-emerald-400 dark:text-white md:my-2">
                The <span class="text-emerald-200"> Feature</span> of #1
            </h1>
            <p class="w-full md:text-sm text-md my-3 md:mt-6 line-clamp-4 md:line-clamp-none">
                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 class="relative w-full mt-6 md:!mt-0 md:!w-auto md:-ml-[48px]">
        <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 rotate-90 mx-auto w-4/5 md:w-[300px] md:h-[300px]" id="Layer_1" viewBox="0 0 512 512" ><path d="m485.291 129.408-224-128a10.645 10.645 0 0 0-10.581 0l-224 128a10.665 10.665 0 0 0-5.376 9.259v234.667c0 3.819 2.048 7.36 5.376 9.259l224 128c1.643.939 3.456 1.408 5.291 1.408s3.648-.469 5.291-1.408l224-128a10.665 10.665 0 0 0 5.376-9.259V138.667a10.668 10.668 0 0 0-5.377-9.259z" fill="url(&quot;#SvgjsLinearGradient1060&quot;)"></path><defs><linearGradient id="SvgjsLinearGradient1060"><stop stop-color="#059669" offset="0"></stop><stop stop-color="#059669" offset="1"></stop></linearGradient></defs></svg>
        <div class="absolute max-w-[60%] left-[19%] md:left-[13%] md:max-w-[75%] z-20 top-0 text-center text-white max-h-[300px] pt-3 md:!pt-12 overflow-hidden">     
            <h1 class="text-2xl mt-16 md:text-xl font-semibold text-emerald-400 dark:text-white md:my-2">
                The <span class="text-emerald-200"> Feature</span> of #1
            </h1>
            <p class="w-full md:text-sm text-md my-3 md:mt-6 line-clamp-4 md:line-clamp-none">
                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 class="relative w-full mt-6 md:w-auto md:-ml-[302px] md:mt-[283px]">
        <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 rotate-90 mx-auto w-4/5 md:w-[300px] md:h-[300px]" id="Layer_1" viewBox="0 0 512 512"><path d="m485.291 129.408-224-128a10.645 10.645 0 0 0-10.581 0l-224 128a10.665 10.665 0 0 0-5.376 9.259v234.667c0 3.819 2.048 7.36 5.376 9.259l224 128c1.643.939 3.456 1.408 5.291 1.408s3.648-.469 5.291-1.408l224-128a10.665 10.665 0 0 0 5.376-9.259V138.667a10.668 10.668 0 0 0-5.377-9.259z" fill="url(&quot;#SvgjsLinearGradient1060&quot;)"></path><defs><linearGradient id="SvgjsLinearGradient1060"><stop stop-color="#059669" offset="0"></stop><stop stop-color="#059669" offset="1"></stop></linearGradient></defs></svg>
        <div class="absolute max-w-[60%] left-[19%] md:left-[13%] md:max-w-[75%] z-20 top-0 text-center text-white max-h-[300px] pt-3 md:!pt-12 overflow-hidden">     
            <h1 class="text-2xl mt-16 md:text-xl font-semibold text-emerald-400 dark:text-white md:my-2">
                The <span class="text-emerald-200"> Feature</span> of #1
            </h1>
            <p class="w-full md:text-sm text-md my-3 md:mt-6 line-clamp-4 md:line-clamp-none">
                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 class="relative w-full mt-6 md:w-auto md:mt-[141px] md:-ml-[68px]">
        <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 rotate-90 mx-auto w-4/5 md:w-[300px] md:h-[300px]" id="Layer_1" viewBox="0 0 512 512"><path d="m485.291 129.408-224-128a10.645 10.645 0 0 0-10.581 0l-224 128a10.665 10.665 0 0 0-5.376 9.259v234.667c0 3.819 2.048 7.36 5.376 9.259l224 128c1.643.939 3.456 1.408 5.291 1.408s3.648-.469 5.291-1.408l224-128a10.665 10.665 0 0 0 5.376-9.259V138.667a10.668 10.668 0 0 0-5.377-9.259z" fill="url(&quot;#SvgjsLinearGradient1060&quot;)"></path><defs><linearGradient id="SvgjsLinearGradient1060"><stop stop-color="#059669" offset="0"></stop><stop stop-color="#059669" offset="1"></stop></linearGradient></defs></svg>
        <div class="absolute max-w-[60%] left-[19%] md:left-[13%] md:max-w-[75%] z-20 top-0 text-center text-white max-h-[300px] pt-3 md:!pt-12 overflow-hidden">     
            <h1 class="text-2xl mt-16 md:text-xl font-semibold text-emerald-400 dark:text-white md:my-2">
                The <span class="text-emerald-200"> Feature</span> of #1
            </h1>
            <p class="w-full md:text-sm text-md my-3 md:mt-6 line-clamp-4 md:line-clamp-none">
                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 class="relative w-full mr-auto mt-6 md:!mt-0 md:w-auto md:-ml-[68px]">
        <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 rotate-90 mx-auto w-4/5 md:w-[300px] md:h-[300px]" id="Layer_1" viewBox="0 0 512 512"><path d="m485.291 129.408-224-128a10.645 10.645 0 0 0-10.581 0l-224 128a10.665 10.665 0 0 0-5.376 9.259v234.667c0 3.819 2.048 7.36 5.376 9.259l224 128c1.643.939 3.456 1.408 5.291 1.408s3.648-.469 5.291-1.408l224-128a10.665 10.665 0 0 0 5.376-9.259V138.667a10.668 10.668 0 0 0-5.377-9.259z" fill="url(&quot;#SvgjsLinearGradient1060&quot;)"></path><defs><linearGradient id="SvgjsLinearGradient1060"><stop stop-color="#059669" offset="0"></stop><stop stop-color="#059669" offset="1"></stop></linearGradient></defs></svg>
        <div class="absolute max-w-[60%] left-[19%] md:left-[13%] md:max-w-[75%] z-20 top-0 text-center text-white max-h-[300px] pt-3 md:!pt-12 overflow-hidden">     
            <h1 class="text-2xl mt-16 md:text-xl font-semibold text-emerald-400 dark:text-white md:my-2">
                The <span class="text-emerald-200"> Feature</span> of #1
            </h1>
            <p class="w-full md:text-sm text-md my-3 md:mt-6 line-clamp-4 md:line-clamp-none">
                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>

Related Examples

Features list template

Author:
Lukas Müller

2 years ago

11k
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
Feature Showcase
Showcase Features of your product

Author:
Prashant

3 years ago

11.1k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

2 months ago

179
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.4k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

16.5k
Features grid example
Tailwind clean and responsive features section with the heading

Author:
Alok

2 years ago

13.7k
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

1 year ago

7.1k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

4.8k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

51.2k
Hotel rooms
A simple room overview

Author:
Matti

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components