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

1.3k

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