Tailwind CSS Mindfulness 1 page · production-ready

Where calm meets creativity.

A calm, illustration-led Tailwind landing page inspired by a quiet lakeside sanctuary — a muted mint canvas, condensed editorial typography, soft coral CTAs, and a detailed inline SVG pixel-art landscape.

Open the live site Browse sections
Design
Soft illustration
Responsive
320px → 1920+
Build
No build
quiet.place
Make room
for quiet.

click the frame to open the full page

/ Sections

Four composed sections.

A single, focused landing page — no filler blocks.

01

Hero

Illustration-led hero with mint canvas, condensed headline, and lakeside SVG.

 02

Features

Three centered feature blocks: mindful tools, creative space, gentle reminders.

 03

About

Calm editorial block introducing the sanctuary idea.

 04

Contact

Soft conversion section on the mint canvas with coral CTAs.

/ Design system

A muted, illustration-first palette.

Palette

ink

#0b302e

mint

#cfe1de

coral

#eb6665

lake

#8eb8b6

paper

#f5f7f6

Typography

Barlow Condensed

display · 500–700

DM Mono

interface & body · 400–500

Geometry

Rounded canvas

restrained borders, no heavy shadows

Coral pill CTAs

quiet hover lift

Handcrafted SVG

pixel-art lakeside landscape, no stock imagery