<div class="bg-green-400 grid min-h-screen font-sans place-items-center">
  <div class="mx-auto h-[712px] w-[350px] bg-black rounded-[40px] border-[15px] border-b-[20px] border-t-[20px] border-gray-900 relative overflow-hidden shadow-xl">
    <div class="relative">
      <div class="ml-3 mt-3 flex justify-start space-x-1">
        <div class="flex justify-center items-center h-5 w-5 bg-gray-800 rounded-full">
          <div class="flex justify-center items-center h-3 w-3 bg-gray-900 rounded-full">
            <div class="h-1 w-1 bg-gray-700 rounded-full"></div>
          </div>
        </div>
      </div>
      <div class="m-4 grid grid-cols-3 text-white gap-1 h-20">
        <div class="flex flex-col justify-center items-center bg-red-400 rounded-lg px-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-auto -mb-4" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
          </svg>
          <p class="text-xs mt-auto mb-1">Emergency</p>
        </div>
        <div class="flex flex-col justify-center items-center bg-gray-800 rounded-lg px-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-auto -mb-4" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
          </svg>
          <p class="text-xs mt-auto mb-1">Restart</p>
        </div>
        <div class="flex flex-col justify-center items-center bg-gray-800 rounded-lg px-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-auto -mb-4" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
          </svg>
          <p class="text-xs mt-auto mb-1">Power</p>
        </div>
      </div>
      <div class="mr-4 mt-10">
        <div class="flex justify-end items-center text-white">
          <p class="mr-[77px] text-xs flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
            </svg>
            Hold to reader
          </p>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
            </svg>
          </div>
        </div>
        <div class="flex justify-start items-center mt-4">
          <div class="w-5 h-32 rounded-r-lg bg-red-300"></div>
          <div class="flex flex-col justify-between ml-5 h-40 w-60 rounded-lg bg-red-300 bg-gradient-to-br from-blue-400 via-indigo-500 to-pink-500">
            <p class="p-3 text-xs text-right text-white italic">BANK</p>
            <p class="p-3 text-xs text-left text-white">**** **** 4545</p>
          </div>
        </div>
      </div>
      <div class="mx-4 mt-8">
        <div class="flex justify-end items-center text-white">
          <p class="mr-[90px] flex items-center">
            Home
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-6" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </p>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
            </svg>
          </div>
        </div>
        <div class="my-4 grid grid-cols-2 text-white gap-1 h-20">
          <div class="flex flex-col bg-gray-800 rounded-lg p-3">
            <div class="flex justify-start">
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
                </svg>
              </div>
              <p class="text-gray-300 ml-2 text-xs leading-5">Tap to start</p>
            </div>
            <div class="text-sm mt-2">Coming home</div>
          </div>
          <div class="flex flex-col bg-yellow-200/20 rounded-lg p-3">
            <div class="flex justify-start text-yellow-300">
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
                </svg>
              </div>
              <p class="ml-1 text-xs leading-5">On</p>
            </div>
            <div class="text-sm mt-2">Floor lamp</div>
          </div>
          <div class="flex flex-col bg-gray-800 rounded-lg p-3">
            <div class="flex justify-start">
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
                </svg>
              </div>
              <p class="text-gray-300 ml-1 text-xs leading-5">Unlocked</p>
            </div>
            <div class="text-sm mt-2">Front door</div>
          </div>
          <div class="flex flex-col bg-yellow-200/20 rounded-lg p-3">
            <div class="flex justify-start text-yellow-300">
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
                </svg>
              </div>
              <p class="ml-1 text-xs leading-5">On &middot; 80%</p>
            </div>
            <div class="text-sm mt-2">Table lamp</div>
          </div>
          <div class="flex flex-col bg-gray-800 rounded-lg p-3">
            <div class="flex justify-start text-blue-300">
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
              </div>
              <p class="ml-2 text-xs leading-5">Cooling &middot; 80 &#176;</p>
            </div>
            <div class="text-sm mt-2">Thermostat</div>
          </div>
          <div class="flex flex-col bg-gray-800 rounded-lg p-3">
            <div class="flex justify-start">
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
                </svg>
              </div>
              <p class="text-gray-300 ml-2 text-xs leading-5">Standing by</p>
            </div>
            <div class="text-sm mt-2">Vacuum cleaner</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>