Application toolkit - Devices

<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="/assets/images/app-toolkit/device-mobile.jpg" alt="HS2 Design System on mobile">
  </div>
</figure>

<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">designsystem.hs2.org.uk</div>
  </div>

  <div class="bg-gray-800 rounded-b-lg">
    <img class="max-w-full h-auto rounded-b-lg" src="/assets/images/app-toolkit/device-web.jpg" alt="HS2 Design System on Desktop">
  </div>
</figure>