Component:
Service Freelance Playful

Name: Service Freelance Playful
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Service Page Section UI Element Sale Freelance Playful
Colors:
Description:
This carefully crafted Service component is perfect for Freelance landing pages, featuring a Playful design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Service
@industry: Freelance
@style: Playful
@category: Page Section, Sale, UI Element
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&family=Quicksand:wght@500;700&display=swap');
  body {
    font-family: 'Quicksand', sans-serif;
  }
  .playful-title {
    font-family: 'Fredoka', sans-serif;
  }
</style>

<section class="bg-stone-50 py-24 px-6 relative overflow-hidden">
  <div class="max-w-7xl mx-auto relative z-10">
    <div class="mb-20">
      <div
        class="inline-flex items-center gap-2 px-4 py-2 bg-white rounded-2xl shadow-sm border-2 border-rose-200 mb-6 transform -rotate-2">
        <span class="text-rose-500">✨</span>
        <span class="text-sm font-bold text-stone-600 uppercase tracking-widest">The Toolkit</span>
      </div>
      <h2 class="playful-title text-4xl md:text-6xl font-bold text-stone-800 leading-tight">
        How I help your <br />
        <span class="text-rose-500">Idea Take Flight</span>
      </h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <div
        class="group bg-white p-10 rounded-[3rem] border-2 border-stone-200 hover:border-rose-300 transition-all duration-500 hover:shadow-2xl hover:shadow-rose-100/50">
        <div
          class="w-16 h-16 bg-rose-100 rounded-3xl flex items-center justify-center mb-8 transform group-hover:rotate-12 transition-transform duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-rose-500" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.172-1.172a4 4 0 115.656 5.656L15 14.657" />
          </svg>
        </div>
        <h3 class="playful-title text-2xl font-bold text-stone-800 mb-4">Character Sketching</h3>
        <p class="text-stone-600 leading-relaxed mb-6">
          Every brand is a character. I build visual identities that don't just look pretty—they have a personality, a
          voice, and a soul that resonates with your audience.
        </p>
        <ul class="space-y-3">
          <li class="flex items-center gap-2 text-sm font-bold text-stone-400">
            <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span> Logo Design
          </li>
          <li class="flex items-center gap-2 text-sm font-bold text-stone-400">
            <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span> Color Palettes
          </li>
        </ul>
      </div>

      <div
        class="group bg-stone-800 p-10 rounded-[3rem] border-2 border-stone-800 transition-all duration-500 hover:shadow-2xl hover:shadow-stone-900/40 lg:-translate-y-8">
        <div
          class="w-16 h-16 bg-stone-700 rounded-3xl flex items-center justify-center mb-8 transform group-hover:-rotate-12 transition-transform duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-rose-400" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M9.75 17L9 21h6l-.75-4M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
        </div>
        <h3 class="playful-title text-2xl font-bold text-white mb-4">World Building</h3>
        <p class="text-stone-300 leading-relaxed mb-6">
          I design digital environments where users feel at home. Intuitive interfaces and seamless flows that turn
          "clicking" into "experiencing."
        </p>
        <ul class="space-y-3">
          <li class="flex items-center gap-2 text-sm font-bold text-stone-500">
            <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span> Wireframing
          </li>
          <li class="flex items-center gap-2 text-sm font-bold text-stone-500">
            <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span> Prototyping
          </li>
        </ul>
      </div>

      <div
        class="group bg-white p-10 rounded-[3rem] border-2 border-stone-200 hover:border-rose-300 transition-all duration-500 hover:shadow-2xl hover:shadow-rose-100/50">
        <div
          class="w-16 h-16 bg-rose-100 rounded-3xl flex items-center justify-center mb-8 transform group-hover:rotate-12 transition-transform duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-rose-500" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
          </svg>
        </div>
        <h3 class="playful-title text-2xl font-bold text-stone-800 mb-4">Turning the Key</h3>
        <p class="text-stone-600 leading-relaxed mb-6">
          The climax of our story! I translate designs into clean, snappy code. Fast-loading, responsive, and ready to
          meet the real world.
        </p>
        <ul class="space-y-3">
          <li class="flex items-center gap-2 text-sm font-bold text-stone-400">
            <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span> Web Development
          </li>
          <li class="flex items-center gap-2 text-sm font-bold text-stone-400">
            <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span> Animations
          </li>
        </ul>
      </div>

    </div>

    <div
      class="mt-10 flex flex-col md:flex-row items-center justify-between gap-8 p-8 bg-stone-100/50 rounded-[2.5rem] border border-stone-300 transition-all duration-500 hover:shadow-2xl hover:shadow-rose-100/50">
      <div class="flex items-center gap-4">
        <div class="text-4xl">🏹</div>
        <p class="text-stone-700 font-medium max-w-sm">
          "The best stories are told together. I'm just here to provide the ink and the parchment."
        </p>
      </div>
      <a href="#"
        class="px-8 py-4 bg-white hover:bg-rose-500 hover:text-white text-stone-800 rounded-2xl font-bold transition-all border-2 border-stone-200 shadow-sm">
        Browse My Portfolio
      </a>
    </div>
  </div>
</section>
Service Freelance Playful

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
