Basic Virtual Machine Costs - Tailwind Component

<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <div class="relative bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-lg sm:mx-auto sm:rounded-lg">
    <div class="bg-blue-700 py-4 px-8 w-full rounded-t-md">
      <h1 class="font-bold text-4xl text-gray-100">Basic virtual machine costs</h1>
      <p class="mt-4 text-gray-300">Wasy, fast, and flexible compute built for a range of needs.</p>
      <div class="flex flex-wrap justify-center gap-5 my-5">
        <button
          class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 py-3 px-6 font-semibold text-white inline-flex items-center rounded">
          1 CPU
        </button>
        <button
          class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 py-3 px-6 font-semibold text-white inline-flex items-center rounded">
          2 CPU
        </button>
        <button
          class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 py-3 px-6 font-semibold text-white inline-flex items-center rounded">
          4 CPU
        </button>
        <button
          class="bg-blue-300 bg-opacity-40 hover:bg-blue-400 py-3 px-6 font-semibold text-white inline-flex items-center rounded">
          8 CPU
        </button>
      </div>
    </div>
    <div class="max-w-md mx-auto px-2">
      <div class="divide-y divide-gray-300/50">
        <div class="py-8 text-base leading-7 space-y-6 text-gray-600">
          <div class="text-center py-3 px-1 font-medium text-gray-600 bg-gray-300 rounded-xl">
            <p>1GB Memory / 60GB Storage / 3TB Bandwidth</p>
          </div>
          <ul class="space-y-8 pb-4">
            <li class="flex justify-between items-center">
              <div class="inline-flex items-center">
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/DigitalOcean_logo.svg/512px-DigitalOcean_logo.svg.png"
                  alt="512px-DigitalOcean_logo" class="w-10 mr-2">
                DigitalOcean
              </div>
              <div class="font-bold text-3xl text-blue-600">$5</div>
            </li>
            <li class="flex justify-between items-center">
              <div class="inline-flex items-center">
                <img
                  src="https://cloudonair.withgoogle.com/api/assets?path=/gs/gweb-gc-gather-production.appspot.com/files/AAANsUkbI2YbsqU6Bp1LcvnTIWxmAq6YqKBMPAvzRKafVXz5e-Hos1u6U93-GznMChWoAxrPPcUsBMmBk23BZr0mS2M.1Kj-bx3ECiOPV4Jg"
                  alt="social-icon-google-cloud-1200-630" class="w-10 mr-2">
                GCP
              </div>
              <div class="font-bold text-3xl text-red-600">$6.11</div>
            </li>
            <li class="flex justify-between items-center">
              <div class="inline-flex items-center">
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Amazon_Web_Services_Logo.svg/512px-Amazon_Web_Services_Logo.svg.png"
                  alt="512px-Amazon_Web_Services_Logo" class="w-10 mr-2">
                AWS
              </div>
              <div class="font-bold text-3xl text-red-600">$8.50</div>
            </li>
            <li class="flex justify-between items-center">
              <div class="inline-flex items-center">
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Microsoft_Azure.svg/1200px-Microsoft_Azure.svg.png"
                  alt="1200px-Microsoft_Azure" class="w-10 mr-2">
                Azure
              </div>
              <div class="font-bold text-3xl text-red-600">$7.59</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  body {
    font-family: 'Space Mono', monospace;
  }
</style>