Card

Card Simple

<div class="mx-auto max-w-md rounded-lg bg-white shadow">
  <div class="p-4">
    <h3 class="text-xl font-medium text-gray-900">Migrating to Sailboat UI</h3>
    <p class="mt-1 text-gray-500">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
  </div>
</div>

Raw

                      
<div class="mx-auto max-w-md rounded-lg bg-white shadow">
  <div class="p-4">
    <h3 class="text-xl font-medium text-gray-900">Migrating to Sailboat UI</h3>
    <p class="mt-1 text-gray-500">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
  </div>
</div>
            
          
        

Card With photo

<div class="mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
  <img src="https://images.unsplash.com/photo-1552581234-26160f608093?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" class="aspect-video w-full object-cover" alt="" />
  <div class="p-4">
    <p class="mb-1 text-sm text-primary-500">Andrea Felsted • <time>18 Nov 2022</time></p>
    <h3 class="text-xl font-medium text-gray-900">Migrating to Sailboat UI</h3>
    <p class="mt-1 text-gray-500">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
    <div class="mt-4 flex gap-2">
      <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600"> Design </span>
      <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"> Product </span>
      <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 px-2 py-1 text-xs font-semibold text-orange-600"> Develop </span>
    </div>
  </div>
</div>

Raw

                      
<div class="mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
  <img src="https://images.unsplash.com/photo-1552581234-26160f608093?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" class="aspect-video w-full object-cover" alt="" />
  <div class="p-4">
    <p class="mb-1 text-sm text-primary-500">Andrea Felsted • <time>18 Nov 2022</time></p>
    <h3 class="text-xl font-medium text-gray-900">Migrating to Sailboat UI</h3>
    <p class="mt-1 text-gray-500">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
    <div class="mt-4 flex gap-2">
      <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600"> Design </span>
      <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"> Product </span>
      <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 px-2 py-1 text-xs font-semibold text-orange-600"> Develop </span>
    </div>
  </div>
</div>
            
          
        

Card Background

<div class="relative mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
  <div>
    <img src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" class="w-full object-cover" alt="" />
  </div>
  <div class="absolute inset-0 z-10 bg-gradient-to-t from-black"></div>
  <div class="absolute inset-x-0 bottom-0 z-20 p-4">
    <p class="mb-1 text-sm text-white text-opacity-80">Andrea Felsted • <time>18 Nov 2022</time></p>
    <h3 class="text-xl font-medium text-white">Migrating to Sailboat UI</h3>
    <p class="mt-1 text-white text-opacity-80">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
  </div>
</div>

Raw

                      
<div class="relative mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
  <div>
    <img src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" class="w-full object-cover" alt="" />
  </div>
  <div class="absolute inset-0 z-10 bg-gradient-to-t from-black"></div>
  <div class="absolute inset-x-0 bottom-0 z-20 p-4">
    <p class="mb-1 text-sm text-white text-opacity-80">Andrea Felsted • <time>18 Nov 2022</time></p>
    <h3 class="text-xl font-medium text-white">Migrating to Sailboat UI</h3>
    <p class="mt-1 text-white text-opacity-80">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
  </div>
</div>
            
          
        

Card With List

<div class="mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
  <ul class="divide-y divide-gray-100 py-2 px-4">
    <li class="flex py-4">
      <div class="mr-4 flex-1">
        <h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
        <div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
      </div>
      <div>
        <img src="https://images.unsplash.com/photo-1631016800696-5ea8801b3c2a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
      </div>
    </li>
    <li class="flex py-4">
      <div class="mr-4 flex-1">
        <h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
        <div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
      </div>
      <div>
        <img src="https://images.unsplash.com/photo-1550510537-89d5433de5cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
      </div>
    </li>
    <li class="flex py-4">
      <div class="mr-4 flex-1">
        <h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
        <div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
      </div>
      <div>
        <img src="https://images.unsplash.com/photo-1587614380862-0294308ae58b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
      </div>
    </li>
  </ul>
</div>

