Tailwind Services Components (27)

Services from Casper

Dark Feature Section with Three Service Columns

A dark gradient feature section titled "Casper Services" with a short intro line and three equal columns, each showing a colored circular icon, a heading, a divider, and body text. The layout is a horizontal row of three text columns with no buttons or interactive controls visible.

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute bottom-0 right-0 mr-20 w-186 h-186 bg-gradient-to-t from-violet-900 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="max-w-md mx-auto lg:max-w-none relative">
      <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-6">Casper Services</h2>
      <p class="text-xl text-gray-500 tracking-tight mb-16">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
          <div>
            <img class="block mb-6" src="casper-assets/services/circle-icon1.png" alt="">
            <h4 class="font-heading text-3xl font-medium text-white">Intelligent Conersations</h4>
            <div class="h-1 bg-white bg-opacity-10 my-6 rounded-md"></div>
            <p class="max-w-sm text-xl tracking-tight leading-relaxed text-violet-50">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
          <div>
            <img class="block mb-6" src="casper-assets/services/circle-icon3.png" alt="">
            <h4 class="font-heading text-3xl font-medium text-white">Intelligent Conersations</h4>
            <div class="h-1 bg-white bg-opacity-10 my-6 rounded-md"></div>
            <p class="max-w-xs text-xl tracking-tight leading-relaxed text-violet-50">By understanding your visitors' needs, our chat assistant creates a unique experience</p>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div>
            <img class="block mb-6" src="casper-assets/services/circle-icon2.png" alt="">
            <h4 class="font-heading text-3xl font-medium text-white">Intelligent Conersations</h4>
            <div class="h-1 bg-white bg-opacity-10 my-6 rounded-md"></div>
            <p class="max-w-xs text-xl tracking-tight leading-relaxed text-violet-50">Say goodbye to static web pages and hello to an interactive, conversational platform</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Services from Mirga

Tailwind CSS

Mirga

Hero section with headline, subtext, photo, three service cards, and All services button

A light marketing hero introducing a community and digital services, with a large two-line headline highlighting "the future," a subtitle, a wide photo of a smiling woman waving, a row of three service cards, and a dark "All services" call-to-action button below.

<section x-data="{ showContent: false }" class="py-12 md:py-24 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="mb-12 md:mb-24 text-center max-w-6xl mx-auto">
      <h1 class="mb-16 font-semibold text-6xl sm:text-9xl xl:text-11xl font-heading">
        <span>Join the community, and change</span>
        <span class="bg-orange-50 rounded-lg px-4 inline-block">the future.</span>
      </h1>
      <p class="font-semibold text-2xl text-neutral-600 tracking-tight">Your journey to digital excellence starts here.</p>
    </div>
    <img class="mb-16 mx-auto object-cover rounded-3xl" style="height: 480px" src="mirga-assets/images/services/woman.jpg" alt="">
    <div class="mb-16 max-w-7xl mx-auto">
      <div class="flex flex-wrap -m-2.5">
        <div class="w-full md:w-1/3 p-2.5">
          <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
            <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 1. Data Analysis and Reporting</h3>
            <p class="font-medium text-lg text-neutral-600 tracking-tight">Our data analysis service provides accurate insights into the results of your marketing efforts.</p>
          </div>
        </div>
        <div class="w-full md:w-1/3 p-2.5">
          <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
            <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 2. Social Media Advertising Campaigns</h3>
            <p class="font-medium text-lg text-neutral-600 tracking-tight">Our data analysis service provides accurate insights into the results of your marketing efforts.</p>
          </div>
        </div>
        <div class="w-full md:w-1/3 p-2.5">
          <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
            <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 3. Website Optimization (SEO)</h3>
            <p class="font-medium text-lg text-neutral-600 tracking-tight">Our company offers comprehensive website optimization services, helping yo...</p>
          </div>
        </div>
        <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-2.5">
            <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
              <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 4. Digital app</h3>
              <p class="font-medium text-lg text-neutral-600 tracking-tight">Can create, connect, verify, and search across all you knowledge platforms is one centralized, secure place - accelarating productivity.</p>
            </div>
        </div>
        <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-2.5">
            <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
              <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 5. Content marketing</h3>
              <p class="font-medium text-lg text-neutral-600 tracking-tight">Our company provides content strategies and creates valuable...</p>
            </div>
        </div>
        <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/3 p-2.5">
            <div class="h-full py-12 px-10 text-center bg-white border border-neutral-100 rounded-4xl">
              <h3 class="mb-10 font-semibold text-3xl tracking-tight font-heading">Service 6. Email marketing</h3>
              <p class="font-medium text-lg text-neutral-600 tracking-tight">We design personalized email marketing campaigns that help build lasting customer...</p>
            </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-center">
      <div class="w-auto"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">All services</a></div>
    </div>
  </div>
</section>

Services from asitrastudio

Tailwind CSS

asitrastudio

