ContextQMD
Back to Daisyui

Phone mockup

packages/docs/src/routes/(routes)/components/mockup-phone/+page.md

5.5.191.0 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~iPhone mockup

<div class="mockup-phone"> <div class="mockup-phone-camera"></div> <div class="mockup-phone-display text-white bg-neutral-900 grid place-content-center">It's Glowtime.</div> </div>
html
<div class="$$mockup-phone">
  <div class="$$mockup-phone-camera"></div>
  <div class="$$mockup-phone-display text-white grid place-content-center bg-neutral-900">
    It's Glowtime.
  </div>
</div>

~With color and wallpaper

<div class="mockup-phone border-[#ff8938]"> <div class="mockup-phone-camera"></div> <div class="mockup-phone-display"> </div> </div>
html
<div class="$$mockup-phone border-[#ff8938]">
  <div class="$$mockup-phone-camera"></div>
  <div class="$$mockup-phone-display">
    
  </div>
</div>