نحوه ساخت ماکت گوشی فقط با استفاده از Tailwind CSS

امروز می‌خواهم به شما نشان دهم که چگونه می‌توانید به‌راحتی یک مدل دستگاه تلفن با استفاده از کلاس‌های Tailwind CSS ایجاد کنید – این مؤلفه‌ها معمولاً برای بخش‌های hero و CTA استفاده می‌شوند و استفاده از CSS می‌تواند عملکرد آنها را بهتر و زیباتر از استفاده از SVG یا SVG کند. اسکرین شات ها

تنها پیش نیازی که نیاز دارید این است که Tailwind CSS یا از طریق CDN یا ادغام در فرآیند ساخت روی پروژه خود نصب شده باشد.

از طرف دیگر، اگر می‌خواهید از مؤلفه‌های بیشتری استفاده کنید که به خوبی با مؤلفه‌ای که ما با آن کار خواهیم کرد، بازی می‌کنند، می‌توانید Flowbite را نیز نصب کنید – اما برای این مؤلفه اجباری نیست.

در اینجا پیش نمایشی از نحوه ظاهر کامپوننت ما آمده است:

بدون مقدمه، بیایید شروع کنیم!

ساخت ماکت دستگاه با Tailwind CSS

اولین کاری که باید انجام دهیم این است که قاب اصلی قطعه را که لبه صفحه نمایش و خود دستگاه است تنظیم کنیم.

در اینجا نحوه انجام این کار آمده است:

<div class="relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]">
    <!-- other elements and content -->
</div>

این قاب اصلی دستگاه تلفن ما خواهد بود و شما می توانید رنگ و اندازه ماکت را به دلخواه خود به روز کنید.

مرحله بعدی اضافه کردن دکمه‌های کنترلی مانند کنترل صدا و خاموش کردن آن برای واقعی‌تر کردن آن است:

<div class="relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]">
    <div class="h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg"></div>
    <div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
    <div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
    <div class="h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>
    <!-- screenshot and container -->
</div>

عالی! شروع به بهتر شدن کرده است.

مرحله بعدی اضافه کردن یک کانتینر div و تصاویر واقعی برای اسکرین شات برنامه است:

<div class="relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]">
    <div class="h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg"></div>
    <div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
    <div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
    <div class="h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>
    <div class="rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800">
        <img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png" class="dark:hidden w-[272px] h-[572px]" alt="">
        <img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png" class="hidden dark:block w-[272px] h-[572px]" alt="">
    </div>
</div>

و شما آن را دارید! خبر خوب این است که این نمونه از حالت تاریک نیز پشتیبانی می کند، به همین دلیل دو تصویر داخل ماکاپ داریم.

بررسی کنید که چگونه می توانید حالت تاریک را با Tailwind CSS ادغام کنید.

با فعال بودن حالت تاریک به این شکل به نظر می رسد:

این مثال از صفحه مدل‌های دستگاه Flowbite که با Tailwind CSS کدگذاری شده است، گرفته شده است.

اگر می‌خواهید نمونه‌های دستگاه‌های بیشتری مانند تبلت‌ها، تلفن‌های جایگزین، رایانه‌های رومیزی، لپ‌تاپ‌ها و حتی ساعت‌های هوشمند را بررسی کنید، می‌توانید فهرست کامل را در اینجا بررسی کنید:

در اینجا تصاویر پیش نمایش هستند:

اعتبارات و نتیجه گیری

این کامپوننت‌ها را می‌توان برای پیش‌نمایش برنامه‌تان در قسمت‌های hero یا CTA استفاده کرد و سفارشی‌سازی مستقیم از HTML از طریق Tailwind CSS بسیار آسان است.

اعتبار به کتابخانه های منبع باز Tailwind CSS و Flowbite می رسد.