DEV Community: FrontendTeam

How to develop a web component using tailwind: a modern starter kit (vite, tailwind, lit element, SCSS)

FrontendTeam — Thu, 27 Oct 2022 07:06:25 +0000

No crap, show me the tailwind web components starter kit

First of all, if you don't mind about the details, here is the repo of the starter kit:

https://github.com/butopen/web-components-tailwind-starter-kit

If you mind, then keep reading :-)

Some intro

For the first release of Browserbot, our open source project to delegate tests for web apps,
we want to give devs a frontend API to easily create new systems without having to reinvent
the frontend parts each time.

When developing a frontend API, you should consider:

the framework devs love: Angular, React, Vue, Svelte, ...
how to make it simple to integrate a component
how to keep the effort to understand the component dynamics at minimum

If you plan to release your own custom frontend components and make the devs use them like a html tag,
web components are the way to go.

Unfortunately web components are a raw tech: a technology with a lot of potential, but for some reason never upgraded in the last 6 years.

And here we are: we mixed some ingredients to improve the developer experience:

using lit element for a higher level api over web components
using typescript to prevent stupid errors
using scss for the styles to better scale our CSS
integrate vite for a quick development process
integrate tailwind

In this post you'll find a cool starter kit to develop web components with all these frontend technologies inside.

How to write a web component with tailwind and the starter kit

You can find the kit at this open source repo:

https://github.com/butopen/web-components-tailwind-starter-kit

To create a new web component, here is a sample code:

import {html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {TailwindElement} from '../shared/tailwind.element';

import style from './test.component.scss'; // #1

@customElement('test-component')
export class TestComponent extends TailwindElement(style) { // #2

  @property()
  name?: string = 'World';

  render() {
    return html`
      <p>
        Hello,
        <b>${this.name}</b>
        !
      </p>
      <button class="bg-blue-200 text-yellow-200 p-2 rounded-full text-2xl">Hello world!</button>
    `;
  }
}

It is based on the lit element technology: if you wrote a lit component before, you'll find it familiar.

The only difference to a standard LitElement is that:
1) You must import your styles from a separate file. And this is good for two reasons:
- it separates the CSS from the logic
- you can decide to use CSS or SCSS
2) the component class extends a TailwindElement rather than a LitElement

The TailwindElement extends the LitElmement (see below) and adds the logic to integrate tailwind and your styles.

Get started with the starter kit

To run the project:
1) pnpm install (only the first time)
2) pnpm start to run the server
3) to develop the library, run pnpm build and copy the static assets where you need them.

You may clone the repo (https://github.com/butopen/web-components-tailwind-starter-kit) and start developing your components by looking at the test.component as reference.

Use the Tailwind class in your own code without the starter kit

As an alternative, and if you like to have control over every piece, do the following:

1) copy the files in the shared folder:
- tailwind.element.ts extends LitElement by adding the tailwind support
- tailwind.global.css includes tha Tailwind base classes into each component
- globals.d.ts is used to avoid TypeScript errors whe nimporting CSS/Scss files in typescript files
2) copy the package.json or just its devDependencies into your own package.json (this starter kit has no dependencies)
3) copy postcss.config.js, tailwind.config.js and tsconfig.js

That's all.

Show me the pieces

If you want to understand how it works:

the package.json integrates these technologies:

"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"lit": "^2.4.0",
"tailwindcss": "^3.2.0",
"typescript": "^4.8.4",
"vite": "^3.1.8",
"sass": "^1.55.0"

vite does almost all the work
to integrate tailwind, the most important file is in src/shared/tailwind.element.ts

import {LitElement, unsafeCSS} from "lit";

import style from "./tailwind.global.css";

const tailwindElement = unsafeCSS(style);

export const TailwindElement = (style) =>
    class extends LitElement {

        static styles = [tailwindElement, unsafeCSS(style)];

    };

It extends a LitElement class at runtime and adds the tailwind support.

The style variable comes from your component, where it is imported from an external CSS (or SCSS) file.

Then it is combined with the default tailwind classes.

If you add more components, the common parts are reused.

Who uses it?

We developed this starter kit to implement a web session player for our open source SaaS browserbot.

If you want to contribute or share soem thoughts, just get in touch with us.

Enjoy.

Some more details about web components

