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.1k

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

2 years ago

16.2k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

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

Author:
Alok

2 years ago

13.6k
Features list with icons

Author:
L.J. Weber

2 years ago

13.7k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.1k
Responsive Features section

Author:
Piet Vriend

2 years ago

10.5k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

5 months ago

1.2k
Feature card

Author:
Matti

8 months ago

856
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.6k
Highlights - Speakers Section

Author:
ABDO-SY

5 months ago

438
What is Webby
A showcase feature

Author:
Developer Kwame

1 year ago

2k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components