Services List with Numbered Rows and Arrow Links

A light-background services section with a large 'Services' heading and three numbered rows, each pairing a large title with right-aligned descriptive text and an arrow icon, separated by horizontal rules. A faded architectural floor plan image overlaps the first row, giving it an editorial, minimal layout.

<section class="relative py-12 md:py-24 bg-coolGray-50 overflow-hidden">
  <div class="container mx-auto px-4 relative">
    <img class="hidden sm:block absolute top-0 left-1/2 lg:ml-20 xl:-ml-52 mt-8 lg:mt-20 rounded-4xl" src="asitrastudio-assets/services/map-small.png" alt="">
    <h1 class="font-heading text-6xl md:text-10xl tracking-tighter mb-24">Services</h1>
    <a class="relative group block xl:flex pb-8 mb-24 items-end border-b border-black" href="#">
      <div class="mb-8 xl:mb-0">
        <span class="block lg:-mb-1 text-sm text-coolGray-600">01</span>
        <h3 class="text-4xl xs:text-6xl lg:text-7xl inline-block pb-2 border-b-3 border-transparent group-hover:border-black transition duration-150">De-risking your project</h3>
      </div>
      <div class="max-w-md text-right mb-8 xl:mb-0 ml-auto xl:mr-20">
        <p>We follow the RIBA Plan of Work 2020 to ensure an orderly framework and project clarity from the outset. First, we conduct feasibility studies and a project review.</p>
      </div>
      <div class="text-right">
        <span class="inline-block group-hover:rotate-45 transform transition duration-100">
          <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
    </a>
    <a class="group block xl:flex pb-8 mb-24 items-end border-b border-black" href="#">
      <div class="mb-8 xl:mb-0">
        <span class="block lg:-mb-1 text-sm text-coolGray-600">02</span>
        <h3 class="text-4xl xs:text-6xl lg:text-7xl inline-block pb-2 border-b-3 border-transparent group-hover:border-black transition duration-150">Planning strategies</h3>
      </div>
      <div class="max-w-md text-right mb-8 xl:mb-0 ml-auto xl:mr-20">
        <p>This process is led either by a chartered planning consultant or chartered architect and entails the preparation of concept designs and planning strategies.</p>
      </div>
      <div class="text-right">
        <span class="inline-block group-hover:rotate-45 transform transition duration-100">
          <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
    </a>
    <a class="group block xl:flex pb-8 items-end border-b border-black" href="#">
      <div class="mb-8 xl:mb-0">
        <span class="block lg:-mb-1 text-sm text-coolGray-600">03</span>
        <h3 class="text-4xl xs:text-6xl lg:text-7xl inline-block border-b-3 border-transparent group-hover:border-black transition duration-150">Return on investment</h3>
      </div>
      <div class="max-w-md text-right mb-8 xl:mb-0 ml-auto xl:mr-20">
        <p>During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
      </div>
      <div class="text-right">
        <span class="inline-block group-hover:rotate-45 transform transition duration-100">
          <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
      </div>
    </a>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Services from Consulty

Tailwind CSS

Consulty

Services Showcase Feature Section with Photo and Numbered Strategy Card

A dark marketing section titled "Vision & direction" with a short paragraph and an outlined "Explore All Services" button on the left, and a rounded photo of a woman placing a sticky note on a whiteboard on the right. A black cutout overlay displays the numbered label "01 Strategy" and an arrow icon.