What are web components

Web components are an html technology to share common fronted logic/ui without worrying about the framework
you're using. The goal is to create your own custom HTML tags.

So you end up having a <maps> component, or a <pdf-viewer> component. Just embed a JS script in the page,
and start using that tag as if it was a native one.

Is it easy to develop a web component? Not much. Our frontend team made it easier.

Why integrating tailwind in a webcomponent is difficult

Tailwind is a wonderful technology to speed up the css part of the frontend development. And wehen I say speed up... trust me: we're talking about an order of magnitude less time to reach the desired aspect of our ui.
Because of how tailwind works, web components do not play well with tailwind since they do not see css classes from outside.

Web components have this concept of total isolation: they will not tell you how things work inside. Just have fate and trust it.

So in order to support tailwind, we need to find a way to inject the classes inside.

Spoiler: we found it and we kept it so simple that you'll not even notice the difference to pure lit elements.

How to keep the developer experience high when integrating web components and tailwind

Devs writing web components rarely write them using the custom elements raw technology.

Some use Stencil, some use Lit, some use Svelte.

For this project we decided to go for Lit.

Writing a web component in Lit is like writing a typescript class plus some decorators.

That experience should not change: integrating tailwind should not break this behavior.

Well done!

That's all. For more posts remember to subscribe to our newsletter :-)

How to handle input keyup events after the user stops typing - Svelte actions and debouncing

FrontendTeam — Fri, 29 Apr 2022 13:36:13 +0000

Why we should implement a custom event in Svelte?

The problem

I already know that when you need to handle some validation on text inputs, then you do it on keyup events.

And that is ok. Or not?

Actually, if the user types fast, you would like to call a function only when he/she stops typing.

So you start to think about setTimeout or setInterval strategies to implement.

Well, you should know that there is a more abstract technique, called debounce.

But if you're using svelte, you should not implement debounce everytime you need this behaviour: svelte actions let you extend any HTML element with common logic.

And in this post we will see how to add a custom event to the input, to handle the use case above.

But let's proceed step by step.

Input Validation

When working with inputs, validation is mandatory: it is necessary to perform some checks when the user stops typing, and not every time a key is pressed.

We want to have a tool to attach this behaviour easily to our inputs everytime.

Autocomplete components

The same behavior is also useful in autocomplete components, where an action must be performed to decide which elements to show: if I execute it at each keypress I could soon block the system, especially if the action involves an asynchronous call to an endpoint.

The solution is to perform the action only when the user stops typing.

In this frontend pill we will see just how to elegantly implement this functionality using Svelte actions.

How the developer will consume a custom Svelte event

As always, before implementing the "on stop typing" custom event, let's imagine the easiest way for the developer to consume it.

In Svelte, the syntax to add event listener to an input tag is as follows:

<input
      on:stopTyping={onStopTyping}
      type="text"
      bind:value={name} />

The stopTyping event does not exist, so we need to implement it. Using an action:

The result will be as follows:

<input
      use:stopTyping
      on:stopTyping={onStopTyping}
      type="text"
      bind:value={name} />

Let's then see how to implement the stopTyping action.

How to implement a custom event in Svelte to reuse on any HTML element

In Svelte there is the concept of actions, a syntax keyword to extend native HTML elements with new functionality.

To use an action, we add an attribute, use, and the function that will take care of the custom behavior (on stop typing in our case).

NOTE

Before explaining how this works, just one important note: actions only work on native HTML tags and not on Svelte components. At least for now.

How to apply the use directive in Svelte

The Svelte use directive is a kind of attribute on a HTML element that specifies a function.

The function, also called action in this context, takes the referring node as input.

export function aCustomAction(node) {
    // some logic
    return {
        destroy() { }// (optional) some logic on destroy 
    };
}

The function returns an object with one method: destroy. It is optional, and it is called when the component is destroyed.

In Svelte an action can also add some behaviour based on some extra parameters that we can pass to the function.

export function aCustomAction(node, param1) {
    // some logic
    return {
        update() { },// (optional) some logic executed when param1 gets updated 
        destroy() { }
    };
}

The update method will be executed when the param1 changes. It is optional.

The onStopTyping action

In this pill we will see how to implement the stop typing action.