Raw

                      
<div class="mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
  <ul class="divide-y divide-gray-100 py-2 px-4">
    <li class="flex py-4">
      <div class="mr-4 flex-1">
        <h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
        <div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
      </div>
      <div>
        <img src="https://images.unsplash.com/photo-1631016800696-5ea8801b3c2a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
      </div>
    </li>
    <li class="flex py-4">
      <div class="mr-4 flex-1">
        <h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
        <div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
      </div>
      <div>
        <img src="https://images.unsplash.com/photo-1550510537-89d5433de5cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
      </div>
    </li>
    <li class="flex py-4">
      <div class="mr-4 flex-1">
        <h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
        <div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
      </div>
      <div>
        <img src="https://images.unsplash.com/photo-1587614380862-0294308ae58b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
      </div>
    </li>
  </ul>
</div>
            
          
        

Card With Icon

<section class="lg:pt-[60px] pt-16 lg:pb-15 pb-9">
  <div class="max-w-[1350px] mx-auto px-[15px]">
    <div style="opacity: 1; transform: none;">
      <div class="flex flex-col items-center"><button
          class="inline-flex items-center gap-2.5 justify-center whitespace-nowrap text-lg font-bold ring-offset-background border-2 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-accent text-primary-foreground rounded-[40px] border-transparent max-h-[43px] px-[33px] py-4">Our
          Services</button>
        <h2
          class="font-extrabold text-muted-foreground group lg:text-5xl sm:text-4.5xl text-3xl lg:leading-[140%] sm:leading-[130%] leading-[120%] max-w-[869px] pt-6 text-center">
          Innovative Digital Marketing with SEO, PPC, and More</h2>
      </div>
    </div>
    <div class="lg:pt-7.5 pt-2">
      <div style="opacity: 1; transform: none;">
        <div
          class="grid xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 gap-x-10   [&amp;>*:nth-child(2)>.icon]:bg-[#32A5521A] [&amp;>*:nth-child(2)>.icon]:text-green    [&amp;>*:nth-child(3)>.icon]:bg-[#A22EFE1A] [&amp;>*:nth-child(3)>.icon]:text-purple   [&amp;>*:nth-child(4)>.icon]:bg-[#5A55791A] [&amp;>*:nth-child(4)>.icon]:text-[#5A5579]   [&amp;>*:nth-child(5)>.icon]:bg-[#FF00001A] [&amp;>*:nth-child(5)>.icon]:text-[#FF0000]   [&amp;>*:nth-child(6)>.icon]:bg-[#00A3FF1A] [&amp;>*:nth-child(6)>.icon]:text-[#00A3FF]   [&amp;>*:nth-child(7)>.icon]:bg-[#FF00991A] [&amp;>*:nth-child(7)>.icon]:text-[#FF0099]   [&amp;>*:nth-child(8)>.icon]:bg-[#009F961A] [&amp;>*:nth-child(8)>.icon]:text-[#009F96]   ">
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="47" height="48" viewBox="0 0 47 48" fill="none" style="width:35px;height:36px">
                  <path d="M11.6028 30.8743L18.4621 21.9593L26.2862 28.1054L32.9987 19.4421" stroke="currentColor"
                    stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <ellipse cx="40.8228" cy="6.62549" rx="4.40503" ry="4.40504" stroke="currentColor" stroke-width="2.5"
                    stroke-linecap="round" stroke-linejoin="round"></ellipse>
                  <path
                    d="M29.2018 4.15039H12.5466C5.64539 4.15039 1.36621 9.03788 1.36621 15.9391V34.4612C1.36621 41.3624 5.56148 46.229 12.5466 46.229H32.2644C39.1656 46.229 43.4448 41.3624 43.4448 34.4612V18.3304"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Search Engine Optimization</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="35" height="35" viewBox="0 0 35 35" fill="none">
                  <path
                    d="M24.0471 10.965L14.2696 20.8469L3.14904 13.8914C1.5557 12.8946 1.88714 10.4744 3.68936 9.94733L30.0925 2.21514C31.7428 1.73145 33.2723 3.27442 32.782 4.93008L24.9707 31.3149C24.4356 33.1196 22.0291 33.4421 21.0417 31.8419L14.2644 20.8487"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Social Media Marketing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="32" height="35" viewBox="0 0 32 35" fill="none">
                  <path d="M21.8483 24.715H9.51416" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path d="M21.8483 17.5632H9.51416" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path d="M14.2211 10.4279H9.51465" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M22.1771 1.69775C22.1771 1.69775 9.06227 1.70459 9.04177 1.70459C4.32677 1.73363 1.40723 4.83596 1.40723 9.56805V25.2779C1.40723 30.0339 4.34898 33.1482 9.10498 33.1482C9.10498 33.1482 22.2181 33.143 22.2404 33.143C26.9554 33.114 29.8766 30.01 29.8766 25.2779V9.56805C29.8766 4.81205 26.9331 1.69775 22.1771 1.69775Z"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Content Writing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="19" height="23" viewBox="0 0 19 23" fill="none" style="width:29px;height:36px">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M9.4836 21.5062C9.4836 21.5062 17.4753 19.0864 17.4753 12.4155C17.4753 5.74367 17.7648 5.22284 17.1242 4.58117C16.4826 3.9395 10.5315 1.8645 9.4836 1.8645C8.43568 1.8645 2.48464 3.9395 1.84401 4.58117C1.20235 5.22284 1.49193 5.74367 1.49193 12.4155C1.49193 19.0864 9.4836 21.5062 9.4836 21.5062Z"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6.77637 11.3693L8.7472 13.3433L12.8076 9.28076" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Affiliate Marketing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="37" height="35" viewBox="0 0 37 35" fill="none">
                  <path
                    d="M28.5835 12.2288L20.9929 18.401C19.5587 19.5388 17.541 19.5388 16.1068 18.401L8.45215 12.2288"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M26.8858 32.983C32.0815 32.9973 35.5832 28.7285 35.5832 23.4819V11.7485C35.5832 6.50186 32.0815 2.23303 26.8858 2.23303H10.1139C4.91822 2.23303 1.4165 6.50186 1.4165 11.7485V23.4819C1.4165 28.7285 4.91822 32.9973 10.1139 32.983H26.8858Z"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Email Marketing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="39" height="33" viewBox="0 0 39 33" fill="none">
                  <path d="M37.4375 17.9843H1.5625" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path d="M34.2429 10.7914V8.20668C34.2429 4.6858 31.3883 1.83118 27.8657 1.83118H25.8071"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.75732 10.7914V8.20668C4.75732 4.6858 7.61195 1.83118 11.1345 1.83118H13.246"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M34.2429 17.9827V24.9424C34.2429 28.465 31.3883 31.3196 27.8657 31.3196H25.8071"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.75732 17.9827V24.9424C4.75732 28.465 7.61195 31.3196 11.1345 31.3196H13.246"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Pay-Per-Click Advertising</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="28" height="28" viewBox="0 0 28 28" fill="none" style="width:35px;height:35px">
                  <path
                    d="M4.3931 7.40802C4.3931 5.74268 5.74243 4.39335 7.40777 4.39202H8.77977C9.57577 4.39202 10.3384 4.07602 10.9038 3.51602L11.8624 2.55602C13.0371 1.37468 14.9464 1.36935 16.1278 2.54402L16.1291 2.54535L16.1411 2.55602L17.1011 3.51602C17.6664 4.07735 18.4291 4.39202 19.2251 4.39202H20.5958C22.2611 4.39202 23.6118 5.74135 23.6118 7.40802V8.77735C23.6118 9.57335 23.9264 10.3373 24.4878 10.9027L25.4478 11.8627C26.6291 13.0373 26.6358 14.9467 25.4611 16.128L25.4598 16.1293L25.4478 16.1414L24.4878 17.1013C23.9264 17.6653 23.6118 18.428 23.6118 19.224V20.596C23.6118 22.2613 22.2624 23.6107 20.5971 23.6107H20.5958H19.2224C18.4264 23.6107 17.6624 23.9267 17.0984 24.488L16.1384 25.4467C14.9651 26.628 13.0571 26.6347 11.8758 25.4627C11.8744 25.4613 11.8731 25.46 11.8718 25.4587L11.8598 25.4467L10.9011 24.488C10.3371 23.9267 9.5731 23.612 8.7771 23.6107H7.40777C5.74243 23.6107 4.3931 22.2613 4.3931 20.596V19.2213C4.3931 18.4253 4.0771 17.6627 3.51577 17.0987L2.5571 16.1387C1.37577 14.9653 1.3691 13.0573 2.54243 11.876C2.54243 11.8747 2.54377 11.8733 2.5451 11.872L2.5571 11.86L3.51577 10.9C4.0771 10.3347 4.3931 9.57202 4.3931 8.77468V7.40802"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M10.5754 17.429L17.4288 10.5757" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17.3272 17.3334H17.3392" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path d="M10.6607 10.6667H10.6727" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Conversion Rate Optimization</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="35" height="34" viewBox="0 0 35 34" fill="none">
                  <path
                    d="M1.69824 1.55176L5.25158 2.16676L6.8967 21.7665C7.02824 23.3672 8.36587 24.5955 9.9717 24.5903H28.6079C30.1403 24.5938 31.4403 23.4663 31.6573 21.9493L33.2785 10.746C33.4596 9.4938 32.59 8.33213 31.3395 8.15105C31.2302 8.13567 5.82216 8.12713 5.82216 8.12713"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M21.1304 14.4411H25.8676" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M9.2223 30.5122C9.73651 30.5122 10.1516 30.929 10.1516 31.4415C10.1516 31.9558 9.73651 32.3726 9.2223 32.3726C8.70809 32.3726 8.29297 31.9558 8.29297 31.4415C8.29297 30.929 8.70809 30.5122 9.2223 30.5122Z"
                    fill="currentColor" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M28.4928 30.5122C29.007 30.5122 29.4239 30.929 29.4239 31.4415C29.4239 31.9558 29.007 32.3726 28.4928 32.3726C27.9786 32.3726 27.5635 31.9558 27.5635 31.4415C27.5635 30.929 27.9786 30.5122 28.4928 30.5122Z"
                    fill="currentColor" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">E-commerce Marketing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Raw

                      
