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

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

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

52.3k
Feature Cards
w/ large icons

Author:
Mr Robot

3 years ago

10k
Feature cards

Author:
Fagundo67

3 years ago

11.2k
Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

1 year ago

2.5k
Feature Card
Elevated card

Author:
Prajwal Hallale

3 years ago

10.6k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

1 year ago

1.5k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

28.7k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

7 months ago

554
Tailwind css feature cards

Author:
Kofi Osei

3 years ago

11.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

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

Author:
Ayyamperumal S

2 months ago

384
Product feature section
Showcase product features with an image

Author:
Anonymous

2 years ago

14.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components