Two key points:
1) it has to be used on HTML inputs
2) it will fire an event only when the user stops typing on that input

The function is simple:

export function stopTyping(node) {
    const handleKeyup = debounce((event: KeyboardEvent) => { // (1) the debounce logic
        if (node.contains(event.target)) { // (2) restrict the event to the only referring node 
            node.dispatchEvent(new CustomEvent('stopTyping')); // (3) fire the event
        }
    }, 500);

    // (4) add a generic keyup event
    document.addEventListener('keyup', handleKeyup, true);

    return {
        destroy() {
            // (5) cleanup on destroy
            document.removeEventListener('keyup', handleKeyup, true);
        }
    };
}

Let's go step by step.

First of all, we register the keyup event (4) (and cleanup it on destroy to avoid memory leaks at (5) ).

The interesting parts are:

fire the custom event at (3)
make sure the stopTyping event is fired only once when the user does not write for half a second (at (1))

To make sure that a function is only runned once after the user stops typing, we make use of the debounce function.

How does the debounce function work?

function debounce(inputFunction, timeToWaitBeforeFiringInMs = 500) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            inputFunction.apply(this, args);
        }, timeToWaitBeforeFiringInMs);
    };
}

Above, you can find the implementation of the dobounce function in javascript.

It is used to execute a function only once if called multiple times within a constrained time interval.

The debounce function takes a function as argument and returns a new function (that will replace the original one we passed as input).

Other use cases of the debounce function:

on mouse move, if we want to know when the user stops moving the mouse
on multiple mouse click, to react only after the last click
when using websockets, to execute an action only after a burst of packets arrive
when collecting multiple information packs, to pass to them to the backend only once every X seconds

How to consume the onStopTyping event action in Svelte

To use the function above on our inputs, we just need to import it in our Svelte component:


<script>
    import { stopTyping } from '../shared/on-stop-typing.event';

    let name = "thefrontendteam"

    async function onStopTyping() {
        // do something with name
    }
</script>

<input
      use:stopTyping
      on:stopTyping={onStopTyping}
      type="text"
      bind:value={name} />

Well done!

That's all. For more pills remember to subscribe to our newsletter :-)

How to create a stepper atomic component using pure css and tailwind

FrontendTeam — Tue, 19 Apr 2022 17:05:49 +0000

In this frontend pill we are going to create a
stepper atomic component in pure css.

We needed it in our design system to complete the onboard wizard at ssonext.com (WIP).

This would be the result:

Before writing the code (that is few lines, really) let's imagine the best way for the
developer to consume this component.

What is the best way to consume a stepper atomic component in pure css

Since the componet is in pure CSS, the developer expects to have some classes
to create the component.

There are two conditions that we must respect to maximize the developer experience:
1) Minimize the number of tags necessary to create the stepper;
2) Use only CSS: no javscript at all

When making a stepper, the only thing that will be present is the stepper title:

<div>Step 1: do something</div>
<div>Step 2: almost done</div>
<div>Step 3: done!</div>

Then we have to decide how to indicate the state of the step: "to do"? "active"? "done"?

Each state could be a class:

<div class="todo">Step 1: do something</div>
<div class="active">Step 2: almost done</div>
<div class="done">Step 3: done!</div>

The problem with the code above is that active is a very common CSS class, so it is better
to be more specific and use classes with detailed names.

So we end up with the following classes:

    <div class='bo-step-done'>
        STEP 1
    </div>
    <div class='bo-step-active'>
        STEP 2
    </div>
    <div class='bo-step-todo'>
        STEP 3
    </div>

Simple and compact. Now it's time to translate the code above to this css atomic component:

How to implement a stepper component in SCSS + TailwindCSS

To implement our stepper atomic component, remember that we want to use pure css: so no javascript at all.

The developer should also be able to implement the stepper using only one html tag (Developer experience: keep the number of tags to a minimum possible).

Drawing the step circle

To draw the circle, we use the following tailwind classes:

@apply h-6 w-6 rounded-full border-2 border-bop bg-bop ;

rounded-full combined with bg-bop will make a circle shape using the main color (the -bop color... see the note below).

Why a border-2? Because we will customize it later for the specific state.

Note

The -bop color in bg-bop and border-bop refers to the primary butopen color. You can use
-red-600 or -green-500... it's your choice.

