Feature tiles

This tailwind example is contributed by Nishant Trivedi, on 25-Jul-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase Grid

Author Nishant Trivedi

Tailwind v3.4 15.2k 22

Fork Fullscreen

<div id="features" class="mx-auto max-w-6xl">
    <p class="text-center text-base font-semibold leading-7 text-primary-500">Features</p>
    <h2 class="text-center font-display text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
      Writing has never been so easy
    </h2>
    <ul class="mt-16 grid grid-cols-1 gap-6 text-center text-slate-700 md:grid-cols-3">
      <li class="rounded-xl bg-white px-6 py-8 shadow-sm">

<img src="https://www.svgrepo.com/show/530438/ddos-protection.svg" alt="" class="mx-auto h-10 w-10">
        <h3 class="my-3 font-display font-medium">Powered by ChatGPT</h3>
        <p class="mt-1.5 text-sm leading-6 text-secondary-500">
          the cutting-edge language model that makes interactions a breeze. With its user-friendly interface,
          effortlessly tap into the world of AI-generated text.
        </p>

</li>
      <li class="rounded-xl bg-white px-6 py-8 shadow-sm">

<img src="https://www.svgrepo.com/show/530442/port-detection.svg"
                alt="" class="mx-auto h-10 w-10">
        <h3 class="my-3 font-display font-medium">Easy to use</h3>
        <p class="mt-1.5 text-sm leading-6 text-secondary-500">
          Simply input your subject, click the generate button, and the result will appear in seconds just like
          magick.
        </p>

</li>
      <li class="rounded-xl bg-white px-6 py-8 shadow-sm">
        <img src="https://www.svgrepo.com/show/530444/availability.svg" alt="" class="mx-auto h-10 w-10">
        <h3 class="my-3 font-display font-medium">Custom settings</h3>
        <p class="mt-1.5 text-sm leading-6 text-secondary-500">
          We offer advanced customization. You can freely combine options like roles, languages, publish, tones,
          lengths,
          and formats.
        </p>

</li>
      <li class="rounded-xl bg-white px-6 py-8 shadow-sm">
        <a href="/pricing" class="group">
          <img src="https://www.svgrepo.com/show/530440/machine-vision.svg" alt="" class="mx-auto h-10 w-10">
          <h3 class="my-3 font-display font-medium group-hover:text-primary-500">Free trial</h3>
          <p class="mt-1.5 text-sm leading-6 text-secondary-500">We offer a free trial service without login. We
            provide
            many payment options including pay-as-you-go and subscription.</p>
        </a>
      </li>
      <li class="rounded-xl bg-white px-6 py-8 shadow-sm">
        <a href="/templates" class="group">
          <img src="https://www.svgrepo.com/show/530450/page-analysis.svg" alt="" class="mx-auto h-10 w-10">
          <h3 class="my-3 font-display font-medium group-hover:text-primary-500">
            90+ templates
          </h3>
          <p class="mt-1.5 text-sm leading-6 text-secondary-500">We offer many templates covering areas such as
            writing,
            education, lifestyle and creativity to inspire your potential. </p>
        </a>
      </li>
      <li class="rounded-xl bg-white px-6 py-8 shadow-sm">
        <a href="/download" class="group">
          <img src="https://www.svgrepo.com/show/530453/mail-reception.svg" alt="" class="mx-auto h-10 w-10">
          <h3 class="my-3 font-display font-medium group-hover:text-primary-500">Use Anywhere</h3>
          <p class="mt-1.5 text-sm leading-6 text-secondary-500">Our product is compatible with multiple platforms
            including Web, Chrome, Windows and Mac, you can use MagickPen anywhere.</p>
        </a>
      </li>
    </ul>
  </div>

<div>

Related Examples

Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
Feature showcase cards

Lukas Müller

3 years ago

14.8k
tailwind services section
display features/services of your product

L.J. Weber

3 years ago

21.5k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k
Features grid example
Tailwind clean and responsive features section with the heading

Alok

3 years ago

14.6k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

4 years ago

26.7k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Computer guy

3 years ago

13.4k
Product features list with inner border

Lîmåã M

3 years ago

15.1k
Tailwind css feature cards

Kofi Osei

3 years ago

12.1k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.2k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Alok

3 years ago

62.4k
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.8k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k
Features grid

Sophia Baker

3 years ago

10.9k
Tailwind responsive features card grid
with gradient background

Kofi Osei

3 years ago

11.7k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Kavita Joshi

2 years ago

7.4k
Feature cards

Fagundo67

3 years ago

11.5k