mercuryuiWeb

Mockup classes

Mockups

<div class="phone phone-sm border-gray-900 bg-gray-800">     
    <div class="headbar">
        <div class="body bg-gray-900">
            <div class="camera bg-black"></div>
        </div>
    </div>
    <div class="f-col my-auto font-medium items-center">
        Hello world
    </div>
</div>

Hello world

<div class="window default window-md border-gray-800 bg-white">
    <div class="titlebar bg-gray-800">
        <div class="font-mono">
            Lorem ipsum
        </div>
        <div class="control">
            - □ x
        </div>
    </div>
    <div class="body">
        <div class="h-full f-col items-center justify-center text-black">
            <div>
                Hello world
            </div>
        </div>
    </div>
</div>

Lorem ipsum

- □ x

Hello world

Class name

@apply

.phone

@apply rounded-3xl border-8 f-col relative

.phone-md

@apply @apply w-60 h-100

.phone-sm

@apply w-48 h-88

.phone-lg

@apply w-68 h-128

.phone > .headbar

@apply absolute w-full top-0 f-row justify-center -mt-2

.phone > .headbar > .body

@apply rounded-xl w-28 h-6 f-row gap-x-2 justify-center items-center

.camera

@apply h-2 w-2 rounded-full

.window

@apply flex f-col

.window-default

@apply rounded-lg border-2

.window-sm

@apply h-36 w-64

.window-md

@apply h-54 w-96

.window-lg

@apply h-72 w-128

.window > .body

@apply h-88/1 w-full

.titlebar

@apply h-12/1 w-full f-row justify-between items-center text-lg px-3

.titlebar > .window-title

@apply font-mono

.titlebar > .control

@apply f-row gap-x-2 px-1 items-center

Structure

.phone

.headbar

.camera

Content

.window

.titlebar

.window-title

.control

.body