The good thing of the ButOpen primary color is that
it is a CSS 3 variable so the color can be customized at runtime using a root style (1) or using javascript (2)

The empty circle will extend the filled circle, but using the @apply bg-white class.

We will see how in a moment.

Circle position

The circle will be positioned at the center of the step height, so we'll add these tailwind classes:

flex items-center justify-center absolute top-0

Circle icons

Since we want to have pure css, we had three choices for the icons:

base64 image data url in css (e.g. using this online tool: https://www.cssportal.com/image-to-data/)
SVG data url in css (e.g. using this online tool: https://yoksel.github.io/url-encoder/)
UTF8 icons (e.g. here: https://www.utf8icons.com/)

We are lucky enough to have these icons available in UTF-8:

The check icon in pure CSS: ✓

The bullet icon in pure CSS: •

Drawing the step vertical line

The vertical line will be an empty element with a border.

We can use the following tailwind classes:

@apply block h-full w-0.5 border border-gray-300 absolute top-0 -left-4

The block h-full w-0.5 border border-gray-300 classes will draw the vertical line.

The last three classes are used to position the element relative to the parent.

Let the developer use a single `div` tag to implement the step

We want the developer to implement the stepper using:

a single tag
and a single class

So we use the after and before CSS pseudo classes.

The CSS (SCSS syntax) of the base step is as follows:

._bo-step {
  // the text
  @apply relative ml-8 pb-8 pt-0.5 pl-2 text-sm font-bold text-gray-500;

  // the vertical line
  &:before {
    content: "";
    @apply absolute top-0 -left-4 block h-full w-0.5 border border-gray-300;
  }

  // the icon
  &:after {
    content: "";
    @apply absolute top-0 flex h-6 w-6 items-center justify-center rounded-full border-2 border-bop bg-bop;
    left: -1.7rem;
  }
}

This will be our base CSS structure for the step pure CSS atomic component.

Note that I added a small underscore for the name of the class (_bo-step) since I do not want the developer to use this class directly.
It's like a "private" class.

Having this base structure, we can easily define each step status by customizing some parts:

Look at the result:

The DONE step will have:

a vertical line using the main color
a check icon (white color)
a filled circle (main color)


.bo-step-done {
  @extend ._bo-step;
  &:before {
    @apply border-bop;
  }
  &:after {
    content: "✓";
    @apply text-sm font-black text-white;
  }
}

With @extend we extend the base CSS structure.

Then we override the border color (from gray to primary) by specifying the new tailwind classes in the &:before section.

The same in the &:after section:

content: "✓" for check icon
some tailwind font rules to make the check icon white (remember it is a UTF8 text).

The ACTIVE and TODO steps are similar.

The ACTIVE step will have:

a vertical line using the main color
a bullet icon (main color)
a white circle with a main color border

.bo-step-active {
  @extend ._bo-step;
  @apply text-bop;
  &:after {
    content: "•";
    @apply bg-white pb-1 text-lg font-black text-bop;
  }
}

The TODO step will have:

a gray vertical line
no icon
a white background and a gray border for the circle

.bo-step-todo {
  @extend ._bo-step;
  &:after {
    @apply rounded-full border-gray-300 bg-white;
  }
  &:last-child {
    &:before {
      @apply border-transparent;
    }
  }
}

The Complete ButOpen Design System

This component is now part of the ButOpen Design System:

it's open source
it's made in pure css (SCSS+TailwindCSS)
it's easy to consume and integrate into any frontend framework

You can find it here: https://github.com/butopen/butopen-design-system

How to create a new component in svelte using a template - svelte component scaffolding and boilerplate

FrontendTeam — Tue, 12 Apr 2022 17:07:19 +0000

Why

Creating new components is probably one of the things you do most in svelte.

And to maximize the developer experience, you must automate every task that you do often.

It's not just to save time, but also to avoid repetitive tasks that annoy and distract us developer.

Here we'll learn hot to create your customized component template once and use it everytime.

How

So imagine to write this command:

npx t6e $name.svelte src/components name=my-component

and get the component as you would have written it, ready into the src/component folder.

It's easy:

1) Create the template. Here you can find the one we use into our svelte projects:

<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { writable } from 'svelte/store';
  const dispatch = createEventDispatcher();

  const store = writable({
    hello: ""
  });


</script>

<div class="$name">
    {$store.hello}
</div>

<style lang="scss">
    .$name {
        @apply block
    }
</style>

2) name it $name.svelte and put it in a templates folder

3) to create your component, run

