Build a Business Website

In this tutorial, you will build a simple business website for a fictional flower studio.

You will create Home, Services, and Contact pages and connect them with a shared navigation menu. You will also add opening hours and a Google Map to the Contact page.

Starting with this tutorial, we will use Tailwind CSS to style pages.

Instead of writing CSS directly, you will add classes provided by Tailwind CSS to the class attribute of HTML elements. To keep the full code easy to understand, this example uses only the essential classes.

The website you build in this tutorial will include:

A Home page introducing the flower studio
A Services page showing the services it offers
A Contact page with its address and opening hours
A shared navigation menu connecting all three pages
A location displayed with Google Maps
A layout that adapts to mobile screens

Full Code

When you finish this tutorial, you will have a page like the one below.

Before you begin, take a quick look at the completed page and the full source code. You do not need to understand all of the code yet. As you write and modify the code step by step, you will learn what each part does.

Before You Begin

When you create the project, the following homepage file is generated:

/public
└── +page.essepage

From the project dashboard, select Code Editor to open the editor.

When you complete this tutorial, the /public folder will have the following structure:

/public
├── +layout.essepage
├── +page.essepage
├── services
│   └── +page.essepage
└── contact
    └── +page.essepage

Each page file corresponds to the following URL:

/public/+page.essepage → /
/public/services/+page.essepage → /services
/public/contact/+page.essepage → /contact

1. Create a Shared Layout

First, create a layout containing the navigation menu and footer used by every page.

Create the following file inside the /public folder in the file explorer:

/public/+layout.essepage

Open the file and paste the following code:

<head>
    <title>Bloom Flower Studio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<header class="border-b">
    <nav class="mx-auto flex max-w-5xl items-center justify-between gap-2 px-6 py-4">
        <a href="/" class="font-bold">
            Bloom
        </a>

        <div class="flex gap-4 text-sm">
            <a href="/">Home</a>
            <a href="/services">Services</a>
            <a href="/contact">Contact</a>
        </div>
    </nav>
</header>

<main class="mx-auto max-w-5xl px-6">
    <essepage-slot></essepage-slot>
</main>

<footer class="border-t py-8 text-center text-sm text-gray-500">
    © Bloom Flower Studio
</footer>

Save the file.

Windows or Linux: Ctrl + S
macOS: Cmd + S

Load Tailwind CSS

The following code inside <head> loads the browser script that allows you to use Tailwind CSS in the project:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

You can now use Tailwind CSS classes in the class attribute of HTML elements without writing a separate <style> block.

For example, several classes are applied to the following navigation element:

<nav class="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">

Each class has a specific styling role:

mx-auto: Centers the element horizontally.
flex: Arranges the elements inside it horizontally.
max-w-5xl: Limits the maximum width of the content.
justify-between: Places the inner elements at opposite ends.
px-6: Adds horizontal padding.
py-4: Adds vertical padding.

You do not need to memorize every class now. Follow the code and check the results in the preview as you learn them one by one.

2. Create the Home Page

Open the following homepage file in the file explorer:

/public/+page.essepage

Delete the existing code and paste the following:

<section class="py-20 text-center">
    <p class="text-sm text-rose-600">
        Bloom Flower Studio
    </p>

    <h1 class="mt-3 text-4xl font-bold">
        Flowers for life’s special moments.
    </h1>

    <p class="mx-auto mt-4 max-w-xl text-gray-600">
        We create fresh flowers for gifts,
        celebrations, and everyday spaces.
    </p>

    <a href="/services" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
        View Services
    </a>

    <img
        src="https://images.unsplash.com/photo-1627819797319-6e187b6e9762?auto=format&fit=crop&w=1600&q=80"
        alt="Pink and white flowers in a vase"
        class="mt-12 h-72 w-full rounded object-cover md:h-96"
    >
</section>

<section class="grid gap-4 pb-16 md:grid-cols-3">
    <article class="rounded border p-6">
        <h2 class="font-bold">
            Custom Bouquets
        </h2>

        <p class="mt-2 text-gray-600">
            Fresh bouquets made for any occasion.
        </p>
    </article>

    <article class="rounded border p-6">
        <h2 class="font-bold">
            Weddings & Events
        </h2>

        <p class="mt-2 text-gray-600">
            Floral arrangements for memorable events.
        </p>
    </article>

    <article class="rounded border p-6">
        <h2 class="font-bold">
            Weekly Flowers
        </h2>

        <p class="mt-2 text-gray-600">
            Regular flower delivery for homes and businesses.
        </p>
    </article>
</section>

<section class="border-t py-12 text-center">
    <h2 class="text-2xl font-bold">
        Visit Our Studio
    </h2>

    <p class="mt-3 text-gray-600">
        Monday–Saturday · 10:00–18:00
    </p>

    <a href="/contact" class="mt-4 inline-block text-rose-600">
        Contact Us
    </a>
</section>

Save the file and check the result in the preview on the right.

The Home page contains:

The flower studio name and an introduction
A button that opens the Services page
Three main services
Opening hours and a link to the Contact page

Style the Page with Tailwind CSS

The following classes are applied to the heading in the first section:

<h1 class="mt-3 text-4xl font-bold">

mt-3: Adds space above the element.
text-4xl: Increases the font size.
font-bold: Displays the text in bold.

The following classes are applied to the button:

<a href="/services" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
    View Services
</a>

These classes add spacing, rounded corners, a background color, and a text color to the button.

You can style an HTML element by adding classes without creating a separate CSS selector.

Adapt the Layout to Mobile Screens

The following classes are used for the service list:

<section class="grid gap-4 pb-16 md:grid-cols-3">

md:grid-cols-3 displays the services in three columns when the screen reaches a certain width.

On smaller screens, each service is displayed on its own row. On wider screens, the three services are displayed side by side.

Reduce the width of the preview pane and observe how the service layout changes.

3. Create the Services Page

Now create a page introducing the services offered by the flower studio.

Create the following folder inside /public:

services

Create a +page.essepage file inside the services folder:

/public/services/+page.essepage

Open the file and paste the following code:

<section class="py-16">
    <h1 class="text-3xl font-bold">
        Our Services
    </h1>

    <p class="mt-3 text-gray-600">
        Flowers created for everyday moments
        and special celebrations.
    </p>

    <div class="mt-10 grid gap-4 md:grid-cols-3">
        <article class="rounded border p-6">
            <h2 class="font-bold">
                Custom Bouquets
            </h2>

            <p class="mt-2 text-gray-600">
                Tell us the occasion and your preferred colors.
                We will create a bouquet just for you.
            </p>
        </article>

        <article class="rounded border p-6">
            <h2 class="font-bold">
                Weddings & Events
            </h2>

            <p class="mt-2 text-gray-600">
                Bouquets and floral decorations
                designed for your special day.
            </p>
        </article>

        <article class="rounded border p-6">
            <h2 class="font-bold">
                Weekly Flowers
            </h2>

            <p class="mt-2 text-gray-600">
                Fresh seasonal flowers delivered
                to your home or workplace.
            </p>
        </article>
    </div>
</section>

<section class="border-t py-12 text-center">
    <h2 class="text-2xl font-bold">
        Looking for something special?
    </h2>

    <a href="/contact" class="mt-6 inline-block rounded bg-rose-600 px-5 py-3 text-white">
        Contact Us
    </a>
</section>

Save the file.

This file becomes the page at the following URL:

/services

4. Create the Contact Page

Now create a Contact page showing the flower studio’s location and opening hours.

Create the following folder inside /public:

contact

Create a +page.essepage file inside the contact folder:

/public/contact/+page.essepage

Open the file and paste the following code:

<section class="py-16">
    <h1 class="text-3xl font-bold">
        Contact
    </h1>

    <p class="mt-3 text-gray-600">
        Visit our studio or contact us
        to discuss your flowers.
    </p>

    <div class="mt-10 grid gap-8 md:grid-cols-2">
        <div>
            <h2 class="font-bold">
                Location
            </h2>

            <p class="mt-3 text-gray-600">
                Champ de Mars<br>
                5 Avenue Anatole France<br>
                75007 Paris, France
            </p>

            <h2 class="mt-6 font-bold">
                Opening Hours
            </h2>

            <p class="mt-3 text-gray-600">
                Monday–Friday · 10:00–18:00<br>
                Saturday · 10:00–16:00<br>
                Sunday · Closed
            </p>

            <a href="mailto:hello@bloom.example" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
                Send an Email
            </a>
        </div>

        <iframe
            src="https://maps.google.com/maps?output=embed&q=Eiffel+Tower%2C+Paris%2C+France"
            title="Map showing the Eiffel Tower in Paris"
            loading="lazy"
            allowfullscreen
            referrerpolicy="strict-origin-when-cross-origin"
            class="h-80 w-full rounded border"
        ></iframe>
    </div>
</section>

Save the file.

This file becomes the page at the following URL:

/contact

Embed Google Maps

The Contact page uses an <iframe> to embed Google Maps:

<iframe
    src="https://maps.google.com/maps?output=embed&q=Eiffel+Tower%2C+Paris%2C+France"
    title="Map showing the Eiffel Tower in Paris"
    loading="lazy"
    allowfullscreen
    referrerpolicy="strict-origin-when-cross-origin"
    class="h-80 w-full rounded border"
></iframe>

The q parameter in src specifies the place displayed on the map.

The following value is used to display the Eiffel Tower in this example:

Eiffel+Tower%2C+Paris%2C+France

To display a different location, replace this part with the name or address of your business.

The following Tailwind CSS classes are applied to the map:

h-80 w-full rounded border

h-80: Sets the height of the map.
w-full: Uses the full available width.
rounded: Rounds the corners.
border: Adds a border around the map.

Because md:grid-cols-2 is applied, the contact information and map are displayed side by side on wider screens and vertically on smaller screens.

5. Publish the New Pages

The homepage created with the project is already published, but the new Services and Contact pages have not been published yet.

Publish each of the following page files:

/public/services/+page.essepage
/public/contact/+page.essepage

To publish each file:

Right-click the +page.essepage file in the file explorer.
Select Publish.
Repeat the same process for the other page file.

After you publish a new page for the first time, the menu changes to Apply Changes when you edit it again.

6. Check the Website in the Preview

Select the Home icon at the top of the preview pane on the right to open the homepage.

Check the following in order:

Confirm that the flower studio name and three services appear on the homepage.
Select the View Services button to open the /services page.
Select Contact from the navigation menu.
Confirm that the address, opening hours, and Google Map appear on the /contact page.
Reduce the width of the preview pane and confirm that the service list and contact section change their layout.
Confirm that the navigation menu and footer remain visible as you move between pages.

7. Apply All Changes

If every page appears correctly in the preview, apply the saved changes to the public site.

Because you changed both the homepage and the shared layout, use Apply All.

Select Apply All at the top of the editor.

After the process is complete, you can open the public website using any of the following methods:

Select Page → Open Homepage in the editor.
Open the Site URL from the project dashboard.
Select Open Page from an individual page file.

On the public website, use the navigation menu and buttons to confirm that all three pages open correctly.

It may take up to one minute for the cache to update after applying changes. If the public page still shows the previous content, wait a moment and refresh it.

Your Website Is Ready

So far, you have:

Loaded Tailwind CSS
Styled pages with Tailwind CSS classes
Created Home, Services, and Contact pages
Managed the navigation menu and footer with a shared layout
Used a responsive grid to arrange content for different screen sizes
Displayed a business location with Google Maps
Published new pages and applied all changes

In this tutorial, you styled the website using only Tailwind CSS classes without writing CSS directly.

Now replace the flower studio name, services, address, and opening hours with information for your own business. You can also replace rose, which is used for the button and text colors, with another color to change the appearance of the site.

Next Steps

After completing your business website, continue with one of the following documents:

To learn more about how files are connected to URLs: Pages and URLs
To learn more about layouts and reusable elements: Layouts and Components
To learn how to style pages: Styles and Tailwind CSS
To learn how to publish and manage pages: Publishing and Site Management

Languages

On this page

Title

Full Code

Before You Begin

1. Create a Shared Layout

Load Tailwind CSS

2. Create the Home Page

Style the Page with Tailwind CSS

Adapt the Layout to Mobile Screens

3. Create the Services Page

4. Create the Contact Page

Embed Google Maps

5. Publish the New Pages

6. Check the Website in the Preview

7. Apply All Changes

Your Website Is Ready

Next Steps

On this page