mockups

Artboard

mockups

Tailwind CSS Artboard

Artboard provides fixed size container to display a demo content on mobile size.

Class Name	Type	Description
artboard	Component	Container element.
artboard-demo	Modifier	Adds shadow and radius. Puts items in center.
phone-1	Modifier	Size 1 (320×568).
phone-2	Modifier	Size 2 (375×667).
phone-3	Modifier	Size 3 (414×736).
phone-4	Modifier	Size 4 (375×812).
phone-5	Modifier	Size 5 (414×896).
phone-6	Modifier	Size 6 (320×1024).
artboard-horizontal	Modifier	Shows horizontal view.

Basic examples

Artboard size 1

The artboard class functions as the initial class for the artboard CSS. Applying the artboard-demo class adds background color, shadow, and border radius. Lastly, the phone-number class defines the styling for sizing.

Artboard size 2

Basic artboard size 2 example

Artboard size 3

Basic artboard size 3 example

Artboard size 4

Basic artboard size 4 example

Artboard size 5

Basic artboard size 5 example

Artboard size 6

Basic artboard size 6 example

Artboard horizontal size 1

Incorporating the artboard-horizontal class will orient the artboard horizontally.

Artboard horizontal size 2

Basic artboard horizontal size 2 example

Artboard horizontal size 3

Basic artboard horizontal size 3 example

Artboard horizontal size 4

Basic artboard horizontal size 4 example

Artboard horizontal size 5

Basic artboard horizontal size 5 example

Artboard horizontal size 6

Basic artboard horizontal size 6 example