npx t6e templates/$name.svelte src/components name=counter

4) you're done. A new fresh component was save in the src/components/counter.svelte:
$name was replaced by counter in both the file name and the file content

You can now re-use that template for all your components, saving hours every month.

What is t6e?

T6e is an open source scaffolder, boilerplater or put simply it lets you
create any file based on your custom templates.

We created a template for svelte above, but you can create any template and reuse it as you like with this
small open-source tool provided by us at butopen

You can find t6e here:

https://github.com/butopen/t6e

Why your frontend team is wasting hours every day without a design system

FrontendTeam — Wed, 16 Mar 2022 15:22:43 +0000

A frontend team without a design system

We develop frontend systems every day. We know it well: if you have to remember how to style a button, you will miss something: padding, margin, colors, background, font... you cannot remember all the CSS rules, I know.

And I assure you: many companies work this way. You have to play “treasure hunt” and look for the CSS rules of the button hidden somewhere in the code.

We are talking about the old “copy/paste”, and it is scary even to write about it.

The button monsters list

Do you know what happens with word of mouth? At each step, a few pieces are lost or a few sentences are misreported.

Without a design system, we have the same problem: each time you miss something new design monsters emerge:

the link button monster, where there was a metamorphosis between the button and the link
The “slimer” button monster, where padding got lost somewhere
the "guess riddle" button monster (no need to rage further)
the serious button monster, except for the missing typography… but which dev cares about typography?
the Cupid button monster, in which the text and the icon want to stick together forever

)
the Neanderthal button monster, the basic one, when you give up (which is not even the ugliest, except that it is at the mercy of the browser)

And we’re frontend devs, we know that something is wrong. But it is not the focus of the feature we are implementing, so it’s not important right now. Which means that it’s not important ever.

A simple CSS class would be enough to establish the style of the button once and for all.

And we are talking about buttons; I know many of you will say: "but I already manage buttons with a class".
Good! great job.
But do you do it for everything related to the frontend?
Because if sometimes, somewhere, you have doubts about which margin/padding/font size to use, then there is still a problem.

CSS classes are the first step. Then you need to structure the project in a better way.

And today, finally, there is a method that allows you to solve everything with elegance: the design system.

Why you are wasting time without a design system and the “rosetta stone” of the frontend teams

When developing a software product, there are two important goals:

maximizing efficiency: trying to get there without wasting time
minimizing bugs: minimizing the possibility of errors

Many teams are involved in the process: the dev team, the design team, the UX team, and so on.

Devs and designers speak a different language, devs and UXs speak a different language.

The design system is like a “rosetta stone”: a very powerful tool shared between designers and developers.

They both love it as it simplifies and speeds up the work on both sides.

With a well-done design system, we will be able to cover points 1 and 2 mentioned above and much more.

How the design and developer teams can benefit from a a design system?

A design system is a tool that has two faces:

on the designer side, it is a set of mockup components, which the designer has produced and which he uses and reuses to create more complex designs
for developers, it is a set of developed components, ready to use in their projects

There is a one-to-one correspondence between the design components and the developed components.

Let's understand it better with an example: buttons

Speaking of buttons, on the design side I could have the button in 3 sizes (small, medium, large) and 2 variants (filled, outline). The main color, the color of the text, the borders, the shadows are all defined.

On the developer side, I will have the same button component. Size variants will always be 3 and often specified with 3 CSS classes. The color, corners, or shading will be defined once and for all in the component.

Since the rules of the button are now fixed on the designer and developer side, two interesting things happen:

when a button is needed, the designer does not have to draw a rectangle and specify the colors every time: he has it available in the design system library (Figma has a specific function for the components of the design system and it is easy to define your design system into a library)
the developer will reuse the component of the developed design system, without the possibility of leaving out “unimportant nuances” while developing a feature in which the button is secondary. In particular, the colors, the shadows, the roundings, etc. have already been defined and will be reused.

