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 v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Anonymous

Tailwind v3.4 7.8k 17

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

Manon Daniel

3 years ago

17.6k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

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

Alok

3 years ago

14.6k
Features list with icons

L.J. Weber

3 years ago

15.3k
Features list with images and description

Noah Schmidt

3 years ago

15.2k
Responsive Features section

Piet Vriend

4 years ago

11.7k
Palette2

Lasse Strand Ringvold

9 months ago

776
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
Services

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.6k
why choose us (features showcase) example

Erik Hyatt

3 years ago

17.9k
Key Features
Showcase Key Features of your app

Anonymous

2 years ago

2.5k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

5 months ago

332