Giftcard grid

This tailwind example is contributed by ariaw, on 07-Sep-2025. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 1.2k 4

<section class="mb-16 p-4">
  <div class="mx-auto max-w-7xl">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
      
      <div class="overflow-hidden rounded-2xl bg-gradient-to-r from-[#0047BB] to-[#2D68F8] text-white transition-transform duration-300 hover:-translate-y-2">
        <div class="p-6">
          <div class="mb-4 flex items-start justify-between">
            <div>
              <h3 class="text-xl font-bold">PlayStation Card</h3>
              <p class="opacity-90">$50 Credit</p>
            </div>
            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M22.585 17.011c-.43.543-1.483.93-1.483.93l-7.832 2.817V18.68l5.764-2.057c.654-.234.754-.566.223-.74s-1.492-.125-2.147.111l-3.84 1.354v-2.155l.221-.076s1.11-.393 2.67-.566c1.561-.172 3.472.024 4.972.593c1.69.535 1.88 1.323 1.452 1.866m-8.57-3.537V8.162c0-.624-.115-1.198-.7-1.36c-.447-.144-.725.272-.725.895V21l-3.583-1.139V4c1.523.283 3.743.953 4.936 1.355c3.035 1.043 4.064 2.342 4.064 5.267c0 2.851-1.758 3.932-3.992 2.852m-11.583 4.99c-1.736-.49-2.025-1.51-1.234-2.097c.731-.542 1.975-.95 1.975-.95l5.138-1.83v2.086l-3.698 1.325c-.653.234-.753.566-.223.74c.532.175 1.493.125 2.147-.11l1.774-.644v1.865l-.354.06c-1.774.29-3.663.169-5.525-.445" /></svg>
            </div>
          </div>
          <div class="mt-8">
            <div class="mb-2 flex items-center justify-between">
              <span class="opacity-90">Price:</span>
              <span class="text-xl font-bold">500,000 IRT</span>
            </div>
            <button class="mt-4 w-full cursor-pointer rounded-xl bg-white py-3 font-medium text-blue-600 shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg">Add to Cart</button>
          </div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl bg-gradient-to-r from-[#107C10] to-[#5DBE3F] text-white transition-transform duration-300 hover:-translate-y-2">
        <div class="p-6">
          <div class="mb-4 flex items-start justify-between">
            <div>
              <h3 class="text-xl font-bold">Xbox Gift Card</h3>
              <p class="opacity-90">$25 Credit</p>
            </div>
            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m8.888 7.942l.42-.484l-.742-.645C7.34 5.717 6.534 5.168 5.792 4.91c-.58-.225-.644-.193-1.128.323c-1.129 1.225-2.128 3.225-2.419 4.934c-.225 1.419-.258 1.773-.193 2.45c.258 2.032.71 3.451 1.677 4.87c.419.58.483.742.354.42c-.193-.452-.032-1.549.355-2.58c.742-1.968 2.644-5.160 4.45-7.385M7.405 3.395c1.354 0 2.627.426 3.838 1.032c.387.258.774.419.774.387c0 0 .419-.194.87-.42c1.484-.741 2.903-1.096 3.87-1.032l.484.033l-.323-.097c-.677-.452-1.967-.903-2.999-1.129c-1-.225-2.87-.225-3.87 0c-.87.194-1.547.42-2.321.774c-.871.452-.936.516-.323.452m4.708 6.739c-.193-.032-2 1.548-3.257 2.903c-2.257 2.418-3.58 4.482-3.58 5.707c0 .58.226.903 1.355 1.645c1.354.903 2.902 1.451 4.45 1.58c1.258.097 2.806-.032 4.031-.419c1.451-.451 3.418-1.677 3.709-2.257c.419-.774-.42-2.58-2.193-4.773c-1.097-1.354-4.16-4.321-4.515-4.386m9.707-.064a11.6 11.6 0 0 0-1.677-3.87c-.483-.677-1.128-1.354-1.322-1.354c-.323 0-1 .226-1.451.548c-.58.355-1.129.806-1.967 1.548l-.645.548l.58.742c1.806 2.257 3.773 5.643 4.354 7.449c.258.806.419 1.645.322 2.096c-.032.322-.032.322.032.226c.258-.323.807-1.258 1.032-1.774c.258-.645.58-1.644.742-2.354c.226-.935.194-2.902 0-3.805" /></svg>
            </div>
          </div>
          <div class="mt-8">
            <div class="mb-2 flex items-center justify-between">
              <span class="opacity-90">Price:</span>
              <span class="text-xl font-bold">300,000 IRT</span>
            </div>
            <button class="mt-4 w-full cursor-pointer rounded-xl bg-white py-3 font-medium text-green-600 shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg">Add to Cart</button>
          </div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl bg-gradient-to-r from-[#800080] to-[#A93DAD] text-white transition-transform duration-300 hover:-translate-y-2">
        <div class="p-6">
          <div class="mb-4 flex items-start justify-between">
            <div>
              <h3 class="text-xl font-bold">Apple Gift Card</h3>
              <p class="opacity-90">$15 Credit</p>
            </div>
            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.40 1.80c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.50-3.74 4.25" /></svg>
            </div>
          </div>
          <div class="mt-8">
            <div class="mb-2 flex items-center justify-between">
              <span class="opacity-90">Price:</span>
              <span class="text-xl font-bold">200,000 IRT</span>
            </div>
            <button class="mt-4 w-full cursor-pointer rounded-xl bg-white py-3 font-medium text-purple-600 shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg">Add to Cart</button>
          </div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl bg-gradient-to-r from-[#134375] to-[#2A475E] text-white transition-transform duration-300 hover:-translate-y-2">
        <div class="p-6">
          <div class="mb-4 flex items-start justify-between">
            <div>
              <h3 class="text-xl font-bold">Steam Wallet</h3>
              <p class="opacity-90">$20 Credit</p>
            </div>
            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10c-4.6 0-8.45-3.08-9.64-7.27l3.83 1.58a2.84 2.84 0 0 0 2.78 2.27c1.56 0 2.83-1.27 2.83-2.83v-.13l3.4-2.43h.08c2.08 0 3.77-1.69 3.77-3.77s-1.69-3.77-3.77-3.77s-3.78 1.69-3.78 3.77v.05l-2.37 3.46l-.16-.01c-.59 0-1.14.18-1.59.49L2 11.2C2.43 6.05 6.73 2 12 2M8.28 17.17c.8.33 1.72-.04 2.05-.84s-.05-1.71-.83-2.04l-1.28-.53c.49-.18 1.04-.19 1.56.03c.53.21.94.62 1.15 1.15c.22.52.22 1.1 0 1.62c-.43 1.08-1.7 1.6-2.78 1.15c-.5-.21-.88-.59-1.09-1.04zm9.52-7.75c0 1.39-1.13 2.52-2.52 2.52a2.52 2.52 0 0 1-2.51-2.52a2.5 2.5 0 0 1 2.51-2.51a2.52 2.52 0 0 1 2.52 2.51m-4.4 0c0 1.04.84 1.89 1.89 1.89c1.04 0 1.88-.85 1.88-1.89s-.84-1.89-1.88-1.89c-1.05 0-1.89.85-1.89 1.89" /></svg>
            </div>
          </div>
          <div class="mt-8">
            <div class="mb-2 flex items-center justify-between">
              <span class="opacity-90">Price:</span>
              <span class="text-xl font-bold">250,000 IRT</span>
            </div>
            <button class="mt-4 w-full cursor-pointer rounded-xl bg-white py-3 font-medium text-[#2A475E] shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg">Add to Cart</button>
          </div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl bg-gradient-to-r from-[#0F9D58] to-[#3DDB94] text-white transition-transform duration-300 hover:-translate-y-2">
        <div class="p-6">
          <div class="mb-4 flex items-start justify-between">
            <div>
              <h3 class="text-xl font-bold">Google Play</h3>
              <p class="opacity-90">$30 Credit</p>
            </div>
            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m3.637 3.434l8.74 8.571l-8.675 8.65a2.1 2.1 0 0 1-.326-.613a2.5 2.5 0 0 1 0-.755V4.567c-.026-.395.065-.79.26-1.133m12.506 4.833l-2.853 2.826L4.653 2.6c.28-.097.58-.124.873-.078c.46.126.899.32 1.302.573l7.816 4.325c.508.273 1.003.56 1.498.847M13.29 12.93l2.839 2.788l-2.058 1.146l-6.279 3.49c-.52.287-1.042.561-1.55.874a1.8 1.8 0 0 1-1.472.195zm7.36-.925a1.92 1.92 0 0 1-.99 1.72l-2.346 1.302l-3.087-3.022l3.1-3.074c.795.443 1.577.886 2.358 1.303a1.89 1.89 0 0 1 .964 1.771" /></svg>
            </div>
          </div>
          <div class="mt-8">
            <div class="mb-2 flex items-center justify-between">
              <span class="opacity-90">Price:</span>
              <span class="text-xl font-bold">350,000 IRT</span>
            </div>
            <button class="mt-4 w-full cursor-pointer rounded-xl bg-white py-3 font-medium text-[#0F9D58] shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg">Add to Cart</button>
          </div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl bg-gradient-to-r from-[#0078D4] to-[#50B6FF] text-white transition-transform duration-300 hover:-translate-y-2">
        <div class="p-6">
          <div class="mb-4 flex items-start justify-between">
            <div>
              <h3 class="text-xl font-bold">Microsoft Store</h3>
              <p class="opacity-90">$40 Credit</p>
            </div>
            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M2 3h9v9H2zm9 19H2v-9h9zM21 3v9h-9V3zm0 19h-9v-9h9z" /></svg>
            </div>
          </div>
          <div class="mt-8">
            <div class="mb-2 flex items-center justify-between">
              <span class="opacity-90">Price:</span>
              <span class="text-xl font-bold">450,000 IRT</span>
            </div>
            <button class="mt-4 w-full cursor-pointer rounded-xl bg-white py-3 font-medium text-[#0078D4] shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

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

Amit Pachange

4 years ago

53.7k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.8k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k