Home
R Thapa
Clickable and Responsive Card Grid

Clickable and Responsive Card Grid

It is designed to showcase and link to various topics or content categories.

This tailwind example is contributed by R Thapa, on 01-Oct-2023. Component is made with Tailwind CSS v3. It is responsive.

Card Grid

Author R Thapa

7.1k

Fork Fullscreen

<a href="/frontend-performance"
        class="relative flex h-full flex-col rounded-md border border-gray-200 bg-white p-2.5 hover:border-gray-400 sm:rounded-lg sm:p-5">
        <span class="text-md mb-0 font-semibold text-gray-900 hover:text-black sm:mb-1.5 sm:text-xl">
          Frontend Performance
        </span>
        <span class="text-sm leading-normal text-gray-400 sm:block">
          Detailed list of best practices to improve your frontend performance
        </span>
      </a>
      <a href="/api-security"
        class="relative flex h-full flex-col rounded-md border border-gray-200 bg-white p-2.5 hover:border-gray-400 sm:rounded-lg sm:p-5">
        <span class="text-md mb-0 font-semibold text-gray-900 hover:text-black sm:mb-1.5 sm:text-xl">
          API Security
        </span>
        <span class="text-sm leading-normal text-gray-400 sm:block">
          Detailed list of best practices to make your APIs secure
        </span>
      </a>
      <a href="/code-review"
        class="relative flex h-full flex-col rounded-md border border-gray-200 bg-white p-2.5 hover:border-gray-400 sm:rounded-lg sm:p-5">
        <span class="text-md mb-0 font-semibold text-gray-900 hover:text-black sm:mb-1.5 sm:text-xl">
          Code Reviews
        </span>
        <span class="text-sm leading-normal text-gray-400 sm:block">
          Detailed list of best practices for effective code reviews and quality
        </span>
      </a>
      <a href="/aws"
        class="relative flex h-full flex-col rounded-md border border-gray-200 bg-white p-2.5 hover:border-gray-400 sm:rounded-lg sm:p-5">
        <span class="text-md mb-0 font-semibold text-gray-900 hover:text-black sm:mb-1.5 sm:text-xl">
          AWS
        </span>
        <span class="text-sm leading-normal text-gray-400 sm:block">
          Detailed list of best practices for Amazon Web Services (AWS)
        </span>
      </a>
    </div>
  </div>
</div>

Related Examples

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.

Author:
Amit Pachange

1 year ago

36k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
jdherron1

8 months ago

11.6k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

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

Author:
Noob

1 year ago

15.4k
Features grid

Author:
Sophia Baker

1 year ago

7.6k
Blog post cards
responsive blog post cards

Author:
Mr Robot

1 year ago

8.9k
Card grid for posts

Author:
Mr Robot

1 year ago

14k
Card grid section
Display article/blog grid

Author:
Mr Robot

1 year ago

16.7k
cards
cards with background animation

Author:
Anonymous

10 months ago

8.2k
Book Showcase Grid
Responsive Book Catalog Display with buy now CTA buttons

Author:
Prajwal Hallale

6 days ago

32
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

Author:
R Thapa

9 months ago

8.9k
About us card

Author:
Sienna

1 year ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent