JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<header>
        <div class="container">
            <nav>
                <a href="#" class="logo">The Colorful Stem</a>
                <div class="nav-links">
                    <a href="#passion">About Me</a>
                    <a href="gallery.html">Gallery</a>
                    <a href="process.html">Bespoke Process</a>
                    <a href="contact.html" class="button button-primary">Contact / Order</a>
                </div>
            </nav>
        </div>
    </header>

    <section id="hero">
        <div class="container">
            <h1>Everlasting Color. Uniquely You.</h1>
            <p>Bespoke Artificial Floristry & Creative Designs, Handcrafted with Passion.</p>
            <a href="process.html" class="button button-primary" style="background-color: var(--color-secondary); color: var(--color-dark);">Start Your Bespoke Design</a>
        </div>
    </section>

    <section id="passion">
        <div class="container">
            <h2>More Than Just Flowers—It's a Feeling.</h2>
            <div style="max-width: 700px; margin: 0 auto;">
                <p>For me, creation is a commitment. It’s a colourful and cheerful process that keeps me mentally positive. I use the highest quality artificial flowers to create stunning, bespoke designs that look incredibly realistic and last for years.</p>
                <p>My commitment is to work with you, within your budget, to bring your dream piece to life—with continuous photo updates along the way.</p>
            </div>
            <a href="about.html" class="button" style="border: 2px solid var(--color-primary); color: var(--color-primary);">Meet the Designer</a>
        </div>
    </section>

    <section id="services" style="background-color: var(--color-light);">
        <div class="container">
            <h2>Designed for Every Occasion. Created with Love.</h2>
            <div class="feature-grid">
                <div class="feature-item">
      ...

CSS

:root {
            --color-primary: #FF577F; /* Vibrant Magenta */
            --color-secondary: #FFD700; /* Sunny Yellow */
            --color-accent: #3CB371; /* Vibrant Green */
            --color-dark: #333;
            --color-light: #f9f9f9;
            --font-main: 'Arial', sans-serif;
            --font-display: 'Georgia', serif;
        }

        body {
            font-family: var(--font-main);
            margin: 0;
            padding: 0;
            background-color: var(--color-light);
            color: var(--color-dark);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- Global Elements --- */
        h1, h2, h3 {
            font-family: var(--font-display);
            color: var(--color-primary);
            text-align: center;
            margin-bottom: 0.5em;
        }

        .button {
            display: inline-block;
            padding: 12px 25px;
            margin-top: 15px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            transition: background-color 0.3s;
        }

        .button-primary {
            background-color: var(--color-primary);
            color: white;
        }

        .button-primary:hover {
            background-color: #CC4666; /* Darker Primary */
        }

        /* --- Header/Nav Styling --- */
        header {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            font-size: 1.5em;
            font-weight: bold;
            color: var(--color-dark);
            text-decoration: none;
 ...