<section class="lg:pt-[60px] pt-16 lg:pb-15 pb-9">
  <div class="max-w-[1350px] mx-auto px-[15px]">
    <div style="opacity: 1; transform: none;">
      <div class="flex flex-col items-center"><button
          class="inline-flex items-center gap-2.5 justify-center whitespace-nowrap text-lg font-bold ring-offset-background border-2 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-accent text-primary-foreground rounded-[40px] border-transparent max-h-[43px] px-[33px] py-4">Our
          Services</button>
        <h2
          class="font-extrabold text-muted-foreground group lg:text-5xl sm:text-4.5xl text-3xl lg:leading-[140%] sm:leading-[130%] leading-[120%] max-w-[869px] pt-6 text-center">
          Innovative Digital Marketing with SEO, PPC, and More</h2>
      </div>
    </div>
    <div class="lg:pt-7.5 pt-2">
      <div style="opacity: 1; transform: none;">
        <div
          class="grid xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 gap-x-10   [&amp;>*:nth-child(2)>.icon]:bg-[#32A5521A] [&amp;>*:nth-child(2)>.icon]:text-green    [&amp;>*:nth-child(3)>.icon]:bg-[#A22EFE1A] [&amp;>*:nth-child(3)>.icon]:text-purple   [&amp;>*:nth-child(4)>.icon]:bg-[#5A55791A] [&amp;>*:nth-child(4)>.icon]:text-[#5A5579]   [&amp;>*:nth-child(5)>.icon]:bg-[#FF00001A] [&amp;>*:nth-child(5)>.icon]:text-[#FF0000]   [&amp;>*:nth-child(6)>.icon]:bg-[#00A3FF1A] [&amp;>*:nth-child(6)>.icon]:text-[#00A3FF]   [&amp;>*:nth-child(7)>.icon]:bg-[#FF00991A] [&amp;>*:nth-child(7)>.icon]:text-[#FF0099]   [&amp;>*:nth-child(8)>.icon]:bg-[#009F961A] [&amp;>*:nth-child(8)>.icon]:text-[#009F96]   ">
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="47" height="48" viewBox="0 0 47 48" fill="none" style="width:35px;height:36px">
                  <path d="M11.6028 30.8743L18.4621 21.9593L26.2862 28.1054L32.9987 19.4421" stroke="currentColor"
                    stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <ellipse cx="40.8228" cy="6.62549" rx="4.40503" ry="4.40504" stroke="currentColor" stroke-width="2.5"
                    stroke-linecap="round" stroke-linejoin="round"></ellipse>
                  <path
                    d="M29.2018 4.15039H12.5466C5.64539 4.15039 1.36621 9.03788 1.36621 15.9391V34.4612C1.36621 41.3624 5.56148 46.229 12.5466 46.229H32.2644C39.1656 46.229 43.4448 41.3624 43.4448 34.4612V18.3304"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Search Engine Optimization</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="35" height="35" viewBox="0 0 35 35" fill="none">
                  <path
                    d="M24.0471 10.965L14.2696 20.8469L3.14904 13.8914C1.5557 12.8946 1.88714 10.4744 3.68936 9.94733L30.0925 2.21514C31.7428 1.73145 33.2723 3.27442 32.782 4.93008L24.9707 31.3149C24.4356 33.1196 22.0291 33.4421 21.0417 31.8419L14.2644 20.8487"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Social Media Marketing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="32" height="35" viewBox="0 0 32 35" fill="none">
                  <path d="M21.8483 24.715H9.51416" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path d="M21.8483 17.5632H9.51416" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path d="M14.2211 10.4279H9.51465" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M22.1771 1.69775C22.1771 1.69775 9.06227 1.70459 9.04177 1.70459C4.32677 1.73363 1.40723 4.83596 1.40723 9.56805V25.2779C1.40723 30.0339 4.34898 33.1482 9.10498 33.1482C9.10498 33.1482 22.2181 33.143 22.2404 33.143C26.9554 33.114 29.8766 30.01 29.8766 25.2779V9.56805C29.8766 4.81205 26.9331 1.69775 22.1771 1.69775Z"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Content Writing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="19" height="23" viewBox="0 0 19 23" fill="none" style="width:29px;height:36px">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M9.4836 21.5062C9.4836 21.5062 17.4753 19.0864 17.4753 12.4155C17.4753 5.74367 17.7648 5.22284 17.1242 4.58117C16.4826 3.9395 10.5315 1.8645 9.4836 1.8645C8.43568 1.8645 2.48464 3.9395 1.84401 4.58117C1.20235 5.22284 1.49193 5.74367 1.49193 12.4155C1.49193 19.0864 9.4836 21.5062 9.4836 21.5062Z"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6.77637 11.3693L8.7472 13.3433L12.8076 9.28076" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Affiliate Marketing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="37" height="35" viewBox="0 0 37 35" fill="none">
                  <path
                    d="M28.5835 12.2288L20.9929 18.401C19.5587 19.5388 17.541 19.5388 16.1068 18.401L8.45215 12.2288"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M26.8858 32.983C32.0815 32.9973 35.5832 28.7285 35.5832 23.4819V11.7485C35.5832 6.50186 32.0815 2.23303 26.8858 2.23303H10.1139C4.91822 2.23303 1.4165 6.50186 1.4165 11.7485V23.4819C1.4165 28.7285 4.91822 32.9973 10.1139 32.983H26.8858Z"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Email Marketing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="39" height="33" viewBox="0 0 39 33" fill="none">
                  <path d="M37.4375 17.9843H1.5625" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path d="M34.2429 10.7914V8.20668C34.2429 4.6858 31.3883 1.83118 27.8657 1.83118H25.8071"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.75732 10.7914V8.20668C4.75732 4.6858 7.61195 1.83118 11.1345 1.83118H13.246"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M34.2429 17.9827V24.9424C34.2429 28.465 31.3883 31.3196 27.8657 31.3196H25.8071"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.75732 17.9827V24.9424C4.75732 28.465 7.61195 31.3196 11.1345 31.3196H13.246"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Pay-Per-Click Advertising</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="28" height="28" viewBox="0 0 28 28" fill="none" style="width:35px;height:35px">
                  <path
                    d="M4.3931 7.40802C4.3931 5.74268 5.74243 4.39335 7.40777 4.39202H8.77977C9.57577 4.39202 10.3384 4.07602 10.9038 3.51602L11.8624 2.55602C13.0371 1.37468 14.9464 1.36935 16.1278 2.54402L16.1291 2.54535L16.1411 2.55602L17.1011 3.51602C17.6664 4.07735 18.4291 4.39202 19.2251 4.39202H20.5958C22.2611 4.39202 23.6118 5.74135 23.6118 7.40802V8.77735C23.6118 9.57335 23.9264 10.3373 24.4878 10.9027L25.4478 11.8627C26.6291 13.0373 26.6358 14.9467 25.4611 16.128L25.4598 16.1293L25.4478 16.1414L24.4878 17.1013C23.9264 17.6653 23.6118 18.428 23.6118 19.224V20.596C23.6118 22.2613 22.2624 23.6107 20.5971 23.6107H20.5958H19.2224C18.4264 23.6107 17.6624 23.9267 17.0984 24.488L16.1384 25.4467C14.9651 26.628 13.0571 26.6347 11.8758 25.4627C11.8744 25.4613 11.8731 25.46 11.8718 25.4587L11.8598 25.4467L10.9011 24.488C10.3371 23.9267 9.5731 23.612 8.7771 23.6107H7.40777C5.74243 23.6107 4.3931 22.2613 4.3931 20.596V19.2213C4.3931 18.4253 4.0771 17.6627 3.51577 17.0987L2.5571 16.1387C1.37577 14.9653 1.3691 13.0573 2.54243 11.876C2.54243 11.8747 2.54377 11.8733 2.5451 11.872L2.5571 11.86L3.51577 10.9C4.0771 10.3347 4.3931 9.57202 4.3931 8.77468V7.40802"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M10.5754 17.429L17.4288 10.5757" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M17.3272 17.3334H17.3392" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path d="M10.6607 10.6667H10.6727" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">Conversion Rate Optimization</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
          <div class="lg:pt-15 pt-8 text-center lg:text-start flex flex-col items-center lg:items-start group">
            <div
              class="md:w-[85px] md:h-[85px] w-16 h-16 md:p-6 p-4 rounded-full flex justify-center items-center lg:mb-7.5 mb-4 bg-[rgba(46,77,254,0.10)] icon">
              <span class="transition-all duration-500 group-hover:scale-90"><svg xmlns="http://www.w3.org/2000/svg"
                  width="35" height="34" viewBox="0 0 35 34" fill="none">
                  <path
                    d="M1.69824 1.55176L5.25158 2.16676L6.8967 21.7665C7.02824 23.3672 8.36587 24.5955 9.9717 24.5903H28.6079C30.1403 24.5938 31.4403 23.4663 31.6573 21.9493L33.2785 10.746C33.4596 9.4938 32.59 8.33213 31.3395 8.15105C31.2302 8.13567 5.82216 8.12713 5.82216 8.12713"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M21.1304 14.4411H25.8676" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M9.2223 30.5122C9.73651 30.5122 10.1516 30.929 10.1516 31.4415C10.1516 31.9558 9.73651 32.3726 9.2223 32.3726C8.70809 32.3726 8.29297 31.9558 8.29297 31.4415C8.29297 30.929 8.70809 30.5122 9.2223 30.5122Z"
                    fill="currentColor" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M28.4928 30.5122C29.007 30.5122 29.4239 30.929 29.4239 31.4415C29.4239 31.9558 29.007 32.3726 28.4928 32.3726C27.9786 32.3726 27.5635 31.9558 27.5635 31.4415C27.5635 30.929 27.9786 30.5122 28.4928 30.5122Z"
                    fill="currentColor" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                </svg></span></div><a
              class="text-xl font-extrabold text-muted-foreground leading-[140%] multiline-hover"
              href="/service-details/">E-commerce Marketing</a>
            <p class="lg:pt-6 pt-3">Identify relevant and high-impact keywords for your industry. </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
            
          
        

总共 5 条记录