Home
Anonymous
Feature cards for company website

Feature cards for company website

Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

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

Feature showcase

Author Anonymous

7.5k

Fork Fullscreen

<section id="features" class="container space-y-6 bg-slate-50 py-8 mx-auto md:py-12 lg:py-24">
    <div class="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
        <h2 class="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">Web Hosting Companies Features</h2>
        <p class="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">Discover the amazing features offered by web hosting companies to enhance your online presence.</p>
    </div>
    <div class="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3">
        <div class="relative overflow-hidden rounded-lg border bg-background p-2">
            <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg xmlns="http://www.w3.org/2000/svg"
                    width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal">
                    <polyline points="4 17 10 11 4 5"></polyline>
                    <line x1="12" y1="19" x2="20" y2="19"></line>
                </svg>
                <div class="space-y-2">
                    <h3 class="font-bold">Prompt Builder</h3>
                    <p class="text-sm text-muted-foreground">An AI-powered prompt builder to help you create stunning images.</p>
                </div>
            </div>
        </div>
        <div class="relative overflow-hidden rounded-lg border bg-background p-2">
            <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg xmlns="http://www.w3.org/2000/svg"
                    width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="3" y1="9" x2="21" y2="9"></line>
                    <line x1="3" y1="15" x2="21" y2="15"></line>
                    <line x1="9" y1="3" x2="9" y2="21"></line>
                    <line x1="15" y1="3" x2="15" y2="21"></line>
                </svg>
                <div class="space-y-2">
                    <h3 class="font-bold">Control grid size</h3>
                    <p class="text-sm text-muted-foreground">Choose from 16x16, 32x32, 64x64, or 128x128 grids.</p>
                </div>
            </div>
        </div>
        <div class="relative overflow-hidden rounded-lg border bg-background p-2">
            <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg xmlns="http://www.w3.org/2000/svg"
                    width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal">
                    <line x1="21" y1="4" x2="14" y2="4"></line>
                    <line x1="10" y1="4" x2="3" y2="4"></line>
                    <line x1="21" y1="12" x2="12" y2="12"></line>
                    <line x1="8" y1="12" x2="3" y2="12"></line>
                    <line x1="21" y1="20" x2="16" y2="20"></line>
                    <line x1="12" y1="20" x2="3" y2="20"></line>
                    <line x1="14" y1="2" x2="14" y2="6"></line>
                    <line x1="8" y1="10" x2="8" y2="14"></line>
                    <line x1="16" y1="18" x2="16" y2="22"></line>
                </svg>
                <div class="space-y-2">
                    <h3 class="font-bold">Advanced Tuning</h3>
                    <p class="text-sm text-muted-foreground">Advanced options for adjusting sampling steps and prompt guidance.</p>
                </div>
            </div>
        </div>
        <div class="relative overflow-hidden rounded-lg border bg-background p-2">
            <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg xmlns="http://www.w3.org/2000/svg"
                    width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-minus">
                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="9" y1="15" x2="15" y2="15"></line>
                </svg>
                <div class="space-y-2">
                    <h3 class="font-bold">Remove background</h3>
                    <p class="text-sm text-muted-foreground">Isolate the subject of your image by removing the background!</p>
                </div>
            </div>
        </div>
        <div class="relative overflow-hidden rounded-lg border bg-background p-2">
            <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg xmlns="http://www.w3.org/2000/svg"
                    width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-input">
                    <path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <path d="M2 15h10"></path>
                    <path d="m9 18 3-3-3-3"></path>
                </svg>
                <div class="space-y-2">
                    <h3 class="font-bold">Use reference images</h3>
                    <p class="text-sm text-muted-foreground">Upload your own reference images to influence the generation.</p>
                </div>
            </div>
        </div>
        <div class="relative overflow-hidden rounded-lg border bg-background p-2">
            <div class="flex h-[180px] flex-col justify-between rounded-md p-6"><svg xmlns="http://www.w3.org/2000/svg"
                    width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette">
                    <circle cx="13.5" cy="6.5" r=".5"></circle>
                    <circle cx="17.5" cy="10.5" r=".5"></circle>
                    <circle cx="8.5" cy="7.5" r=".5"></circle>
                    <circle cx="6.5" cy="12.5" r=".5"></circle>
                    <path
                        d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h 1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z">
                    </path>
                </svg>
                <div class="space-y-2">
                    <h3 class="font-bold">Color palette control</h3>
                    <p class="text-sm text-muted-foreground">Constrain your generated image to a specific color palette.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Related Examples

Features section
Showcase your key features

Author:
Manon Daniel

3 years ago

16.8k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

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

Author:
Alok

2 years ago

14.2k
Features list with icons

Author:
L.J. Weber

2 years ago

14.5k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.8k
Responsive Features section

Author:
Piet Vriend

3 years ago

11.1k
Basic features section
Display your most important features

Author:
Dipti narayan

2 years ago

7.5k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Hotel rooms
A simple room overview

Author:
Matti

1 year ago

1.8k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

1 year ago

2.3k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.5k
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components