<section class="bg-black px-8 md:px-24 pt-32 pb-44">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <div class="flex flex-col justify-between gap-4 h-full">
                <p class="text-white tracking-tight">Our services</p>
                <div>
                    <h2 class="text-white tracking-tight font-heading text-2xl font-semibold mb-4">Vision &amp; direction</h2>
                    <p class="text-gray-400 mb-6 tracking-tight max-w-xs">There are many variations of passages you the blocks needed to create a truly professional website for your template. </p>
                    <a href="#" class="bg-black border border-gray-200 h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 tracking-tight text-white text-sm font-medium hover:bg-gray-900 focus:bg-gray-900 focus:ring-4 focus:ring-gray-200 transition duration-200">Explore All Services</a>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-2/3 p-4">
            <div class="overflow-x-auto overflow-y-hidden">
                <div class="flex" style="height:628px;">
                    <div class="flex-shrink-0">
                        <div class="flex h-full">
                            <img class="h-full transform translate-x-16" src="consulty-assets/services/picture1.png" alt="">
                            <a href="#" class="group">
                                <div class="flex gap-5 h-full">
                                    <div class="flex flex-col justify-between items-end h-full">
                                        <div class="text-white">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                                <path d="M36 10.5L16.5 10.5C16.1022 10.5 15.7206 10.6581 15.4393 10.9394C15.158 11.2207 15 11.6022 15 12C15 12.3979 15.158 12.7794 15.4393 13.0607C15.7206 13.342 16.1022 13.5 16.5 13.5L32.3794 13.5L10.9387 34.9388C10.6573 35.2203 10.4992 35.602 10.4992 36C10.4992 36.3981 10.6573 36.7798 10.9387 37.0613C11.2202 37.3428 11.602 37.5009 12 37.5009C12.398 37.5009 12.7798 37.3428 13.0612 37.0613L34.5 15.6207L34.5 31.5001C34.5 31.8979 34.658 32.2794 34.9393 32.5607C35.2206 32.842 35.6022 33.0001 36 33.0001C36.3978 33.0001 36.7794 32.842 37.0607 32.5607C37.342 32.2794 37.5 31.8979 37.5 31.5001L37.5 12C37.5 11.6022 37.342 11.2207 37.0607 10.9394C36.7794 10.6581 36.3978 10.5 36 10.5Z" fill="currentColor"></path>
                                            </svg>
                                        </div>
                                        <div class="flex gap-4 items-center">
                                            <h2 class="font-heading text-white text-6xl font-medium tracking-tight">01</h2>
                                            <p class="text-white text-xl font-semibold tracking-tight">Strategy</p>
                                        </div>
                                    </div>
                                    <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="flex-shrink-0">
                        <a href="#" class="group">
                            <div class="flex justify-end gap-5 h-full">
                                <div class="flex flex-col justify-between items-end h-full">
                                    <div class="text-gray-800 group-hover:text-white transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                            <path d="M37.5 16.4998V35.9998C37.5 36.3977 37.3419 36.7792 37.0606 37.0605C36.7793 37.3418 36.3978 37.4998 36 37.4998H16.5C16.1022 37.4998 15.7206 37.3418 15.4393 37.0605C15.158 36.7792 15 36.3977 15 35.9998C15 35.602 15.158 35.2205 15.4393 34.9392C15.7206 34.6579 16.1022 34.4998 16.5 34.4998H32.3794L10.9387 13.0611C10.6573 12.7796 10.4991 12.3979 10.4991 11.9998C10.4991 11.6018 10.6573 11.22 10.9387 10.9386C11.2202 10.6571 11.6019 10.499 12 10.499C12.398 10.499 12.7798 10.6571 13.0612 10.9386L34.5 32.3792V16.4998C34.5 16.102 34.658 15.7205 34.9393 15.4392C35.2206 15.1579 35.6022 14.9998 36 14.9998C36.3978 14.9998 36.7793 15.1579 37.0606 15.4392C37.3419 15.7205 37.5 16.102 37.5 16.4998Z" fill="currentColor"></path>
                                        </svg>
                                    </div>
                                    <div class="flex gap-4 items-center transform -rotate-90 translate-x-16 -translate-y-14">
                                        <h2 class="font-heading text-gray-800 group-hover:text-white transition duration-200 text-6xl font-medium tracking-tight">02</h2>
                                        <p class="text-gray-800 group-hover:text-white transition duration-200 text-xl font-semibold tracking-tight">Branding</p>
                                    </div>
                                </div>
                                <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                            </div>
                        </a>
                    </div>
                    <div class="flex-shrink-0">
                        <a href="#" class="group">
                            <div class="flex justify-end gap-5 h-full">
                                <div class="flex flex-col justify-between items-end h-full">
                                    <div class="text-gray-800 group-hover:text-white transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                            <path d="M37.5 16.4998V35.9998C37.5 36.3977 37.3419 36.7792 37.0606 37.0605C36.7793 37.3418 36.3978 37.4998 36 37.4998H16.5C16.1022 37.4998 15.7206 37.3418 15.4393 37.0605C15.158 36.7792 15 36.3977 15 35.9998C15 35.602 15.158 35.2205 15.4393 34.9392C15.7206 34.6579 16.1022 34.4998 16.5 34.4998H32.3794L10.9387 13.0611C10.6573 12.7796 10.4991 12.3979 10.4991 11.9998C10.4991 11.6018 10.6573 11.22 10.9387 10.9386C11.2202 10.6571 11.6019 10.499 12 10.499C12.398 10.499 12.7798 10.6571 13.0612 10.9386L34.5 32.3792V16.4998C34.5 16.102 34.658 15.7205 34.9393 15.4392C35.2206 15.1579 35.6022 14.9998 36 14.9998C36.3978 14.9998 36.7793 15.1579 37.0606 15.4392C37.3419 15.7205 37.5 16.102 37.5 16.4998Z" fill="currentColor"></path>
                                        </svg>
                                    </div>
                                    <div class="flex gap-4 items-center transform -rotate-90 translate-x-16 -translate-y-14">
                                        <h2 class="font-heading text-gray-800 group-hover:text-white transition duration-200 text-6xl font-medium tracking-tight">03</h2>
                                        <p class="text-gray-800 group-hover:text-white transition duration-200 text-xl font-semibold tracking-tight">Marketing</p>
                                    </div>
                                </div>
                                <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>