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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Matti

Tailwind v3.4 3k 4

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

Feature cards
Feature showcase

Steven Kuhn

4 years ago

10.7k
countdown with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.9k
Features list with icons on top

Lina Lindström

3 years ago

10.3k
Feature cards with icons on top

Manon Daniel

3 years ago

18.3k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

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

Amit Pachange

4 years ago

53.8k
Our Vision block

L.J. Weber

3 years ago

12.7k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

945
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Abdul Baset Bappy

1 year ago

2.6k
Simple Features section

Odessa Young

3 years ago

17.8k
Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Matti

1 year ago

2.2k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k