Home
ABDO-SY
Feature Showcase + Cards

Feature Showcase + Cards

Responsive section with cards aligned using grid layout.

This tailwind example is contributed by ABDO-SY, on 19-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Card Hero Grid

Author ABDO-SY

Fork Fullscreen

<section class="bg-[#262626] ">
  <div><svg viewBox="0 0 1925 375" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.0021713 0L0.000976562 375.003L1925 0H0.0021713Z"
        fill="#F9B800"></path>
    </svg></div>
  <main
    class="flex md:flex-row justify-center flex-col gap-[100px] md:gap-[40px] lg:gap-[100px] mx-auto w-full max-w-[1440px] min-w-[280px]  py-8 px-4 lg:px-8">
    <div class="max-w-[550px] mt-16">
      <p class="text-xl text-[#F9B800]">Quisque porttitor vitae vel amet neque scelerisque mattis. Consectetur nibh
        velit magna consectetur leo.</p>
      <h2 class="text-[30px] leading-[48px] md:text-[50px] md:leading-[68px] mt-5 mb-16 text-white">Cursus Integer
        Conseq Aliquam Tristique.</h2>
      <button class="w-full flex items-center justify-between outline-gray-600 max-w-[350px] text-xl  font-bold sm:text-lg  rounded-[38px] bg-[#fff] text-[##262626] py-4 px-6 sm:px-9"><span>Get Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#262626" height="20px" width="20px" version="1.1" viewBox="0 0 330 330" xml:space="preserve"><path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255  s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0  c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path></svg></button>
    </div>
    <div
      class="flex md:mt-[-70px] items-center flex-col md:grid md:grid-cols-[220px_220px] lg:grid-cols-[250px_250px] grid-rows-8 gap-[60px] md:gap-[30px] lg:gap-[45px]">
      <div
        class="col-start-1 col-end-2 row-start-1 row-end-4   bg-[#ffffff]  rounded-[40px] w-[250px] md:w-[220px] lg:w-[250px]   p-8 md:p-4 lg:p-8">
        <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24" fill="none">
          <path
            d="M9.99998 9.75C9.58576 9.75 9.24998 9.41421 9.24998 9C9.24998 8.58579 9.58576 8.25 9.99998 8.25H14C14.3033 8.25 14.5768 8.43273 14.6929 8.71299C14.809 8.99324 14.7448 9.31583 14.5303 9.53033L11.8106 12.25H14C14.4142 12.25 14.75 12.5858 14.75 13C14.75 13.4142 14.4142 13.75 14 13.75H9.99998C9.69663 13.75 9.42315 13.5673 9.30707 13.287C9.19098 13.0068 9.25515 12.6842 9.46965 12.4697L12.1893 9.75H9.99998Z"
            fill="#1C274C" />
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M4.25004 9C4.25004 4.71979 7.71983 1.25 12 1.25C16.2802 1.25 19.75 4.71979 19.75 9V9.7041C19.75 10.401 19.9563 11.0824 20.3429 11.6622L21.4915 13.3851C22.8246 15.3848 21.8069 18.1028 19.4883 18.7351C18.7327 18.9412 17.9706 19.1155 17.2042 19.2581L17.2023 19.2632C16.4333 21.3151 14.378 22.75 12 22.75C9.62198 22.75 7.56667 21.3151 6.79768 19.2632L6.79578 19.2581C6.02937 19.1155 5.26738 18.9412 4.51177 18.7351C2.19318 18.1028 1.17547 15.3848 2.50856 13.3851L3.65717 11.6622C4.04375 11.0824 4.25004 10.401 4.25004 9.7041V9ZM8.62349 19.5369C9.33444 20.5585 10.571 21.25 12 21.25C13.4289 21.25 14.6655 20.5585 15.3764 19.537C13.1335 19.805 10.8664 19.8049 8.62349 19.5369ZM12 2.75C8.54826 2.75 5.75004 5.54822 5.75004 9V9.7041C5.75004 10.6972 5.45609 11.668 4.90524 12.4943L3.75664 14.2172C2.99147 15.3649 3.57561 16.925 4.90644 17.288C9.5507 18.5546 14.4494 18.5546 19.0936 17.288C20.4245 16.925 21.0086 15.3649 20.2434 14.2172L19.0948 12.4943C18.544 11.668 18.25 10.6972 18.25 9.7041V9C18.25 5.54822 15.4518 2.75 12 2.75Z"
            fill="#1C274C" />
        </svg>
        <div>
          <span class="text-[72px] text-black leading-[93px]  font-bold">1<span class="text-[#F9B800]">.</span></span>
          <p>
            <span class="text-2xl font-bold">Phasellus Vitae</span><br><span class="text-xl font-semibold ">Quisque</span><br><span class="text-lg font-extralight">Porttitor vitae vel amet</span>
          </p>
        </div>
      </div>
      <div
        class="col-start-2 col-end-3 row-start-2 row-end-5   bg-[#F9B800]  rounded-[40px] w-[250px] md:w-[220px] lg:w-[250px]   p-8 md:p-4 lg:p-8">
        <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M3 1.25C3.41421 1.25 3.75 1.58579 3.75 2V22C3.75 22.4142 3.41421 22.75 3 22.75C2.58579 22.75 2.25 22.4142 2.25 22V2C2.25 1.58579 2.58579 1.25 3 1.25ZM9.46777 4.25H18.5322C18.972 4.24998 19.3514 4.24997 19.6626 4.27818C19.9918 4.30802 20.3178 4.37407 20.625 4.55144C20.967 4.74892 21.2511 5.03296 21.4486 5.375C21.6259 5.68221 21.692 6.00817 21.7218 6.33735C21.75 6.64864 21.75 7.02797 21.75 7.46775V7.53225C21.75 7.97203 21.75 8.35136 21.7218 8.66265C21.692 8.99183 21.6259 9.31779 21.4486 9.625C21.2511 9.96704 20.967 10.2511 20.625 10.4486C20.3178 10.6259 19.9918 10.692 19.6626 10.7218C19.3514 10.75 18.972 10.75 18.5322 10.75H9.46779C9.028 10.75 8.64865 10.75 8.33735 10.7218C8.00817 10.692 7.68221 10.6259 7.375 10.4486C7.03296 10.2511 6.74892 9.96704 6.55144 9.625C6.37407 9.31779 6.30802 8.99183 6.27818 8.66265C6.24997 8.35136 6.24998 7.97201 6.25 7.53223V7.46777C6.24998 7.02799 6.24997 6.64864 6.27818 6.33735C6.30802 6.00817 6.37407 5.68221 6.55144 5.375C6.74892 5.03296 7.03296 4.74892 7.375 4.55144C7.68221 4.37407 8.00817 4.30802 8.33735 4.27818C8.64864 4.24997 9.02799 4.24998 9.46777 4.25ZM8.47274 5.77206C8.2476 5.79246 8.16586 5.82689 8.125 5.85048C8.01099 5.91631 7.91631 6.01099 7.85048 6.125C7.82689 6.16586 7.79246 6.2476 7.77206 6.47275C7.75072 6.7082 7.75 7.01889 7.75 7.5C7.75 7.98111 7.75072 8.2918 7.77206 8.52725C7.79246 8.7524 7.82689 8.83414 7.85048 8.875C7.91631 8.98901 8.01099 9.08369 8.125 9.14952C8.16586 9.17311 8.2476 9.20754 8.47274 9.22794C8.7082 9.24928 9.01889 9.25 9.5 9.25H18.5C18.9811 9.25 19.2918 9.24928 19.5273 9.22794C19.7524 9.20754 19.8341 9.17311 19.875 9.14952C19.989 9.08369 20.0837 8.98901 20.1495 8.875C20.1731 8.83414 20.2075 8.7524 20.2279 8.52725C20.2493 8.2918 20.25 7.98111 20.25 7.5C20.25 7.01889 20.2493 6.7082 20.2279 6.47275C20.2075 6.2476 20.1731 6.16586 20.1495 6.125C20.0837 6.01099 19.989 5.91631 19.875 5.85048C19.8341 5.82689 19.7524 5.79246 19.5273 5.77206C19.2918 5.75072 18.9811 5.75 18.5 5.75H9.5C9.01889 5.75 8.7082 5.75072 8.47274 5.77206ZM9.46779 13.25H15.5322C15.972 13.25 16.3514 13.25 16.6627 13.2782C16.9918 13.308 17.3178 13.3741 17.625 13.5514C17.967 13.7489 18.2511 14.033 18.4486 14.375C18.6259 14.6822 18.692 15.0082 18.7218 15.3373C18.75 15.6486 18.75 16.028 18.75 16.4678V16.5322C18.75 16.972 18.75 17.3514 18.7218 17.6627C18.692 17.9918 18.6259 18.3178 18.4486 18.625C18.2511 18.967 17.967 19.2511 17.625 19.4486C17.3178 19.6259 16.9918 19.692 16.6627 19.7218C16.3514 19.75 15.972 19.75 15.5322 19.75H9.46775C9.02797 19.75 8.64864 19.75 8.33735 19.7218C8.00817 19.692 7.68221 19.6259 7.375 19.4486C7.03296 19.2511 6.74892 18.967 6.55144 18.625C6.37407 18.3178 6.30802 17.9918 6.27818 17.6627C6.24997 17.3514 6.24998 16.972 6.25 16.5322V16.4678C6.24998 16.028 6.24997 15.6486 6.27818 15.3373C6.30802 15.0082 6.37407 14.6822 6.55144 14.375C6.74892 14.033 7.03296 13.7489 7.375 13.5514C7.68221 13.3741 8.00817 13.308 8.33735 13.2782C8.64865 13.25 9.028 13.25 9.46779 13.25ZM8.47275 14.7721C8.2476 14.7925 8.16586 14.8269 8.125 14.8505C8.01099 14.9163 7.91631 15.011 7.85048 15.125C7.82689 15.1659 7.79246 15.2476 7.77206 15.4727C7.75072 15.7082 7.75 16.0189 7.75 16.5C7.75 16.9811 7.75072 17.2918 7.77206 17.5273C7.79246 17.7524 7.82689 17.8341 7.85048 17.875C7.91631 17.989 8.01099 18.0837 8.125 18.1495C8.16586 18.1731 8.2476 18.2075 8.47274 18.2279C8.7082 18.2493 9.01889 18.25 9.5 18.25H15.5C15.9811 18.25 16.2918 18.2493 16.5273 18.2279C16.7524 18.2075 16.8341 18.1731 16.875 18.1495C16.989 18.0837 17.0837 17.989 17.1495 17.875C17.1731 17.8341 17.2075 17.7524 17.2279 17.5273C17.2493 17.2918 17.25 16.9811 17.25 16.5C17.25 16.0189 17.2493 15.7082 17.2279 15.4727C17.2075 15.2476 17.1731 15.1659 17.1495 15.125C17.0837 15.011 16.989 14.9163 16.875 14.8505C16.8341 14.8269 16.7524 14.7925 16.5273 14.7721C16.2918 14.7507 15.9811 14.75 15.5 14.75H9.5C9.01889 14.75 8.7082 14.7507 8.47275 14.7721Z"
            fill="#1C274C" />
        </svg>
        <div><span class="text-[72px] text-black leading-[93px]  font-bold">2<span class="text-[#fff]">.</span></span>
          <p>
            <span class="text-2xl font-bold">Phasellus Vitae</span><br><span class="text-xl font-semibold ">Quisque</span><br><span class="text-lg font-extralight">Porttitor vitae vel amet</span>
          </p>
        </div>
      </div>
      <div
        class="col-start-1 col-end-2 row-start-4 row-end-7   bg-[#F9B800]  rounded-[40px] w-[250px] md:w-[220px] lg:w-[250px]   p-8 md:p-4 lg:p-8">
        <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M11.9426 1.25H12.0574C14.3658 1.24999 16.1748 1.24998 17.5863 1.43975C19.031 1.63399 20.1711 2.03933 21.0659 2.93414C21.9607 3.82895 22.366 4.96897 22.5603 6.41371C22.75 7.82519 22.75 9.63423 22.75 11.9426V12H22.7391C22.75 12.5789 22.75 13.2299 22.75 13.9664V14.0336C22.75 15.4053 22.75 16.4807 22.6794 17.3451C22.6075 18.2252 22.4586 18.9523 22.1233 19.6104C21.572 20.6924 20.6924 21.572 19.6104 22.1233C18.9523 22.4586 18.2252 22.6075 17.3451 22.6794C16.4807 22.75 15.4053 22.75 14.0336 22.75H9.96642C8.59471 22.75 7.51928 22.75 6.65494 22.6794C5.7748 22.6075 5.04769 22.4586 4.38955 22.1233C3.30762 21.572 2.42798 20.6924 1.87671 19.6104C1.54138 18.9523 1.39252 18.2252 1.32061 17.3451C1.24999 16.4807 1.25 15.4053 1.25 14.0336V13.9664C1.25 13.2299 1.25 12.5789 1.26092 12H1.25L1.25 11.9426C1.24999 9.63423 1.24998 7.82519 1.43975 6.41371C1.63399 4.96897 2.03933 3.82895 2.93414 2.93414C3.82895 2.03933 4.96897 1.63399 6.41371 1.43975C7.82519 1.24998 9.63423 1.24999 11.9426 1.25ZM2.88197 6.98698C3.31781 6.53974 3.82626 6.16372 4.38955 5.87671C5.04769 5.54138 5.7748 5.39252 6.65494 5.32061C7.51929 5.24999 8.59472 5.25 9.96645 5.25H14.0336C15.4053 5.25 16.4807 5.24999 17.3451 5.32061C18.2252 5.39252 18.9523 5.54138 19.6104 5.87671C20.1737 6.16372 20.6822 6.53975 21.118 6.98698C21.1046 6.85884 21.0899 6.73445 21.0736 6.61358C20.9018 5.33517 20.5749 4.56445 20.0052 3.9948C19.4355 3.42514 18.6648 3.09825 17.3864 2.92637C16.0864 2.75159 14.3782 2.75 12 2.75C9.62177 2.75 7.91356 2.75159 6.61358 2.92637C5.33517 3.09825 4.56445 3.42514 3.9948 3.9948C3.42514 4.56445 3.09825 5.33517 2.92637 6.61358C2.91012 6.73444 2.89537 6.85884 2.88197 6.98698ZM6.77708 6.81563C5.9897 6.87996 5.48197 7.00359 5.07054 7.21322C4.27085 7.62069 3.62068 8.27085 3.21322 9.07054C3.00359 9.48197 2.87996 9.9897 2.81563 10.7771C2.75058 11.5732 2.75 12.5875 2.75 14C2.75 15.4125 2.75058 16.4268 2.81563 17.2229C2.87996 18.0103 3.00359 18.518 3.21322 18.9295C3.62068 19.7291 4.27085 20.3793 5.07054 20.7868C5.48197 20.9964 5.9897 21.12 6.77708 21.1844C7.57322 21.2494 8.58749 21.25 10 21.25H14C15.4125 21.25 16.4268 21.2494 17.2229 21.1844C18.0103 21.12 18.518 20.9964 18.9295 20.7868C19.7291 20.3793 20.3793 19.7291 20.7868 18.9295C20.9964 18.518 21.12 18.0103 21.1844 17.2229C21.2494 16.4268 21.25 15.4125 21.25 14C21.25 12.5875 21.2494 11.5732 21.1844 10.7771C21.12 9.9897 20.9964 9.48197 20.7868 9.07054C20.3793 8.27085 19.7291 7.62068 18.9295 7.21322C18.518 7.00359 18.0103 6.87996 17.2229 6.81563C16.4268 6.75058 15.4125 6.75 14 6.75H10C8.58749 6.75 7.57322 6.75058 6.77708 6.81563ZM14.9995 11.4405C15.3085 11.7164 15.3353 12.1905 15.0595 12.4995L11.488 16.4995C11.3457 16.6589 11.1422 16.75 10.9286 16.75C10.7149 16.75 10.5114 16.6589 10.3691 16.4995L8.94055 14.8995C8.66467 14.5905 8.69151 14.1164 9.00049 13.8405C9.30947 13.5647 9.78358 13.5915 10.0595 13.9005L10.9286 14.8739L13.9405 11.5005C14.2164 11.1915 14.6905 11.1647 14.9995 11.4405Z"
            fill="#1C274C" />
        </svg>
        <div><span class="text-[72px] text-black leading-[93px]  font-bold">3<span class="text-[#fff]">.</span></span>
          <p>
            <span class="text-2xl font-bold">Phasellus Vitae</span><br><span class="text-xl font-semibold ">Quisque</span><br><span class="text-lg font-extralight">Porttitor vitae vel amet</span>
          </p>
        </div>
      </div>
      <div
        class="col-start-2 col-end-3 row-start-5 row-end-8   bg-[#fff]  rounded-[40px] w-[250px] md:w-[220px] lg:w-[250px]   p-8 md:p-4 lg:p-8">
        <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 24 24" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M1.25 3C1.25 2.58579 1.58579 2.25 2 2.25L22 2.25C22.4142 2.25 22.75 2.58579 22.75 3C22.75 3.41422 22.4142 3.75 22 3.75L2 3.75C1.58579 3.75 1.25 3.41421 1.25 3ZM7.94801 7.25H16.052C16.9505 7.24997 17.6997 7.24995 18.2945 7.32991C18.9223 7.41432 19.4891 7.59999 19.9445 8.05546C20.4 8.51093 20.5857 9.07773 20.6701 9.70552C20.7501 10.3003 20.75 11.0495 20.75 11.948V12.052C20.75 12.9505 20.7501 13.6997 20.6701 14.2945C20.5857 14.9223 20.4 15.4891 19.9445 15.9445C19.4891 16.4 18.9223 16.5857 18.2945 16.6701C17.6997 16.7501 16.9505 16.75 16.052 16.75H7.94801C7.04952 16.75 6.3003 16.7501 5.70552 16.6701C5.07773 16.5857 4.51093 16.4 4.05546 15.9445C3.59999 15.4891 3.41432 14.9223 3.32991 14.2945C3.24995 13.6997 3.24997 12.9505 3.25 12.052V11.948C3.24997 11.0495 3.24995 10.3003 3.32991 9.70552C3.41432 9.07773 3.59999 8.51093 4.05546 8.05546C4.51093 7.59999 5.07773 7.41432 5.70552 7.32991C6.3003 7.24995 7.04952 7.24997 7.94801 7.25ZM5.90539 8.81654C5.44393 8.87858 5.24643 8.9858 5.11612 9.11612C4.9858 9.24644 4.87858 9.44393 4.81654 9.90539C4.75159 10.3884 4.75 11.036 4.75 12C4.75 12.964 4.75159 13.6116 4.81654 14.0946C4.87858 14.5561 4.9858 14.7536 5.11612 14.8839C5.24643 15.0142 5.44393 15.1214 5.90539 15.1835C6.38843 15.2484 7.03599 15.25 8 15.25H16C16.964 15.25 17.6116 15.2484 18.0946 15.1835C18.5561 15.1214 18.7536 15.0142 18.8839 14.8839C19.0142 14.7536 19.1214 14.5561 19.1835 14.0946C19.2484 13.6116 19.25 12.964 19.25 12C19.25 11.036 19.2484 10.3884 19.1835 9.90539C19.1214 9.44393 19.0142 9.24644 18.8839 9.11612C18.7536 8.9858 18.5561 8.87858 18.0946 8.81654C17.6116 8.7516 16.964 8.75 16 8.75H8C7.03599 8.75 6.38843 8.7516 5.90539 8.81654ZM1.25 21C1.25 20.5858 1.58579 20.25 2 20.25L22 20.25C22.4142 20.25 22.75 20.5858 22.75 21C22.75 21.4142 22.4142 21.75 22 21.75L2 21.75C1.58579 21.75 1.25 21.4142 1.25 21Z"
            fill="#1C274C" />
        </svg>
        <div>
          <span class="text-[72px] text-black leading-[93px]  font-bold">4<span class="text-[#F9B800]">.</span></span>
          <p>
            <span class="text-2xl font-bold">Phasellus Vitae</span><br><span class="text-xl font-semibold ">Quisque</span><br><span class="text-lg font-extralight">Porttitor vitae vel amet</span>
          </p>
        </div>
      </div>
    </div>
  </main>
  <div class="rotate-180"><svg viewBox="0 0 1925 375" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.0021713 0L0.000976562 375.003L1925 0H0.0021713Z"
        fill="#F9B800"></path>
    </svg></div>
</section>

Related Examples