Designers and developers cannot make a mistake implementing the button: what to do and how to do it are set in stone by the design system. Since everything has already been said on the button, you shouldn't waste time discussing it or thinking about it.

On the developer side, there is also no possibility to create graphic bugs. And when we deal with more sophisticated components, even functional bugs will disappear because the design system is solid and stable.

The design system is the foundation of our projects.

We maximized effectiveness since we focused on the feature only, not the components. And we minimized bugs since we do not have to rewrite these components again.

The 5 characteristics of a well-done design system

We (The Frontend Team) focused on these goals when designing the design system:

Easy to reuse
Easy to integrate into all frontend frameworks
Easy to extend
With a high developer experience in place
Easy to test

With these goals in mind the frontend team made a choice: use Tailwind and Scss to develop a pure CSS framework-agnostic design system.

Why a pure CSS framework-agnostic design system

We tried to build a design system for a specific framework, in Angular.

Then we needed to have a Svelte version.

So we thought it should be multi-framework, should we re-implement it?

What if we develop our design system using a multi-purpose framework? like Stencil or mitosis?

We opted for Stencil, which in theory exports web components for all frameworks.

In theory. Because the result is a poor developer experience for any framework.

I wrote more about this here: Pure CSS design system in tailwind VS web components, angular, react, vue, svelte.

So finally we decided to build a pure CSS design system.

What are the components of a design system?

Here is a list (far from being complete) of components that should be part of a design system.

In the next posts we will discuss how to implement each of them.

Theme

Colors
Text sizes and typography
Spaces

Atomic components

Card
Mini-card
Badges
Icon badges
Buttons
Icon
Divider

Boxes

warning
success
error

Form components

Field labels (vertical and horizontal)
Input (text, numbers, dates)
Input from / to
Input time
Select
Textarea
Checkbox
Switch
Radio
Multi-tag
Error / validation messages
File upload

Tables

Basic table styles
Pagination

Components with logic

Tabs
Autocomplete
Modal
Popup with a Tooltip
Header (Desktop and mobile)
Horizontal container
Section expand / collapse

Singleton components

Notification
Loading (full-screen and inline)
Global errors

We will see how to develop each component and keep the design system super-easy to consume, integrate, debug and customize.

Finally, our mission is to make the world a better place… for frontend teams. So our design system is open source and available on GitHub: https://github.com/butopen/butopen-design-system

Stay tuned.

Originally published at https://thefrontendteam.com/blog/design-system-what-is-save-hours-how-to-implement-frontend/

DEV Community: FrontendTeam

How to develop a web component using tailwind: a modern starter kit (vite, tailwind, lit element, SCSS)

No crap, show me the tailwind web components starter kit

Some intro

How to write a web component with tailwind and the starter kit

Get started with the starter kit

Use the Tailwind class in your own code without the starter kit

Show me the pieces

Who uses it?

Some more details about web components

What are web components

Why integrating tailwind in a webcomponent is difficult

How to keep the developer experience high when integrating web components and tailwind

Well done!

How to handle input keyup events after the user stops typing - Svelte actions and debouncing

Why we should implement a custom event in Svelte?

The problem

Input Validation

Autocomplete components

How the developer will consume a custom Svelte event

How to implement a custom event in Svelte to reuse on any HTML element

How to apply the use directive in Svelte

The onStopTyping action

How does the debounce function work?

How to consume the onStopTyping event action in Svelte

Well done!

How to create a stepper atomic component using pure css and tailwind

What is the best way to consume a stepper atomic component in pure css

How to implement a stepper component in SCSS + TailwindCSS

Drawing the step circle

Circle position

Circle icons

Drawing the step vertical line

Let the developer use a single div tag to implement the step

The Complete ButOpen Design System

How to create a new component in svelte using a template - svelte component scaffolding and boilerplate

Why

How

What is t6e?

Why your frontend team is wasting hours every day without a design system

A frontend team without a design system

The button monsters list

Why you are wasting time without a design system and the “rosetta stone” of the frontend teams

How the design and developer teams can benefit from a a design system?

Let's understand it better with an example: buttons

The 5 characteristics of a well-done design system

Why a pure CSS framework-agnostic design system

What are the components of a design system?

Theme

Atomic components

Boxes

Form components

Tables

Components with logic

Singleton components

Let the developer use a single `div` tag to implement the step