Home
Nishant Trivedi
Feature tiles

Feature tiles

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

Feature showcase Grid

Author Nishant Trivedi

14.4k

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

Author:
Sameer Sultana

2 years ago

28.6k
Feature showcase cards

Author:
Lukas Müller

2 years ago

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

Author:
L.J. Weber

2 years ago

20.7k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

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

Author:
Alok

2 years ago

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

Author:
Alok

3 years ago

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

Author:
Computer guy

2 years ago

12.5k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.3k
Tailwind css feature cards

Author:
Kofi Osei

3 years ago

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

Author:
Arya

3 years ago

44.6k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.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.

Author:
Alok

3 years ago

60.8k
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

3 years ago

52.1k
Feature display cards (grid layout)

Author:
Sophia Baker

3 years ago

15.4k
Features grid

Author:
Sophia Baker

3 years ago

10.2k
Tailwind responsive features card grid
with gradient background

Author:
Kofi Osei

2 years ago

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

Author:
Kavita Joshi

2 years ago

7k
Feature cards

Author:
Fagundo67

2 years ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components