- Components
- Devices
Components
Tailwind CSS Devices
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Mobile
Mobile device mockup.
<figure class="mx-auto max-w-full w-60 h-auto">
<div class="p-1.5 bg-gray-800 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75_/_20%),_0_2rem_4rem_-2rem_rgb(45_55_75_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75_/_20%)] dark:bg-gray-600 dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
<img class="max-w-full h-auto rounded-[1.25rem]" src="../docs/assets/img/280x560/img1.jpg" alt="Image Description">
</div>
</figure>
Browser
Browser device mockup.
www.preline.com
<figure class="ml-auto mr-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-[0_2.75rem_3.5rem_-2rem_rgb(45_55_75_/_20%),_0_0_5rem_-2rem_rgb(45_55_75_/_15%)] dark:shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
<div class="relative flex items-center max-w-[50rem] bg-gray-800 rounded-t-lg py-2 px-24 dark:bg-gray-700">
<div class="flex space-x-1 absolute top-2/4 left-4 -translate-y-1">
<span class="w-2 h-2 bg-gray-600 rounded-full dark:bg-gray-600"></span>
<span class="w-2 h-2 bg-gray-600 rounded-full dark:bg-gray-600"></span>
<span class="w-2 h-2 bg-gray-600 rounded-full dark:bg-gray-600"></span>
</div>
<div class="flex justify-center items-center w-full h-full bg-gray-700 text-[.25rem] text-gray-400 rounded-sm sm:text-[.5rem] dark:bg-gray-600 dark:text-gray-400">www.preline.com</div>
</div>
<div class="bg-gray-800 rounded-b-lg">
<img class="max-w-full h-auto rounded-b-lg" src="../docs/assets/img/1618x1010/img1.jpg" alt="Image Description">
</div>
</figure>