Home
Matti
Feature card

Feature card

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

Card Feature showcase

Author Matti

Fork Fullscreen

<div class="w-full py-24 dark:bg-gray-800">
  <div class="flex flex-col w-[90%] lg:w-4/5 2xl:w-3/5 mx-auto">
    <div class="w-full md:w-4/5 md:mx-auto text-center pt-3 px-4 md:!px-0 text-center">
        <h1 class="text-3xl mt-2 md:text-4xl font-semibold text-gray-800 dark:text-gray-200">
        The <span class="text-emerald-600"> Feature</span> component
        </h1>
        <p class="text-xl font-thin mb-4 line-clamp-4 mt-4 md:line-clamp-none text-gray-500">
            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. Optional you can you can contact the author and say thanks by send a message.
        </p>
    </div>
    <div class="w-full flex flex-col md:flex-row py-6 gap-8">
      <div class="w-full md:w-1/4 flex flex-col justify-items-center shadow-md dark:shadow-lg border-b-4 border-emerald-600 dark:border-y group hover:bg-emerald-600 py-12 px-6 rounded-md transition-all duration-500">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="56" height="56" class="text-emerald-600 group-hover:text-white"><defs><style>.cls-637a534e15c575900940070d-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><circle class="cls-637a534e15c575900940070d-1" cx="2.45" cy="21.52" r="0.95"></circle><circle class="cls-637a534e15c575900940070d-1" cx="21.55" cy="21.52" r="0.95"></circle><line class="cls-637a534e15c575900940070d-1" x1="2.45" y1="20.57" x2="21.55" y2="20.57"></line><path class="cls-637a534e15c575900940070d-1" d="M16.38,20.57H7.7a3.35,3.35,0,0,1-3.34-3.34h0A3.34,3.34,0,0,1,7.7,13.89h.37a19.88,19.88,0,0,1,9.22,2.26h0a2.31,2.31,0,0,1,1.39,2.12h0A2.3,2.3,0,0,1,16.38,20.57Z"></path><line class="cls-637a534e15c575900940070d-1" x1="4.36" y1="6.25" x2="6.27" y2="13.89"></line><path class="cls-637a534e15c575900940070d-1" d="M1.5,5.3h0a3.25,3.25,0,0,0,2.3,1H8.18"></path><line class="cls-637a534e15c575900940070d-1" x1="18.68" y1="3.39" x2="18.68" y2="18.66"></line><path class="cls-637a534e15c575900940070d-1" d="M22.5.52h0a8.27,8.27,0,0,1-5.36,7.74l-2.28.85"></path><line class="cls-637a534e15c575900940070d-1" x1="20.59" y1="1.48" x2="15.82" y2="5.3"></line></svg>
        <h1 class="text-2xl mt-2 md:text-3xl mt-4 font-semibold text-gray-800 dark:text-gray-400 group-hover:text-emerald-900 group-hover:text-emerald-900">
        Stamina
        </h1>
        <p class="font-light md:font-thin mb-4 line-clamp-4 mt-4 md:line-clamp-none text-gray-500 group-hover:text-white dark:group-hover:text-gray-200">
            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. Optional you can you can contact the author and say thanks by send a message.
        </p>
        <h4 class="mt-2 font-semibold text-gray-800 dark:text-gray-400 group-hover:text-emerald-900 cursor-pointer">
          Read more
        </h4>
      </div>
      <div class="w-full md:w-1/4 flex flex-col justify-items-center bg-emerald-600 shadow-md dark:shadow-lg border-b-4 border-emerald-600 dark:border-y py-12 px-6 rounded-md transition-all duration-500">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="56" height="56" class="text-white"><defs><style>.cls-637b7f18f95e86b59c579fe1-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><polyline class="cls-637b7f18f95e86b59c579fe1-1" points="15.82 14.86 8.18 14.86 1.5 14.86 1.5 1.5 22.5 1.5 22.5 14.86 19.64 14.86"></polyline><path class="cls-637b7f18f95e86b59c579fe1-1" d="M9.14,11.05h3.34a1.44,1.44,0,0,0,1.43-1.44h0a1.43,1.43,0,0,0-1.43-1.43h-1a1.43,1.43,0,0,1-1.43-1.43h0a1.43,1.43,0,0,1,1.43-1.43h3.34"></path><line class="cls-637b7f18f95e86b59c579fe1-1" x1="12" y1="3.41" x2="12" y2="5.32"></line><line class="cls-637b7f18f95e86b59c579fe1-1" x1="12" y1="11.05" x2="12" y2="12.95"></line><path class="cls-637b7f18f95e86b59c579fe1-1" d="M17.73,22.5h0a6.52,6.52,0,0,0,1.91-4.61v-4A1.91,1.91,0,0,0,17.73,12h0a1.9,1.9,0,0,0-1.91,1.91v2.86l-.2.1a3.1,3.1,0,0,0-1.71,2.77h0"></path><path class="cls-637b7f18f95e86b59c579fe1-1" d="M8.18,14.86v3a6.52,6.52,0,0,0,1.91,4.61"></path></svg>
        <h1 class="text-2xl mt-2 md:text-3xl mt-4 font-semibold text-emerald-900 dark:text-emerald-900">
        Cashback
        </h1>
        <p class="font-light md:font-thin mb-4 line-clamp-4 mt-4 md:line-clamp-none text-white">
            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. Optional you can you can contact the author and say thanks by send a message.
        </p>
        <h4 class="mt-2 font-semibold text-emerald-900 dark:text-emerald-900 cursor-pointer">
          Read more
        </h4>
      </div>
      <div class="w-full md:w-1/4 flex flex-col justify-items-center shadow-md dark:shadow-lg border-b-4 border-emerald-600 dark:border-y group hover:bg-emerald-600 group-hover:text-white py-12 px-6 rounded-md transition-all duration-500">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="56" height="56" class="text-emerald-600 group-hover:text-white"><defs><style>.cls-637a534e15c575900940071c-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><path class="cls-637a534e15c575900940071c-1" d="M20.48,11.05h0a2,2,0,0,0,2-2h0a2,2,0,0,0-.59-1.43l-5.5-5.5A2,2,0,0,0,15,1.5h0a2,2,0,0,0-2,2h0A2,2,0,0,0,13.55,5L19,10.45A2,2,0,0,0,20.48,11.05Z"></path><path class="cls-637a534e15c575900940071c-1" d="M9,22.5H9a2,2,0,0,0,2-2h0a2,2,0,0,0-.6-1.44L5,13.55A2,2,0,0,0,3.52,13h0a2,2,0,0,0-2,2h0a2,2,0,0,0,.59,1.43l5.5,5.5A2,2,0,0,0,9,22.5Z"></path><rect class="cls-637a534e15c575900940071c-1" x="10.09" y="5.93" width="3.82" height="12.15" transform="translate(12 -4.97) rotate(45)"></rect></svg>
        <h1 class="text-2xl mt-2 md:text-3xl mt-4 font-semibold text-gray-800 dark:text-gray-400 group-hover:text-emerald-900 group-hover:text-emerald-900">
        Strength
        </h1>
        <p class="font-light md:font-thin mb-4 line-clamp-4 mt-4 md:line-clamp-none text-gray-500 group-hover:text-white dark:group-hover:text-gray-200">
            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. Optional you can you can contact the author and say thanks by send a message.
        </p>
        <h4 class="mt-2 font-semibold text-gray-800 dark:text-gray-400 group-hover:text-emerald-900 cursor-pointer">
          Read more
        </h4>
      </div>
      <div class="w-full md:w-1/4 flex flex-col justify-items-center shadow-md dark:shadow-lg border-b-4 border-emerald-600 dark:border-y group hover:bg-emerald-600 group-hover:text-white py-12 px-6 rounded-md transition-all duration-500">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="56" height="56" class="text-emerald-600 group-hover:text-white"><defs><style>.cls-637a534e15c575900940073c-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><path class="cls-637a534e15c575900940073c-1" d="M2.44,23.48A14.69,14.69,0,0,1,4,16.9c.34-.74.71-1.43,1-2.12a10.16,10.16,0,0,0,1.27-4.69A29.68,29.68,0,0,0,4.35.52"></path><path class="cls-637a534e15c575900940073c-1" d="M21.57,23.48A14.62,14.62,0,0,0,20.09,17c-.36-.76-.73-1.47-1.07-2.17a10.16,10.16,0,0,1-1.28-4.69A29.54,29.54,0,0,1,19.66.52"></path><path class="cls-637a534e15c575900940073c-1" d="M20.09,17l-6.38,5a2.75,2.75,0,0,1-1.7.58h0a2.77,2.77,0,0,1-1.72-.6L4,16.9c.34-.74.71-1.43,1-2.12a28.24,28.24,0,0,0,14,0C19.36,15.48,19.73,16.19,20.09,17Z"></path><line class="cls-637a534e15c575900940073c-1" x1="12" y1="8.17" x2="12" y2="10.09"></line><polyline class="cls-637a534e15c575900940073c-1" points="1.09 7.78 3.4 10.09 1.09 12.4"></polyline><polyline class="cls-637a534e15c575900940073c-1" points="23.09 12.4 20.78 10.09 23.09 7.78"></polyline></svg>
        <h1 class="text-2xl mt-2 md:text-3xl mt-4 font-semibold text-gray-800 dark:text-gray-400 group-hover:text-emerald-900 group-hover:text-emerald-900">
        Body Improvement
        </h1>
        <p class="font-light md:font-thin mb-4 line-clamp-4 mt-4 md:line-clamp-none text-gray-500 group-hover:text-white dark:group-hover:text-gray-200">
            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. Optional you can you can contact the author and say thanks by send a message.
        </p>
        <h4 class="mt-2 font-semibold text-gray-800 dark:text-gray-400 group-hover:text-emerald-900 cursor-pointer">
          Read more
        </h4>
      </div>
    </div>
  </div>
</div>

Related Examples