Service Freelance Playful
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>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page