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

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.5k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

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

Author:
Alok

2 years ago

13.9k
Features list with icons

Author:
L.J. Weber

2 years ago

14.2k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.5k
Responsive Features section

Author:
Piet Vriend

3 years ago

10.8k
Responsive Features Section

Author:
Abdul Baset Bappy

5 months ago

816
Features grid

Author:
Sophia Baker

2 years ago

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

8 months ago

1.6k
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.9k
Feature tiles

Author:
Nishant Trivedi

2 years ago

14.1k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components